Greeny CSS Drop Down Menu Bar For Blogger

বন্ধুরা আজ দেখাবো ব্লগার সাইটে কিভাবে Greeny CSS Drop Down Menu Bar For Blogger যুক্ত করবেন।

১ । আপনার ব্লগার লগ ইন করে Template এ গিয়ে Html Editor এ গিয়ে খুজে বের করুন ]]></b:skin>
২ ।এর পর নিচের কোডটি কপি করে এই কোডের
 ]]></b:skin> পুর্বে পেষ্ট করুন।

 The CSS Code for the menu starts here bloggertrix.com */
#bloggertrix_menu1{
height:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfahoqD7kntWS-s2dKKFApSnCQe8K9SnrkRaWe-i8ahbXH6gAnWfK3E-2DRvv1qsVJLUrUO2vUDfl6x89Qs4W_lGmIht9zI3ytsPi5inR8fXU6t2dWcL5J2vwbng-55jOf3IXWWe1zQM/s1600/bloggertrix.com_menubg.png);
display:block;padding:0px 0 0px 0px;
font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;text-transform:uppercase;overflow:hidden;
width:960px;
}
#bloggertrix_menu{
margin: 0px;padding: 0px 1px;width:998px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfahoqD7kntWS-s2dKKFApSnCQe8K9SnrkRaWe-i8ahbXH6gAnWfK3E-2DRvv1qsVJLUrUO2vUDfl6x89Qs4W_lGmIht9zI3ytsPi5inR8fXU6t2dWcL5J2vwbng-55jOf3IXWWe1zQM/s1600/bloggertrix.com_menubg.png) ;
height:32px;
}
#bloggertrix_menu ul {
float: left;list-style: none;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#bloggertrix_menu li a, #bloggertrix_menu li a:link, #bloggertrix_menu li a:visited {
color: #bfe195;
display: block;
margin: 0px;
padding: 10px 10px 10px 10px;
}
#bloggertrix_menu li a:hover, #bloggertrix_menu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfahoqD7kntWS-s2dKKFApSnCQe8K9SnrkRaWe-i8ahbXH6gAnWfK3E-2DRvv1qsVJLUrUO2vUDfl6x89Qs4W_lGmIht9zI3ytsPi5inR8fXU6t2dWcL5J2vwbng-55jOf3IXWWe1zQM/s1600/bloggertrix.com_menubg.png) repeat-x ;
color: #fff;
margin: 0px;
padding: 10px 10px 10px 10px;
text-decoration: none;
}
#bloggertrix_menu li li a, #bloggertrix_menu li li a:link, #bloggertrix_menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfahoqD7kntWS-s2dKKFApSnCQe8K9SnrkRaWe-i8ahbXH6gAnWfK3E-2DRvv1qsVJLUrUO2vUDfl6x89Qs4W_lGmIht9zI3ytsPi5inR8fXU6t2dWcL5J2vwbng-55jOf3IXWWe1zQM/s1600/bloggertrix.com_menubg.png) ;
width: 150px;
color: #bfe195;
font-family:Tahoma,century gothic,Georgia,  sans-serif;
font-weight: normal;float: none;margin: 0px;padding: 9px 10px 9px 10px;
border-bottom: 1px solid #5E9F09;
}
#bloggertrix_menu li li a:hover, #bloggertrix_menu li li a:active {
background:#3f6d06;
color: #fff;
padding: 9px 10px 9px 10px;
}
#bloggertrix_menu li ul {
z-index: 9999;
position: absolute;
left: -999em;height: auto;width: 170px;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li li {
}
#bloggertrix_menu li ul a {
width: 140px;
}
#bloggertrix_menu li ul a:hover, #bloggertrix_menu li ul a:active {
}
#bloggertrix_menu li ul ul {
margin: -31px 0 0 170px;
}
#bloggertrix_menu li:hover ul ul, #bloggertrix_menu li:hover ul ul ul,
#bloggertrix_menu li.sfhover ul ul, #bloggertrix_menu li.sfhover ul ul ul {
left: -999em;
}
#bloggertrix_menu li:hover ul, #bloggertrix_menu li li:hover ul,
#bloggertrix_menu li li li:hover ul, #bloggertrix_menu li.sfhover ul,
#bloggertrix_menu li li.sfhover ul, #bloggertrix_menu li li li.sfhover ul {
left: auto;
}
#bloggertrix_menu li:hover, #bloggertrix_menu li.sfhover {
position: static;
}

৩।এর পর Layout এ গিয়ে Ad a Gadget এ গিয়ে Html/JavaScript এ নিচের কোডটি পেষ্ট করে সেভ করে বের হয়ে আসুন

 <div id="bloggertrix_menu1">
<div id="bloggertrix_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Business</a>
<ul class="children">
<li><a href="#">Internet</a></li>
<li><a href="#">Market</a></li>
<li><a href="#">Stock</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Downloads</a>
<ul class="children">
<li><a href="#">Dvd</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Software</a>
<ul class="children">
<li><a href="#">Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Parent Category</a>
<ul class="children">
<li><a href="http://www.bloggertrix.com/">Child Category 1</a>
<ul class="children">
<li><a href="#">Sub Child Category 1</a></li>
<li><a href="#">Sub Child Category 2</a></li>
<li><a href="#">Sub Child Category 3</a></li>
</ul>
</li>
<li><a href="#">Child Category 2</a></li>
<li><a href="#">Child Category 3</a></li>
<li><a href="#">Child Category 4</a></li>
</ul>
</li>
<li><a href="#">Featured</a></li>
<li><a href="#">Health</a>
<ul class="children">
<li><a href="#">Childcare</a></li>
<li><a href="#">Doctors</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Uncategorized</a></li>
</ul>
</div>
</div>

কমেন্ট করতে আর শেয়ার করতে ভুলবেন না,