Drop down menu in html for blogger
Menu bar is the main part for the designing of a web page that makes it appealing and beautiful. In the same way, we can also customize a menu bar in the blogger with the drop down facility that make it looks good and attractive.
As, we all know that the Google Blogger is the most popular platform for the blogging and there are various bloggers are registered on it.
If you want to create a customized menu with the drop down facility for your blog, then how will you create it.?
If you search the google for it you will get many pages for it, but some time, all those ideas will not work for your specific blog.
Then what will you do.? probably, you will continue with searching, iff you're a passionate coder.!
But sometime people starting feeling boring with the searches.
So, there should be a particular post/solution that resolve all the issues with the blog menu bar.
Here it is-
 |
| Image |
As, we all know that the Google Blogger is the most popular platform for the blogging and there are various bloggers are registered on it.
If you want to create a customized menu with the drop down facility for your blog, then how will you create it.?
If you search the google for it you will get many pages for it, but some time, all those ideas will not work for your specific blog.
Then what will you do.? probably, you will continue with searching, iff you're a passionate coder.!
But sometime people starting feeling boring with the searches.
So, there should be a particular post/solution that resolve all the issues with the blog menu bar.
Here it is-
Step 1
Log in to your Blogger dashboard, click the "Design" button pertaining to the blog you want to adjust, select the "Edit HTML" option and check the button next to "Expand Widget Templates."
Step 2
Search for the "]]></b:skin>" tag and insert the following code right above it:
/* Navigation Menu ------------------------------------------------------*/ #NavbarMenu {
width: 100%; height: 35px; background:#cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf2qjaLu9QAKXOavE0AXi2zSyY3N1BDHKG91274J5tmL33XN1kLMhRelwsgVSJgJYqsjdTblwQx1rJhk_35RkrXGRdERwX2vKJTDwJuUnfJnwGdAcAsoLZ1i1jMzXCQ06lYnxRGONiSRw/s1600/white+to+black.png) repeat-x top; color: #cdaa7d margin: 0 auto 0; padding: 0; font: normal 12px Arial, Tahoma, Verdana; border-top: 1px solid #855e42; border-bottom: 1px solid #855e42; } #NavbarMenuleft { width: 1200px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #ff0000; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: bold 12px Arial, Tahoma, Verdana; } #nav li a:hover, #nav li a:active { background:#ffffff; color: #8b5a00; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf2qjaLu9QAKXOavE0AXi2zSyY3N1BDHKG91274J5tmL33XN1kLMhRelwsgVSJgJYqsjdTblwQx1rJhk_35RkrXGRdERwX2vKJTDwJuUnfJnwGdAcAsoLZ1i1jMzXCQ06lYnxRGONiSRw/s1600/white+to+black.png) repeat-x top; width: 140px; color: #fff; text-transform: capitalize; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #855e42; border-left: 1px solid #855e42; border-right: 1px solid #855e42; font: normal 12px Arial, Tahoma, Verdana; } #nav li li a:hover, #nav li li a:active { background: #ffffff; color: #8b5a00; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
/* Navigation Menu ------------------------------------------------------*/ #NavbarMenu {
width: 100%; height: 35px; background:#cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf2qjaLu9QAKXOavE0AXi2zSyY3N1BDHKG91274J5tmL33XN1kLMhRelwsgVSJgJYqsjdTblwQx1rJhk_35RkrXGRdERwX2vKJTDwJuUnfJnwGdAcAsoLZ1i1jMzXCQ06lYnxRGONiSRw/s1600/white+to+black.png) repeat-x top; color: #cdaa7d margin: 0 auto 0; padding: 0; font: normal 12px Arial, Tahoma, Verdana; border-top: 1px solid #855e42; border-bottom: 1px solid #855e42; } #NavbarMenuleft { width: 1200px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #ff0000; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: bold 12px Arial, Tahoma, Verdana; } #nav li a:hover, #nav li a:active { background:#ffffff; color: #8b5a00; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf2qjaLu9QAKXOavE0AXi2zSyY3N1BDHKG91274J5tmL33XN1kLMhRelwsgVSJgJYqsjdTblwQx1rJhk_35RkrXGRdERwX2vKJTDwJuUnfJnwGdAcAsoLZ1i1jMzXCQ06lYnxRGONiSRw/s1600/white+to+black.png) repeat-x top; width: 140px; color: #fff; text-transform: capitalize; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #855e42; border-left: 1px solid #855e42; border-right: 1px solid #855e42; font: normal 12px Arial, Tahoma, Verdana; } #nav li li a:hover, #nav li li a:active { background: #ffffff; color: #8b5a00; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
Step 3
Insert the following code right after the "/b:section - /div" tag:
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>SECTION</a> <ul> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> </ul> </li> </ul> </div> </div> <!-- end navbar -->
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>SECTION</a> <ul> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> </ul> </li> </ul> </div> </div> <!-- end navbar -->
Step 4
Replace the "URL"(s) with the URLs pertaining to the pages you would like them to link to. Likewise, replace the "SECTION"(s) with the corresponding menu labels.
Step 5
Add an additional sub-menu by inserting the following code between
<li><a href='http://URL’>SECTION</a></li> </ul> </li>
and
</ul> </div> </div> <!-- end navbar -->
:
<li><a href='#'>ADDITIONAL SECTION</a> <ul> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> </ul> </li>
<li><a href='http://URL’>SECTION</a></li> </ul> </li>
and
</ul> </div> </div> <!-- end navbar -->
:
<li><a href='#'>ADDITIONAL SECTION</a> <ul> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> <li><a href='http://URL’>SECTION</a></li> </ul> </li>
That's all.!!!
You can use this to any blog to create the drop down menu in your blog.
If you like this Please leave a comment for suggestion and share with your friends so that they may get the benefit from it.
Thank you.!!!
