Blogger Buzz: navigation menu

How to Add Neat CSS3 Dropdown Menu in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from <a href="http://script-tutorials.com/" rel="nofollow" style="color: blue;" target="_blank">script-tutorials.com</a> to which I have made some slight modifications so that it could easily adapt in our Blogger template. 
 
In the upper right corner of this menu we have the contact links and the social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, we have the drop-down navigation menu and on the left side, the search form. 
To achieve better user interface and interaction, the CSS dropdown menu features sub categories that appear with a nice touch of CSS3 box-shadow, text-shadow and a cool transition once the parent link is activated by a hover. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDa3EEsovfbve28pQt5kgyKk1szfzub5I0WM856RS2ZIle1JqJE5ApXf0QaGY2LZX_ZQuMcMVv88mO8XXjJhmvrF30pRlW6ekciDaJIVxmEhcV1P9MI9AbnRs9y1X_oaOtfkIQ-y3bU65/s1600/create-css3-dropdown-navigation-menu-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="dropdown menu" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDa3EEsovfbve28pQt5kgyKk1szfzub5I0WM856RS2ZIle1JqJE5ApXf0QaGY2LZX_ZQuMcMVv88mO8XXjJhmvrF30pRlW6ekciDaJIVxmEhcV1P9MI9AbnRs9y1X_oaOtfkIQ-y3bU65/s1600/create-css3-dropdown-navigation-menu-in-blogger.png" title="add a neat css3 dropdown menu in blogger" width="640" /></a></div>
 
Please visit this demo page to see it in action. 
 
 
<h3>
Adding the CSS dropdown navigation menu in Blogger</h3>
Step 1. Access your <a href="http://blogger.com/" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a> and go to Template > click on the Edit HTML button 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add Neat CSS3 Dropdown Menu" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="Add Neat CSS3 Dropdown Menu" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it. 
<blockquote class="tr_bq">
</header></blockquote>
Step 3. Just below </header> add the HTML structure: 
<blockquote class="tr_bq">
<div id='contact-links'> 
    <div id='my-links'> 
        <a href='#'>About</a> 
        <a href='#'>Contact</a> 
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb4kiLL9Uqu5PPsYDY-Ssh-ldkgw2KSk6e8V_9hk1HiE8ub6-_DIJL1lWm-73VwSu2PEAa933RmmTJA6lGY6iXhDmmeAriA2Ni5EQ2HVKEU-igCb_08YbyeVy0dPHg6SzBV4ZuH6MinYmI/s1600/facebook-icon.png' title='Facebook' width='18px'/></a> 
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8uWUO2WjDDT3o_iEijYxyWhxtEFsbqoE_AmArPpMNyU6oncjULWNHMtBinoIsIB9r-IS94jJ2idr64AUIKfd7rwmO2Jj7Zu5mibGwzIQofeqABDmRnaODaK-e3kg4ptjT8FNUU8QuM8bc/s1600/twitter.png' title='Twitter' width='18px' /></a> 
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-VsIPviIXMZndIWk1Cd9WTB40QD9dIRGF08qToOpg2djh53oDbDsjDZrHZqG_paA5iz9QgjDi06qUN6NDTHRmDUu1XMKe2w0rlwAJOnNWWW4FBq7ZG6sNBO9CDhE5U2M9qwO0-mEAFBPp/s1600/google-plus-icon.png' title='Google' width='18px'/></a> 
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglypV73GFGsn3RrUjB9k2pGW11tCYq_vEpoqkSLXLrxtOL4J8x1s-dLXzBOlMXmdgKf0YT7AeHqhYz99SqPKRSrU0xln4ZcH1bjHUR_1MWlvCtI7MILYNAdzLOBF-oLmSJJ5NALwerueSn/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a> 
    </div> 
 
    <div id='menu-container'> 
        <nav id='neat-menu'> 
            <ul> 
              <li class='active'><a href='/'>Home</a></li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
                <li><a href='#'>Single Menu</a></li> 
                <li><a href='#'>Single Menu</a></li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </nav> 
 
         
        <div id='menu-search'> 
          <form method='get' action='/search'> 
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/> 
            </form> 
        </div> 
    </div> 
</div></blockquote>
Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear. To change the social media icons, add the links of your icons instead of the ones in blue. If you don't know how to upload and get the URL of an image, please read this tutorial. 
 
If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including the ul tags. To remove only a menu element, remove the part that starts with <li> and ends with </li> 
 
Step 4. And now let's add the CSS styling for the menu. Search for the following piece of code: 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
Just above ]]></b:skin> add this code: 
<blockquote class="tr_bq">
#contact-links { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
    margin: auto; 
    position: relative; 
    width: 100%; 
} 
#contact-links a { 
    color: #4C9FEB; 
} 
#contact-links a:hover { 
    color: #3D85C6; 
} 
#my-links { 
    float: right; 
    font-size: 12px; 
    margin: 4px 10px; 
    overflow: hidden; 
    text-shadow: 0 1px 0 #FFFFFF; 
} 
#my-links a { 
    margin-left: 7px; 
    padding-left: 8px; 
    text-decoration: none; 
} 
#my-links a:first-child { 
    border-width: 0; 
} 
#menu-container { 
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; 
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 ); 
    border-radius: 0 0 4px 4px; 
