This is cool drop down menu for your blogger.
1. Log in to blogger account and Go to Design > Edit HTML
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
5. Now Go to Design >>page Element
6.Click Add gadget (under your header) and Select HTML/JavaScript
7. Now paste paste below code
Replace URL With your URL
Replace Blue color words with any names you want to put as menu name.
8. Now save HTML/JavaScript
You are done.
Check the menubar
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
/*NavBar --------------*/ #navbar{ width: 780px; height: 48px; overflow: hidden; margin: 0px 0px 20px 0px; padding: 0px; } .navbar-top{ width: 910px; height: 9px; overflow: hidden; margin: 0px; padding: 0px; } .navbar-bottom{ width: 910px; height: 9px; overflow: hidden; margin: 0px; padding: 0px; } .navbar-mid{ width: 910px; height: 30px; overflow: hidden; margin: 0px; padding: 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFm7J14aNHwzcN1djpM3koDvYDvbC-2Lu3eSAlIHIp0zvQJc0YW9gwEPyW4IwZIvlkXgyL_C3t5hbnek4dRBQRgMRYShw0kYCE03vd21VR9Rnwu9gKQzk2XPeic3Rf7uqU0xh_HhqxbM/s1600/black1.png); } .navbar-mid ul{ padding: 0px; margin: 0px; list-style-type: none; display: inline; } .navbar-mid ul li{ height: 30px; float: left; padding: 0px; margin: 0px; display: inline; border-left: 1px solid #292929; border-right: 1px solid #555; } .navbar-mid ul li a:link, .navbar-mid ul li a:visited{ display: block; margin: 0px; padding: 8px 10px 8px 10px; font-size: 11px; font-weight: bold; text-decoration: none; text-transform: uppercase; color: #FFFFFF; } .navbar-mid ul li a:hover{ font-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJjSo9BQqqQU8XVddz97yeOUbnsLQb52QbHuXZrIhnILHXWom__kCvmoSoc_NHFCk9ovxxEaQu6QPitvaGwuDBuj8X0IhoDwYZZ-Sj0MKkg_-3xlpwgBBQlRxf8UGxo6mtXMAJ-07CTk/s320/hover.png); } .single-black-bar{ float: left; width:1px; height: 30px; padding: 0px; margin: 0px; overflow: hidden; background: #292929; } .navbar-mid ul li.current_page_item a:link, .navbar-mid ul li.current_page_item a:visited, .navbar-mid ul li.current_page_item a:hover { display: block; margin: 0px; padding: 8px 10px 8px 10px; font-size: 11px; font-weight: bold; text-decoration: none; text-transform: uppercase; color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7ALszaHM6NdWXiJ6-DwlxDc8xZmEnZkxUVB9eD1Mx5oZBQ4b61_rGLkw6-lLVjfJvqVpo9BpCPfRNgKPae6mTlkav4svHLYNMzjFieXhSsMXqXwmET46eHmJjA6Ifu-hfVsN8fllQY8/s320/black2.png); } /*Bloggertrix.com --------------*/
5. Now Go to Design >>page Element
6.Click Add gadget (under your header) and Select HTML/JavaScript
7. Now paste paste below code
<div id="navbar"> <div class="navbar-top"> </div> <div class="navbar-mid"> <ul> <li class="page_item"> <a href="Homepage URL" title="Home">Home</a> </li> <li class="page_item page-item-2"><a href="URL" title="About">About</a></li> <li class="page_item page-item-18"><a href="URL" title="Contact">Contact</a></li> <li class="page_item page-item-20"><a href="URL" title="Portfolio">Portfolio</a></li> <li class="page_item page-item-22"><a href="URL" title="Make Money">Make Money</a></li> <li class="page_item page-item-24"><a href="URL" title="Themes">Themes</a></li> <li class="page_item page-item-26"><a href="URL" title="Comments">Comments</a></li> <li class="page_item page-item-28"><a href="URL" title="Links">Links</a></li> <li class="page_item page-item-30"><a href="URL" title="Forum">Forum</a></li><li class="page_item page-item-32"><a href="URL" title="Download">Download</a></li> </ul> <div class="single-black-bar"> </div> </div> <div class="navbar-bottom"> </div> </div>
Replace URL With your URL
Replace Blue color words with any names you want to put as menu name.
8. Now save HTML/JavaScript
You are done.
All those buttons are totally my reactions xD <3333
ReplyDeleteStep 4 should say "before" tag. Other than that t worked great! I'm loving my menu bar and am going to try the drop down next. Thanks.
ReplyDeleteDo you help me out to do same in word press based website...
ReplyDelete