How to Add the above Black Css Multi Drop down Menu to Blogger


This is a new Navigation Menu for Blogger with Classic professional Stylist look.we all know that what is importance of a navigation menu in any Blog or Site.it doesn't only help your user's to get their desire content easily but also help you decrease the bounce rate of any site or blog.




                                                       
                                             Before Click                                            After Click

Follow My Step by Steps Instruction to add this Menu to blogger site.

  • Login to Blogger  >> Click on drop down >> Now select "Template"
  • Now you can see " EDIT HTML" Button Click on it >>  Now click Proceed button 
  • Now find this tag ]]></b:skin> by using Ctrl+F 
  • Paste below code Before/above ]]></b:skin> tag .

ul#Modernhackerssmenu,ul#Modernhackerssmenu ul{
margin:0;list-style:none;padding:0;background-color:#000;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoygZGBSGV4hbUxyNnaUXPHFMndy0f5W3xoo-amG06amBFdYSSNYeCqIts57iKGfmqBTDLcgrGUY4z3ON61iccrnI_7-o6lb_qP6qW6ejZQMsjSnlCM5JFldZXV7WJYkIFiabi3wtYVs/s1600/mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#Modernhackerssmenu ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#Modernhackerssmenu li:hover>*{
display:block;}
ul#Modernhackerssmenu li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#Modernhackerssmenu li:hover{
z-index:1;}
ul#Modernhackerssmenu ul ul{
position:absolute;left:100%;top:0;}
ul#Modernhackerssmenu{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
* html ul#Modernhackerssmenu li a{
display:inline-block;}
ul#Modernhackerssmenu>li{
margin:0 0 0 1px;}
ul#Modernhackerssmenu ul>li{
margin:1px 0 0;}
ul#Modernhackerssmenu a:active, ul#Modernhackerssmenu a:focus{
outline-style:none;}
ul#Modernhackerssmenu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoygZGBSGV4hbUxyNnaUXPHFMndy0f5W3xoo-amG06amBFdYSSNYeCqIts57iKGfmqBTDLcgrGUY4z3ON61iccrnI_7-o6lb_qP6qW6ejZQMsjSnlCM5JFldZXV7WJYkIFiabi3wtYVs/s1600/mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#Modernhackerssmenu ul li{
float:none;margin:9px 0 0;}
ul#Modernhackerssmenu ul a{
text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#cccccc;text-decoration:none;}
ul#Modernhackerssmenu li:hover>a,ul#Modernhackerssmenu li a.pressed{
background-color:#00c4ff;border-style:none;color:#ffffff;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoygZGBSGV4hbUxyNnaUXPHFMndy0f5W3xoo-amG06amBFdYSSNYeCqIts57iKGfmqBTDLcgrGUY4z3ON61iccrnI_7-o6lb_qP6qW6ejZQMsjSnlCM5JFldZXV7WJYkIFiabi3wtYVs/s1600/mainbk.png");background-position:0 100px;text-decoration:none;}
ul#Modernhackerssmenu span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#Modernhackerssmenu ul span{
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Ci9h-uKc9iNcKdT3nyo5M74UxWlZcjffy3D4CTJSSFP1VojAUhJKOzH2Vl74qjb_w26rqvqFG_8chnsg8f7kwzbKrCAuaB6NFGGMD7o6i5WLo1nTkZeQzSKSea3nmd2ZYRKuRFCkJMs/s1600/arrowsub.gif");padding-right:15px;}
ul#Modernhackerssmenu ul li:hover>a,ul#Modernhackerssmenu ul li a.pressed{
background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#Modernhackerssmenu li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#Modernhackerssmenu li.topfirst:hover>a,ul#Modernhackerssmenu li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#Modernhackerssmenu li.topmenu>a{
text-shadow:#000000 0px -1px 1px;}
ul#Modernhackerssmenu li.topmenu:hover>a,ul#Modernhackerssmenu li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#Modernhackerssmenu li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#Modernhackerssmenu li.toplast:hover>a,ul#Modernhackerssmenu li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#Modernhackerssmenu _>li>a{
padding:0;}
ul#Modernhackerssmenu li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#Modernhackerssmenu li.subfirst:hover>a,ul#Modernhackerssmenu li.subfirst a.pressed{
border-style:none;}

Now
  • Click on drop down >> Now select "Layout"
  • Now you will see "Add a Gadget" button click any of them
  • A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
  • Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.
 <ul id="Modernhackerssmenu" class="topmenu">
<li class="topfirst"><a href="#" style="height:15px;line-height:15px;">Modernhackerss menu 0</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Modernhackerss menu 1</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 0</a></li>
<li><a href="#">Item 1 3</a></li>
<li><a href="#">Item 1 4</a></li>
<li><a href="#"><span>Item 1 5</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 5 0</a></li>
<li><a href="#">Item 1 5 1</a></li>
<li><a href="#">Item 1 5 2</a></li>
</ul></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#">Item 1 2</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">Modernhackerss menu 2</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">Modernhackerss menu 3</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">Modernhackerss menu 4</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">Modernhackerss menu 5</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">Modernhackerss menu 6</a></li>
<li class="toplast"><a href="#" style="height:15px;line-height:15px;">Modernhackerss menu 7</a></li>
<!-- End Modernhackerss.com menu section -->


Replace all  # with your Link

Now all done .Enjoy.
Posted by
Labels: