বিজ্ঞান ও প্রযুক্তি

আমাদের ব্লগ সাইট ভিজিট করার জন্য ধন্যবাদ | সব গুলো পর্বই একদিন পর পর আপলোড করা হচ্ছে। দয়া করে পরবর্তী পর্বের জন্য আগামিকাল আবার আমাদের সাইট ভিজিট করুন। ধন্যবাদ

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>

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