Add Drop Down Menu Widget To Blogger

Chumaini.blogspot.com

How To Add Drop Down Menu Widget To Blogger

1. Go To Blogger > Design

2. Click Add a Gadget or Add a Page element

3. Choose HTML/JavaScript widget

4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget

5. Hit Save

6. Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,


The HTML or  CSS Script for the Articles and Tutorials related Click Here

To change the links, Edit this part of the HTML in all codes below,


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

Replace the hash(#) sign with your Page Links /URL and replace Home, Products, Drop Down CSS Menus etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,

<li><a href="#">Home</a></li>

How to Add CSS for Menu:-

Instructions To Follow:

Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"

- Find this type of code ]]></b:skin> and just before paste this CSS Code:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18wGrUY3FtejD-hKD62RclSUovnYy4XKSoXtDeVUgwKqI_EUynefgL9XqgA3Z24Io8o0h_p1cPuxgbzJjc5seXsTMC7-rq70PSExfm1F39YQnEEaReQQDtVn4Q6wktoa5ToqwA36_GKMV/s1600/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbWWspewj2KX9eb4UK-DZ-uEZ8nW14jYTnpNA2KDlCFYLW3e4HxEi2jiEGDYe-IpjR7yYS60IJo4ETjRtYTFzqtDpyF0n7amZaBLrE8RkQmJ7FrBOICnnza7NtPf5QsRK_3XogB4Cdf7AI/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1yYXS8waIuKE9h5fQ-ivXgDpP8Y8WnkBWn44lF6K2yEA5BzWK9f5ubHnRu6Zdm-ov0B_9H07DiKO8yj00uYr0ph4dN36LIFzbXTgQmIKGCnjZLjjHKCrJRN_GwogHcI4xHN4psjswaOy/s1600/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNBPdSB1l3RJj65kMhPkVd8VwpIsLQKTMAJHaUkAvpwlFGXqendTOk2VKb_D1FNuq_s2sWB7t78vjGluHbZ3IWe1HDR94A1h8PF33faECGuHcmJNBZddSj6_BAmB-Ir0rTWPmrT_DShgj/s1600/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}
Now Click Save Template


That's Done! Hope this Post will be helpful for Blogspot Users.




The HTML or  CSS Script for the Articles and tutorials related Click Here