border:1px solid rgba(0,0,0,0.1); 
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset; 
    clear: both; 
    height: 46px; 
    padding-top: 1px; 
} 
#neat-menu { 
    float: left; 
} 
#neat-menu a { 
    text-decoration: none; 
} 
#neat-menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#neat-menu > ul > li { 
    float: left; 
    padding-bottom: 12px; 
} 
#neat-menu ul li a { 
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset; 
    border-color: #D1D1D1; 
    border-image: none; 
    border-style: solid; 
    border-width: 0 1px 0 0; 
    color: #333333; 
    display: block; 
    font-size: 14px; 
    height: 25px; 
    line-height: 25px; 
    padding: 11px 15px 10px; 
    text-shadow: 0 1px 0 #FFFFFF; 
} 
#neat-menu ul li a:hover { 
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; 
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); 
} 
#neat-menu > ul > li.active > a { 
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); 
    border-bottom: 1px solid #2D81CC; 
    border-top: 1px solid #4791D6; 
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; 
    color: #FFFFFF; 
    margin: -1px 0 -1px -1px; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
} 
#neat-menu > ul > li.active > a:hover { 
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; 
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 ); 
} 
#neat-menu > ul > li:first-child > a { 
    border-radius: 0 0 0 5px; 
} 
#neat-menu ul ul { 
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; 
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; 
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 ); 
    border-radius: 5px 5px 5px 5px; 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 0 #FFFFFF inset; 
    height: 0; 
    margin-top: 1px; 
    opacity: 0; 
    overflow: hidden; 
    width: 240px; 
    padding: 0; 
    position: absolute; 
    visibility: hidden; 
    z-index: 1; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -ms-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 
#neat-menu ul li:hover ul  { 
    margin-top: 0\2; 
    height: auto; 
    opacity: 1; 
    visibility: visible; 
} 
#neat-menu ul ul a { 
    border-right-width: 0; 
    border-top: 1px solid #D1D1D1; 
    box-shadow: 0 1px 0 #FFFFFF inset; 
    color: #444444; 
    height: 24px; 
    line-height: 24px; 
    padding: 7px 12px; 
    text-shadow: 0 1px 0 #FFFFFF; 
} 
#neat-menu ul ul a:hover { 
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); 
    border-top: 1px solid #4791D6; 
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; 
    color: #FFFFFF; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
} 
#neat-menu ul ul li:first-child a { 
    border-top-width: 0; 
} 
#menu-search { 
    margin:8px 10px 0 0; 
    float: right; 
} 
#menu-search form { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOo4QAw6xx7xekQGf3wCOel2SJZD5MfoBuSwKZwT2IloB5_aVXajt3xxsM35y3ooKzyNcJJ1lZJoMebM2XvHeXEIgUWU9yzbLaVcL_eV23djV_EcwwG8G3dAE4_bUFqyFc5lRnMbTX-1B/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; 
    border: 1px solid #CCCCCC; 
    border-radius: 3px 3px 3px 3px; 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF; 
    height: 26px; 
    padding: 0 25px; 
    position: relative; 
    width: 130px; 
} 
#menu-search form:hover { 
    background-color: #F9F9F9; 
} 
#menu-search form input { 
    color: #999999; 
    font-size: 13px; 
    height: 26px; 
    text-shadow: 0 1px 0 #FFFFFF; 
    background: none repeat scroll 0 0 transparent; 
    border: medium none; 
    float: left; 
    outline: medium none; 
    padding: 0; 
    width: 100%; 
} 
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder { 
    color: #C4C4C4; 
}</blockquote>
Step 5. Click on the Save template button to save the changes... and you're done! ;) 
 
I hope you like this CSS3 dropdown menu and if you enjoyed this tutorial, please share and subscribe.</div>

menus navigation menu How to Add Neat CSS3 Dropdown Menu in Blogger

Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com to which I have made some slig...

