Today i Am tell You How To add Dropdown menu in your blogger . its help you to take more data or links in your menu . I Am add some normal things in menu like home , contact us , or about us . You can add more links in your menu simply . After you can see drop down menu code you can easily understand how to add more items in your menu .
How To Add Drop Down Menu In Blogger ?
1. Go to Blogger > Template > Edit HTML .
2. Please Backup Your Template .
3. Press ( CTRL+F ) And Find ]]></b:skin> .
4. Paste this code before ]]></b:skin> .
#thefreetrickmenu{
height:37px;
display:block;
padding:0;
margin:20px auto;
border:1px solid;
border-radius:5px;
}
#thefreetrickmenu > ul {list-style:inside none; padding:0; margin:0;}
#thefreetrickmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
/* menu links */
#thefreetrickmenu > ul > li > a{
outline:none;
display:block;
position:relative;
padding:12px 20px;
font:bold 13px/100% Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
#thefreetrickmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
/* navigation links */
#thefreetrickmenu > ul > li > a:after{
content:'';
position:absolute;
border-right:1px solid;
top:-1px; bottom:-1px; right:-2px;
z-index:99;
}
#thefreetrickmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
/* dropdowns */
#thefreetrickmenu > ul > li.has-sub > a:before{
content:'';
position:absolute; top:18px; right:6px;
border:5px solid transparent;
border-top:5px solid #fff;
}
#thefreetrickmenu > ul > li.has-sub:hover > a:before{top:19px;}
/* drop menu link */
#thefreetrickmenu ul li.has-sub:hover > a{
background:#3f3f3f;
border-color:#3f3f3f;
padding-bottom:13px; padding-top:13px;
top:-1px;
z-index:999;
}
/* when hover */
#thefreetrickmenu ul li.has-sub:hover > ul, #thefreetrickmenu ul li.has-sub:hover > div{display:block;}
#thefreetrickmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
/* menu styles */
#thefreetrickmenu ul li > ul, #thefreetrickmenu ul li > div{
display:none; width:auto;
position:absolute; top:38px;
padding:10px 0;
background:#3f3f3f;
border-radius:0 0 5px 5px;
z-index:999;
}
/* menu list style */
#thefreetrickmenu ul li > ul{width:200px;}
#thefreetrickmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#thefreetrickmenu ul li > ul li a{
outline:none; display:block;
position:relative;
margin:0; padding:8px 20px;
font:10pt Arial, Helvetica, sans-serif; color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}
/* menu box styles */
#thefreetrickmenu ul li > div{width:auto; padding:20px;}
#thefreetrickmenu ul li > div p{
font:9pt/150% Arial, Helvetica, sans-serif; color:#fff;
text-align:justify;
text-shadow:1px 1px 0 rgba(0,0,0,0.5);
margin:0;
}
#thefreetrickmenu ul li > div h1{
position:relative;
margin:0 0 12px 0;
padding-bottom:10px;
border-bottom:1px solid #222;
font:bold 13pt Arial, Helvetica, sans-serif; color:#bbb;
text-shadow:1px 1px 0 rgba(0,0,0,0.5);
}
#thefreetrickmenu ul li > div h1:after{
content:'';
height:0; padding:0;
position:absolute; bottom:-2px; left:0; right:0;
border-bottom:1px solid #555;
}
/* ---------------- Styles ----------------- */
/* Gray */
#thefreetrickmenu,
#thefreetrickmenu > ul > li > ul > li a:hover{
background:#d5d5d5;
background:-moz-linear-gradient(top, #d5d5d5 0%, #c5c5c5 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5d5d5), color-stop(100%,#c5c5c5));
background:-webkit-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:-o-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:-ms-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#c5c5c5',GradientType=0);
}
#thefreetrickmenu {border-color:#888;}
#thefreetrickmenu > ul > li > a{border-right:1px solid #888; color:#fff;}
#thefreetrickmenu > ul > li > a:after{border-color:#e5e5e5;}
#thefreetrickmenu > ul > li > a:hover{background:#bbb;}
5. After that click on Save template .
6. Then Go to Blogger > Layout .
7. Click On Add a Gadget and select HTML/javascript widget.
8. Inside it Paste The Code .
<div id='thefreetrickmenu'>
<ul>
<li class='active'><a href='http://thefreetrick.blogspot.in/'><span>Home</span></a></li>
<li><a href='#'><span>How To</span></a></li>
<li class='has-sub'><a href='#'><span>Blogger</span></a>
<ul>
<li><a href='#'><span>Template</span></a></li>
<li class='last'><a href='#'><span>Widget</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li class='last'><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Contact Us</span></a>
<ul>
<li><a href='#'><span>Google +</span></a></li>
<li><a href='#'><span>Contact on Facebook</span></a></li>
<li class='last'><a href='#'><span>Contact on Twitter</span></a></li>
</ul>
</li>
<li><a href='#'><span>About us</span></a></li>
<li class='has-sub'><a href='#'><span>Item</span></a>
<ul>
<li class='last'><a href='#'><span>Item</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>Item</span></a>
<ul>
<li class='last'><a href='#'><span>Item</span></a></li>
</ul>
</li>
</ul>
</div>
9. click On save button.
Your Drop down menu is ready .
Note : if Your Template Not support that formate then
1. go to Blogger > Template > Edit HTML .
2. Please Backup Your Template .
3. Press ( CTRL+F ) And Find <div class='tabs-outer'>
4. Then Paste 2nd Code After It .
Or If You Have Any Problem then write your problems in Comment . Thanx
Enjoy blogging
0 comments:
Post a Comment