কেমন আছেন সবাই ?

আশা করি সবাই ভালো আছেন।

আমিও আপনাদের দোয়ায় ভালো আছি।

আজ আমি আমার ব্লগস্পট ব্লগ ডিজাইন নিয়ে ৭ম পর্ব করতে যাচ্ছি।

আর আমি কিন্তু আজ খুব খুশি এবং টেকটিউনসকে আমি ধন্যবাদ জানাচ্ছি যে আমার পোস্ট গুলি তারা চেইন টিউনের তালিকায় রেখেছেন।

আর যারা আমার আগের পর্ব গুলি মিস করছেন তারা আগের পর্বগুলো দেখতে পারেন।

আজকে আমি দেখাবো কিভাবে আপনি আপনার ব্লগস্পট ব্লগে মেন্যুবার লাগাবেন। তাহলে আসুন শুরু করি।

• প্রথমে গুগল আইডি ওপাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
• তারপর Deshboard>Layout> Edit HTML পাতায় যান।
• Ctrl+F দিয়ে  ]]</b:skin> এই লিখাটি সার্চ করুন। লেখাটি  পেলে তার ঠিক উপরে নিচের কোডটি বসিয়ে দিন।

/* Navigation ----------*/
 #NavbarMenu {
 background: #A0CFEC;
 width: 980px;
 height: 34px;
 font-size: 12px;
 font-weight: bold;
 font-family: 'AdorshoLipi', Arial, Tahoma, Verdana;
 color: #000000;
 margin: 0;
 padding: 0;
 float:left;
 }
 #NavbarMenuleft {
 width: 690px;
 float: left;
 margin: 0;
 padding: 0;
 }
 #NavbarMenuright {
 width: 285px;
 float: right;
 margin: 0;
 padding: 6px 0 0;
 }
 #nav {
 margin: 0;
 padding: 0;
 }
 #nav ul {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
 }
 #nav li {
 list-style: none;
 margin: 0;
 padding: 0;
 }
 #nav li a, #nav li a:link, #nav li a:visited {
 color: #2008AF;
 display: block;
 font-size: 14px;
 font-weight: bold;
 font-family: Georgia, Times New Roman;
 margin: 0;
 padding: 5px 10px 5px;
 }
 #nav li a:hover, #nav li a:active {

color: #000000;
 font-weight: bold;
 margin: 0;
 padding: 5px 10px 5px;
 text-decoration: underline;
 }
 #nav li li a, #nav li li a:link, #nav li li a:visited {
 background: #A0CFEC;
 width: 100px;
 color: #2008AF;
 font-size: 14px;
 font-family: 'AdorshoLipi', Georgia, Times New Roman;
 font-weight: normal;
 float: none;
 margin: 0;
 padding: 3px 4px;
 border-bottom: 1px solid #FFF;

}
 #nav li li a:hover, #nav li li a:active {

color: #000000;
 padding: 3px 4px;
 }
 #nav li {
 float: left;
 padding: 0;
 }
 #nav li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 150px;
 margin: 0;
 padding: 0;
 border-left:1px solid #BFC0C0;

}
 #nav li ul a {
 width: 100px;
 }
 #nav li ul ul {
 margin: -28px 0 0 100px;
 }
 #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
 left: -999em;
 }
 #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
 left: auto;
 }
 #nav li:hover, #nav li.sfhover {
 position: static;
 }

• এবার নিচের দিকে স্ক্রল করে যান।
• নিচের দিকের <div id='content-wrapper'> লেখাটির ঠিক উপরে নিচের কোডটি লিখুন।

<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
	<li><a>Home</a></li>
	<li><a href="#">Blogging</a>
<ul>
	<li><a href="https://www.techtunes.io">Blogspot</a>
<ul>
	<li><a href="https://www.techtunes.io">Webdesign</a></li>
	<li><a href="http://www.">techtunes.io'>Blogger</a></li>
	<li><a href="http://www.">Gadgets</a></li>
</ul>
</li>
	<li><a href="http://www.techtunes..com.bd">Wordpress</a></li>
	<li><a href="https://www.techtunes.io">Report</a></li>
	<li><a href="https://www.techtunes.io">Html</a></li>
</ul>
</li>
	<li><a href="https://www.techtunes.iom">Linux</a>
<ul>
	<li><a href="https://www.techtunes.io">Ubuntu</a></li>
	<li><a href="https://www.techtunes.io">Asif Pagla Sabbir</a></li>
</ul>
</li>
	<li><a href="#">Other</a>
<ul>
	<li><a href="https://www.techtunes.io">E Book</a></li>
	<li><a href="http://www.">Downtechtunes.ioload</a></li>
	<li><a href="https://www.techtunes.io">HTML</a></li>
	<li><a href="http://www.">techtunes.ioAbout</a></li>
	<li><a href="https://www.techtunes.io">Email me</a></li>
	<li><a href="https://www.techtunes.io">Link to us</a></li>
	<li><a href="https://www.techtunes.io">Table of Contents</a></li>
</ul>
</li>
	<li><a href="http:/://www.techtunes.io">BH Templates</a></li>
</ul>
</div>
<div id="NavbarMenuright"><script type="text/javascript" src="http://tareq.wedevs.com/bangla_date_widget.php"></script>,<script type="text/javascript">// <![CDATA[
 var d=new Date();
 var weekday=new Array(7);
 weekday[0]="রবিবার )";
 weekday[1]="সোমবার )";
 weekday[2]="মঙ্গলবার )";
 weekday[3]="বুধবার )";
 weekday[4]="বৃহস্পতিবার )";
 weekday[5]="শুক্রবার )";
 weekday[6]="শনিবার )";
 document.write(" ( " + weekday[d.getDay()]);

// ]]></script></div>
</div>

• নিজের প্রয়োজনমতো লিংকগুলি ও এ্যাংকর টেক্সটগুলি বদলিয়ে নিন।
• একটু ধীরে ধীরে সময় নিয়ে করবেন, না হলে সবকিছু এলোমেলো হয়ে যাবে।
• আমি ন্যাভবারটির ডানপাশে বাংলা তারিখ কোড সহ দিলাম। আপনারা <div id='NavbarMenuright'>এই অংশের মধ্যে অন্যকিছুও বসিয়ে দিতে পারেন।

আশা করি সবাই পারবেন। যদি কোথায়ও বুঝতে কোন অসুবিধা হয় জানাতে ভুলবেন না। আর কারো ভালো লাগলে মন্তব্য করতে ভুলবেন না এবং কোন ভুল হলে ক্ষমা সুন্দর দিষ্টিতে দেখবেন।

সবাই ভালো থাকুন, সুস্থ থাকুন, ভালবাসাসহ আপনাদেরই আসিফ পাগলা সাব্বির।