How to Add an Admin Control Panel in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
A while ago I've posted some tutorials on how you can <a href="http://buzzblogger1.blogspot.com/2012/02/how-to-remove-blogger-navbar.html" rel="nofollow" style="color: blue;" target="_blank">remove the Blogger Navbar</a> or <a href="http://buzzblogger1.blogspot.com/2012/03/how-to-removehide-or-add-peek-boo.html" rel="nofollow" style="color: blue;" target="_blank">add a Peek A Boo Effect</a> so that it would show only when we mouse over on top of our page. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6si15Rh_VcFhBB5HgFR7k30tA8ORsLhQiw_vN4Ed3jpNJkJj5u2fk2CJCHkW11FoIQd7du9svnr4aWMK5QT1fjLggMtMBLMIy0D46TIVxWoWUgS4iWNohfoin6CCFcuhBWa8rjcG-at_/s1600/blogger-control-panel-for-admin2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Admin Comtrol Panel" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6si15Rh_VcFhBB5HgFR7k30tA8ORsLhQiw_vN4Ed3jpNJkJj5u2fk2CJCHkW11FoIQd7du9svnr4aWMK5QT1fjLggMtMBLMIy0D46TIVxWoWUgS4iWNohfoin6CCFcuhBWa8rjcG-at_/s1600/blogger-control-panel-for-admin2.png" title="Admin Comtrol Panel" width="320" /></a></div>
 
However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again. 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
 
So in this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as: 
 
- access to the Blogger's Homepage 
- create a New Page or Post 
- view all your posts 
- read your comments 
- access the Blog's layout to add or rearrange gadgets 
- edit the HTML of your Template 
- refresh current page or post 
- open a new tab with your blog's homepage 
- access the blog' settings 
- view your stats 
- ...and finally, log out 
 
We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it. 
 
The result will be something like this: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmq3X7zOcjjqLtGfgkykfquzY3pM3leeVez_5Kbju6UN7jrmqIslLTw3AM2azF02jpkAKA9bfMIZAMpuwnyqDmzBB-yzwb1hN8symPccIkyQWnIQvuPW0mMCID_JbN8GH0ZZ8O7DxaUoWu/s1600/how-to-add-admin-control-panel-on-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="admin control panel for blogger" border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmq3X7zOcjjqLtGfgkykfquzY3pM3leeVez_5Kbju6UN7jrmqIslLTw3AM2azF02jpkAKA9bfMIZAMpuwnyqDmzBB-yzwb1hN8symPccIkyQWnIQvuPW0mMCID_JbN8GH0ZZ8O7DxaUoWu/s1600/how-to-add-admin-control-panel-on-blogger.png" title="add control panel for blog administrator in blogger" width="640" /></a></div>
 
<h3>
Getting the Blog ID </h3>
The first thing we need to do is get the ID of our blog by clicking on any option from our <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blog Dashboard</a>, for example Settings. Once we have clicked there, take a look at the address bar in your browser: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllLeUh4iFM_TsbVqiZBykvB2BWFnLvhpoQNK6tzQJAOJG7AFGMSu01C7rHRSuSlJq_B80gYzjioEvphBclGELtI88L7divQIqcqvdeBFJPVE3LxGZUH8EG1VuK9rK4veCdQm9Anh-iJax/s1600/blogger-id-number.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger id number" border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllLeUh4iFM_TsbVqiZBykvB2BWFnLvhpoQNK6tzQJAOJG7AFGMSu01C7rHRSuSlJq_B80gYzjioEvphBclGELtI88L7divQIqcqvdeBFJPVE3LxGZUH8EG1VuK9rK4veCdQm9Anh-iJax/s1600/blogger-id-number.png" title="how to add an admin control panel in blogger" width="640" /></a></div>
 
Within the URL you will notice a string like this: 
<blockquote class="tr_bq">
blogID=XXXXXXXXX</blockquote>
Where XXXXXXXXX is the unique identifier (ID) for your blog. 
 
Copy the ID for the blog you wish to work with so we can add this in the links for your admin control panel. 
 
<h3>
Adding the admin control panel to Blogger template</h3>
 
The Admin Control Panel will only be visible when the blog author is logged in. It is invisible to blog readers, similar to the Edit post/widget pencil icons which are only visible to you while you are logged in. 
 
To add the control panel to your Blogger template, follow the steps below: 
 
Step 1. Go to Template and click on the Edit HTML button: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Admin Comtrol Panel" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="Admin Comtrol Panel" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Search" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" title="Blogger Search" width="320" /></a></div>
 
Step 3. Paste this line inside the search box then hit Enter to find it: 
<blockquote class="tr_bq">
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>
Note: if you can't find this line, try to find the <body> tag. 
 
Step 4. Just below this line, add the following code: 
<blockquote class="tr_bq">
 
<style> 
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; } 
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;} 
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;} 
.control-panel a:hover {text-decoration:none; color:#FC8F44;} 
</style> 
<div class='control-panel'> 
<ul> 
<li><a href='http://www.blogger.com/home'>My Blogs</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'>New Post</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page'>New Page</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'>All Posts</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'>Comments</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'>Layout</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>Edit HTML</a></li> 
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li> 
<li><a href='/' target='_blank'>New Tab</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li> 
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li> 
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li> 
</ul> 
</div> 
</blockquote>
Change XXXXXXXXXXXXX with your unique Blog ID previously copied, and be careful not to delete anything, like quote or any other character. 
 
Step 4. Click on the Save template button to save the changes. 
 
Now take a look at your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy! 
<div>
 
With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.</div>
</div>

how to menus Navigation navigation menu Widgets How to Add an Admin Control Panel in Blogger

A while ago I've posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only...

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tts64j_RThVVshZNP56NqgB9niPJ6UL3Iz-dxVZ28GCS3cPo1JyqtcL5s7uC9zt_QRYDIriZdmTjMbmeTE8THIv92Y43IpYvA63PIt1cdIpNnmsHRj5IsfsgFxmADBCWjFUE37tEI4lc/s1600/add-a-menu-with-sub-tabs-in-two-columns-to-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger navigation menu, css menu, drop-down menu" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tts64j_RThVVshZNP56NqgB9niPJ6UL3Iz-dxVZ28GCS3cPo1JyqtcL5s7uC9zt_QRYDIriZdmTjMbmeTE8THIv92Y43IpYvA63PIt1cdIpNnmsHRj5IsfsgFxmADBCWjFUE37tEI4lc/s1600/add-a-menu-with-sub-tabs-in-two-columns-to-blogger-blogspot.png" title="Navigation Menu with Sub-tabs in Two Columns for Blogger" width="320" /></a></div>The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here: <style type="text/css">#menucol { width:700px; height:37px; background-image: -moz-linear-gradient(top, #666666, #000000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000); border-bottom:1px solid #666666; border-top:1px solid #666666; margin:0 auto;padding:0 auto; overflow:hidden; } #topwrapper { width:940px; height:40px; margin:0 auto; padding:0 auto; } .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } #top { width:100%; } #top, #top ul { padding: 0; margin: 0; list-style: none; } #top a { border-right:1px solid #333333; text-align:left; display: block; text-decoration: none; padding:10px 12px 11px; font:bold 14px Arial; text-transform:none; color:#eee; } #top a:hover { background:#000000; color:#F6F6F6; } #top a.submenucol { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlq0qFIaE7-o4MzCJeEog3-1l8HSxCiTeQC_TWom7gaBV9pjO11lzxNueaYxJgKEWwp8KPH9AzcbTa1SMwOQd3s2BbnnhJhenD99zpX9xJyK_0pZetzZLMMnfFCZ4CuGri1N576qiEaX8/s1600/arrow_white.gif); background-repeat: no-repeat; padding: 10px 24px 11px 12px; background-position: right center; } #top li { float: left; position: relative; } #top li { position: static !important; width: auto; } #top li ul, #top ul li { width:300px; } #top ul li a { text-align:left; padding: 6px 15px; font-size:13px; font-weight:normal; text-transform:none; font-family:Arial, sans-serif; border:none; } #top li ul { z-index:100; position: absolute; display: none; background-color:#F1F1F1; margin-left:-80px; padding:10px 0; border-radius: 0px 0px 6px 6px; box-shadow:0 2px 2px rgba(0,0,0,0.6); filter:alpha(opacity=87); opacity:.87; } #top li ul li { width:150px; float:left; margin:0; padding:0; } #top li:hover ul, #top li.hvr ul { display: block; } #top li:hover ul a, #top li.hvr ul a { color:#333; background-color:transparent; text-decoration:none; } #top ul a:hover { text-decoration:underline!important; color:#444444 !important; } </style> <div id="menucol"><div id="topwrapper"><ul id="top"><li><a href="http://YOUR URL HERE.com">Tab 1 Title Here</a></li><li><a href="http://YOUR URL HERE.com">Tab 2 Title Here</a></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 3 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 3.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.6</a></li></ul></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 4 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 4.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.6</a></li></ul></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 5 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 5.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.6</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.7</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.8</a></li></ul></li><li><a href="http://YOUR URL HERE.com">Tab 6 Title Here</a></li></ul> </div></div> <h2>Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger</h2>STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section. <ul><li>Click on the "Add a Gadget" link just under your header image</li><li>From the Gadget's List, select "HTML/JavaScript" option.</li></ul>STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank. <blockquote class="tr_bq"><div id='menucol'> <div id='topwrapper'> <ul id='top'> <li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li> <li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li> <li><a class='submenucol' href='#'>Tab 3 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li> </ul> </li> <li><a class='submenucol' href='#'>Tab 4 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li> </ul> </li> <li><a class='submenucol' href='#'>Tab 5 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li> </ul> </li> <li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li> </ul> </div> </div> </blockquote>Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want: <blockquote class="tr_bq"><li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li> </ul> </li> </blockquote>STEP 3: Now let's go a step further and add the CSS style in our Template <ul><li>Go to Template > Edit HTML</li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></a></div><ul><li>Click on the sideways arrow next to <b:skin>...</b:skin> </li></ul> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-777bvXfRXczNeichwahnqI5fKlkD0VUw45BgF84YZON83C0TdIAz-vC-rULiP6LRbJxxjke-2BPCBIfnNc-ZqbLfEuygyPpVDeNRY5yOAaaHBMbdjqwFJebH_a-AkGvjfWyj_v-BNA1F/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-777bvXfRXczNeichwahnqI5fKlkD0VUw45BgF84YZON83C0TdIAz-vC-rULiP6LRbJxxjke-2BPCBIfnNc-ZqbLfEuygyPpVDeNRY5yOAaaHBMbdjqwFJebH_a-AkGvjfWyj_v-BNA1F/s1600/blogger-template-editor-css-styles.png" width="320" /></a></div><ul><li>Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:</li></ul><blockquote class="tr_bq">/* Horizontal menu with 2 columns ----------------------------------------------- */ #menucol { width:940px; height:37px; background-image: -moz-linear-gradient(top, #666666, #000000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000); border-bottom:1px solid #666666; border-top:1px solid #666666; margin:0 auto;padding:0 auto; overflow:hidden; } #topwrapper { width:940px; height:40px; margin:0 auto; padding:0 auto; } .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } #top { width:100%; } #top, #top ul { padding: 0; margin: 0; list-style: none; } #top a { border-right:1px solid #333333; text-align:left; display: block; text-decoration: none; padding:10px 12px 11px; font:bold 14px Arial; text-transform:none; color:#eee; } #top a:hover { background:#000000; color:#F6F6F6; } #top a.submenucol { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlq0qFIaE7-o4MzCJeEog3-1l8HSxCiTeQC_TWom7gaBV9pjO11lzxNueaYxJgKEWwp8KPH9AzcbTa1SMwOQd3s2BbnnhJhenD99zpX9xJyK_0pZetzZLMMnfFCZ4CuGri1N576qiEaX8/s1600/arrow_white.gif); background-repeat: no-repeat; padding: 10px 24px 11px 12px; background-position: right center; } #top li { float: left; position: relative; } #top li { position: static !important; width: auto; } #top li ul, #top ul li { width:300px; } #top ul li a { text-align:left; padding: 6px 15px; font-size:13px; font-weight:normal; text-transform:none; font-family:Arial, sans-serif; border:none; } #top li ul { z-index:100; position: absolute; display: none; background-color:#F1F1F1; margin-left:-80px; padding:10px 0; border-radius: 0px 0px 6px 6px; box-shadow:0 2px 2px rgba(0,0,0,0.6); filter:alpha(opacity=87); opacity:.87; } #top li ul li { width:150px; float:left; margin:0; padding:0; } #top li:hover ul, #top li.hvr ul { display: block; } #top li:hover ul a, #top li.hvr ul a { color:#333; background-color:transparent; text-decoration:none; } #top ul a:hover { text-decoration:underline!important; color:#444444 !important; }</blockquote><ul><li>Now find (CTRL + F) this line:</li></ul><blockquote class="tr_bq">/* Tabs</blockquote><ul><li>It will also have some little lines beneath:</li></ul><blockquote class="tr_bq">/* Tabs ----------------------------------------------- */</blockquote><ul><li>And just below these little lines, delete the code below until you reach at:</li></ul><blockquote class="tr_bq">/* Columns ----------------------------------------------- */</blockquote><ul><li>Instead of the code that you have removed, add this one:</li></ul><blockquote class="tr_bq">#crosscol ul {z-index: 200; padding:0 !important;} #crosscol li:hover {position:relative;} #crosscol ul li {padding:0 !important;} .tabs-outer {z-index:1;} .tabs-inner {padding: 0 0px;}</blockquote><div style="text-align: center;">See this screenshot for more info:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwp3p5OB_6h9McVsYY1zfukKnTwUygzYrCNE72TWjw4LK4Kb3Xmxi3GjdBK6OjrYjE3x1OtaknQWVCLWo_DR7kJa6XYIBW85aWJTLJi0G77PoyAMczavyZayHgIjOzrj629G9PwCl7bw3a/s1600/menu-with-sub-tabs-in-two-columns-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="menu for blogger, blogger gadgets, blogger widgets" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwp3p5OB_6h9McVsYY1zfukKnTwUygzYrCNE72TWjw4LK4Kb3Xmxi3GjdBK6OjrYjE3x1OtaknQWVCLWo_DR7kJa6XYIBW85aWJTLJi0G77PoyAMczavyZayHgIjOzrj629G9PwCl7bw3a/s1600/menu-with-sub-tabs-in-two-columns-for-blogger.png" title="How to Add a Beautiful Horizontal Navigation Menu To Blogger" width="400" /></a></div>STEP 4: The final step is to Save the Template and you are done! Visit your blog to see a beautiful navigation menu just below header. If you have any questions or need help, leave a comment below.

Blog Design css menus navigation menu Widgets Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts. The ...

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is handy for those who do not require complex menus or prefer not to use one that requires scripts and/or too many images, also the installation and customization is quite simple, and to top it off is quite functional. To see this drop down menu in action, visit this <a href="http://helploggermenu.blogspot.com/" style="color: #0000ee;">demo blog</a> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTjEE4itjdQbTDXQ7ICUMAy1Xq-i4BYGGaODvnxFhqvwH4LvyZIhrhzAD84jrxXzO2DJkUTT7xCjmb0b1N2OvDjjbXC1si8veY1bLDnV3X7udHkTitgUgqq-nOb3FiLcuf9p9mntyWb9-/s1600/horizontal-drop-down-menu-with-search-bar-for-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger menu, drop down menu, css menu" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTjEE4itjdQbTDXQ7ICUMAy1Xq-i4BYGGaODvnxFhqvwH4LvyZIhrhzAD84jrxXzO2DJkUTT7xCjmb0b1N2OvDjjbXC1si8veY1bLDnV3X7udHkTitgUgqq-nOb3FiLcuf9p9mntyWb9-/s1600/horizontal-drop-down-menu-with-search-bar-for-blogger-blogspot.png" title="Horizontal drop down menu for Blogger" width="640" /></a></div> Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly: <div class="separator" style="clear: both; text-align: center;"></div>From your <a href="https://www.blogger.com/home">Blogger's Dashboard</a>, go to Template (<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxUW-H6Ghs2DP7VF-dPeXMpV2qChnjFoonrZEJYBz_rrj3wehCLduEF_AeYpAzbLHe4ebfEvle1Ji1oSvCBPEbTBfxEZFakwx4ObUlIq00xYovPRYVwf_t5hbpkRe73ZrSkmf4kXTdwLw5/s1600/how-to-backup-blogger-template.png">make a backup</a> < see the screenshot) > Edit HTML: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s1600/blogger-template-edit-html.png" width="320" /></a></div> and search (CTRL + F) for the following line: <blockquote class="tr_bq"><b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'></blockquote> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPysmmgLGukyHVX_xcSonvTXqSx2znM1PjhwI0eGz5MjJc4udH-QnX4ajssUdMupeoUlCdzavN6BOz6l6QWWN5AvNc3TK_iIYdMPF06m5CYbPWNqWJUr1cfxEL2cdmV5ESzhbkT39t3wh/s1600/horizontal-drop-down-menu-for-blogger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPysmmgLGukyHVX_xcSonvTXqSx2znM1PjhwI0eGz5MjJc4udH-QnX4ajssUdMupeoUlCdzavN6BOz6l6QWWN5AvNc3TK_iIYdMPF06m5CYbPWNqWJUr1cfxEL2cdmV5ESzhbkT39t3wh/s1600/horizontal-drop-down-menu-for-blogger.png" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table> Remove the code in red. You may have many parts as the one in red, delete all you find. ....then find this section in your template: <blockquote class="tr_bq">/* Tabs ----------------------------------------------- */</blockquote> ...and remove all that is within it, until you reach to the Headings part. <blockquote class="tr_bq">/* Tabs ----------------------------------------------- */ .tabs-outer { overflow: hidden; position: relative; background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0; } #layout .tabs-outer { overflow: visible; } .tabs-cap-top, .tabs-cap-bottom { position: absolute; width: 100%; border-top: 1px solid $(tabs.border.color); } .tabs-cap-bottom { bottom: 0; } .tabs-inner .widget li a { display: inline-block; margin: 0; padding: .6em 1.5em; font: $(tabs.font); color: $(tabs.text.color); border-top: 1px solid $(tabs.border.color); border-bottom: 1px solid $(tabs.border.color); border-$startSide: 1px solid $(tabs.border.color); } .tabs-inner .widget li:last-child a { border-$endSide: 1px solid $(tabs.border.color); } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px; color: $(tabs.selected.text.color); } /* Headings ----------------------------------------------- */ </blockquote> Then add this to where the code has been removed (instead of the code in green): <blockquote class="tr_bq">#crosscol ul {z-index: 200; padding:0 !important;} #crosscol li:hover {position:relative;} #crosscol ul li {padding:0 !important;} .tabs-outer {z-index:1;} .tabs .widget ul, .tabs .widget ul {overflow: visible;}</blockquote>Having done this, we can finally add our menu. How To Add Horizontal Drop Down Menu to Blogger To put this horizontal menu with submenus in your blog, then follow the next steps: Step 1. From Template, go to Edit HTML and just above ]]></b:skin> paste these styles: <blockquote class="tr_bq">/* Horizontal drop down menu ----------------------------------------------- */ #menuWrapper { width:100%; /* Menu width */ height:35px; padding-left:14px; background:#333; /* Background color */ border-radius: 10px;  } .menu { padding:0; margin:0; list-style:none; height:35px; position:relative; z-index:5; font-family:arial, verdana, sans-serif; } .menu li:hover li a { background:none; } .menu li.top {display:block; float:left;} .menu li a.top_link { display:block; float:left; height:35px; line-height:34px; color:#ccc; text-decoration:none; font-family:"Verdana", sans-serif; font-size:12px; /* Font size */ font-weight:bold; padding:0 0 0 12px; cursor:pointer; } .menu li a.top_link span { float:left; display:block; padding:0 24px 0 12px; height:35px; } .menu li a.top_link span.down { float:left; display:block; padding:0 24px 0 12px; height:35px; } .menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; } .menu li:hover {position:relative; z-index:2;} .menu ul, .menu li:hover ul ul, .menu li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu li:hover ul.sub { left:0; top:35px; background:#333; /* Submenu background color */ padding:3px; white-space:nowrap; width:200px; height:auto; z-index:3; } .menu li:hover ul.sub li { display:block; height:30px; position:relative; float:left; width:200px; font-weight:normal; } .menu li:hover ul.sub li a{ display:block; height:30px; width:200px; line-height:30px; text-indent:5px; color:#ccc; text-decoration:none; } .menu li ul.sub li a.fly { /* Submenu Background Color */ background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFB8YjzKTHOOmXBkgRcxWyDlOf4hiQfCpAJJF8S7Aj7GrV4xaRvOCxqP4zIao2l7bpxgqSZ2un8NcQ5igpHzIF8VUYybYdH7ZsZpqr0kH_W5ISyKQVk5l63fznRes-2k7Jv0-ksISx9bE/s1600/arrow_over.gif) 185px 10px no-repeat;} .menu li:hover ul.sub li a:hover { background:#515151; /* Background Color on mouseover */ color:#fff; } .menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly { /* Background on Mouseover */ background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFB8YjzKTHOOmXBkgRcxWyDlOf4hiQfCpAJJF8S7Aj7GrV4xaRvOCxqP4zIao2l7bpxgqSZ2un8NcQ5igpHzIF8VUYybYdH7ZsZpqr0kH_W5ISyKQVk5l63fznRes-2k7Jv0-ksISx9bE/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;} .menu li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul { left:200px; top:-4px; background: #333; /* Background Color of the Submenu */ padding:3px; white-space:nowrap; width:200px; z-index:4; height:auto; } #search { width: 228px; /* Width of the Search Box */ height: 50px; float: right; z-index: 2; text-align: center; margin-top: 5px; margin-right: 6px; /* Background of the Search Box */ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7Jxi3pbbfRKd4qDKrTjHMLinvIx1YIcuJcqKH7CkZft8BylGeRwlzzcOYdFJ_Yx-VpBi5GJp8LzjUvVC5DUeUw8sS0YZhoNg-e6IEJQqE8ur6X_5F1lxtSjTWDit0cfaqB3tdq6W0tA/s1600/searchBar1.png) no-repeat; } #search-box { margin-top: 3px; border:0px; background: transparent; text-align:center; }</blockquote> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4v-qEP8mK3nfm5S_Isqdu7Ka6da_UB-LJyevSkszasI4-jhhEEM1WlNBYKjSUtxUXJHmWAZ7uZXWpe6PJtSgW4P8vbkH8UQioS75uPUOGHNiWq7AjNrjISvcLQB2W80okw__uwhhGDWC_/s1600/blogger-b-skin-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4v-qEP8mK3nfm5S_Isqdu7Ka6da_UB-LJyevSkszasI4-jhhEEM1WlNBYKjSUtxUXJHmWAZ7uZXWpe6PJtSgW4P8vbkH8UQioS75uPUOGHNiWq7AjNrjISvcLQB2W80okw__uwhhGDWC_/s1600/blogger-b-skin-template-edit-html.png" width="320" /></a></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXf7FvHvFRETVH-0H0RZJ3rj_uUebBUIphRUnPGpvEddyr3det4RPeDi_Ii1RFkdDfktRtJWg_it2fCxhAdV7wBr-Qx-wkMwV5BBRiJtzxZSSbNYOf6i9PvDxIt_O_PtVCvZ-Xnkv_Qbo/s1600/add-horizontal-drop-down-menu-to-blogger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXf7FvHvFRETVH-0H0RZJ3rj_uUebBUIphRUnPGpvEddyr3det4RPeDi_Ii1RFkdDfktRtJWg_it2fCxhAdV7wBr-Qx-wkMwV5BBRiJtzxZSSbNYOf6i9PvDxIt_O_PtVCvZ-Xnkv_Qbo/s1600/add-horizontal-drop-down-menu-to-blogger.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table>Step 2. Save the Template <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx4rxc2feCMDM3KHsA3h6e27_uiasEWtVAgu7bx7Ulif1QebBTquGoF9nnGpD_zOdCNgKJM70C1QKiqB7ng0hlilu8KDqSeflXszrQel4d4qm9Ie9o0Q7ubTcgo1AtFcxe62a_tfTFNegx/s1600/save-template-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx4rxc2feCMDM3KHsA3h6e27_uiasEWtVAgu7bx7Ulif1QebBTquGoF9nnGpD_zOdCNgKJM70C1QKiqB7ng0hlilu8KDqSeflXszrQel4d4qm9Ie9o0Q7ubTcgo1AtFcxe62a_tfTFNegx/s1600/save-template-blogger.png" /></a></div> Step 3. Go to Layout > click on Add a Gadget link <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s1600/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div> Step 4. Choose HTML/Javascript and paste the following inside the empty box: <blockquote class="tr_bq"><div id='menuWrapper'> <ul class='menu'> <li class='top'><a class='top_link' href='Link URL'>Title 1</a></li> <li class='top'><a class='top_link' href='Link URL'>Title 2</a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul> <li><a href='Link URL'>Submenu 2.1.1</a></li> <li><a href='Link URL'>Submenu 2.1.2</a></li> <li><a href='Link URL'>Submenu 2.1.3</a></li> </ul> </li> <li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a> <ul> <li><a href='Link URL'>Submenu 2.2.1</a></li> <li><a href='Link URL'>Submenu 2.2.2</a></li> <li><a href='Link URL'>Submenu 2.2.3</a></li> <li><a class='fly' href='Link URL'>Submenu 2.2.4</a> <ul> <li><a href='Link URL'>Submenu 2.2.4.1</a></li> <li><a href='Link URL'>Submenu 2.2.4.2</a></li> <li><a href='Link URL'>Submenu 2.2.4.3</a></li> </ul> </li> <li><a href='Link URL'>Submenu 2.2.5</a></li> <li><a class='fly' href='Link URL'>Submenu 2.2.6</a> <ul> <li><a href='Link URL'>Submenu 2.2.6.1</a></li> <li><a href='Link URL'>Submenu 2.2.6.2</a></li> </ul> </li> </ul> </li> <li><a href='Link URL'>Submenu 2.3</a></li> <li><a href='Link URL'>Submenu 2.4</a></li> <li><a href='Link URL'>Submenu 2.5</a></li> </ul> </li> <li class='top'><a class='top_link' href='Link URL'>Title 3</a> <ul class='sub'> <li><a href='Link URL'>Submenu 3.1</a></li> <li><a href='Link URL'>Submenu 3.2</a></li> <li><a href='Link URL'>Submenu 3.3</a></li> <li><a href='Link URL'>Submenu 3.4</a></li> </ul> </li> <li class='top'><a class='top_link' href='Link URL'>Title 4</a> <ul class='sub'> <li><a href='Link URL'>Submenu 4.1</a></li> <li><a class='fly' href='Link URL'>Submenu 4.2</a> <ul> <li><a href='Link URL'>Submenu 4.2.1</a></li> <li><a href='Link URL'>Submenu 4.2.2</a></li> <li><a href='Link URL'>Submenu 4.2.3</a></li> <li><a href='Link URL'>Submenu 4.2.4</a></li> <li><a href='Link URL'>Submenu 4.2.5</a></li> <li><a href='Link URL'>Submenu 4.2.6</a></li> </ul> </li> <li><a href='Link URL'>Submenu 4.3</a></li> <li><a href='Link URL'>Submenu 4.4</a></li> <li><a href='Link URL'>Submenu 4.5</a></li> <li><a href='Link URL'>Submenu 4.6</a></li> </ul> </li> <li class='top'><a class='top_link' href='Link URL'>Title 5</a> <ul class='sub'> <li><a href='Link URL'>Submenu 5.1</a></li> <li><a href='Link URL'>Submenu 5.2</a></li> <li><a href='Link URL'>Submenu 5.3</a></li> </ul> </li>  <li> <form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> <input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form> </li> </ul> </div></blockquote> Customization: - replace the text in blue and red with your links and titles. - if you need more tabs, then add a line like this just above  <blockquote class="tr_bq"><li class="top"><a href="Link URL" class="top_link">Title</a></li></blockquote> - if you want to add a tab with sub-tabs, then add this code: <blockquote class="tr_bq"><li class="top"><a href="Link URL" class="top_link">Title</a> <ul class="sub"> <li><a href="Link URL">Submenu Title</a></li> <li><a href="Link URL">Submenu Title</a></li> <li><a href="Link URL">Submenu Title</a></li> </ul> </li></blockquote> - and if you want one of the other sub-tabs have sub-tabs then remove a line like the one in orange and change it to a code like this: <blockquote class="tr_bq"><li><a href="Link URL" class="fly">Submenu Title</a> <ul> <li><a href="Link URL">Other Submenu</a></li> <li><a href="Link URL">Other Submenu</a></li> <li><a href="Link URL">Other Submenu</a></li> </ul> </li></blockquote> And that's it! Now Save your Widget and enjoy your new drop down menu! ;)

Blog Design css menus navigation menu Widgets Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is ha...