Blogger Buzz: menus

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...

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing menu that is hidden and expands when the user clicks on it. 
 
Originally, this plugin called Sliding Login Panel was created so that users could register on the site, but as we know, in Blogger we don't have the option to add a user registration, however, that doesn't mean that we can't take advantage of this plugin and use it to add other elements, such as a menu, search box, social icons, feed subscription etc.  
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVzI2MRKkKL2FP7pwPXs14LeRh-ZSj0pKH_mRR7Ulqx-ce3IhYwv_Ev2kXtZDPvIpIuTAmY7rnCQZIPIzISZxGJaFC5G8FKislhCoD9r5TZMBron2uUQ4klq5VjjrcpMbcZf2v5oy4Vs7/s1600/jquery-sliding-panel-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Sliding Panel Menu Using JQuery" border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVzI2MRKkKL2FP7pwPXs14LeRh-ZSj0pKH_mRR7Ulqx-ce3IhYwv_Ev2kXtZDPvIpIuTAmY7rnCQZIPIzISZxGJaFC5G8FKislhCoD9r5TZMBron2uUQ4klq5VjjrcpMbcZf2v5oy4Vs7/s1600/jquery-sliding-panel-blogger.png" title="Sliding Panel Menu Using JQuery" width="400" /></a></div>
You can find a demo of this panel in this blog - just click on the Open menu link on the top. 
 
<h3>
Adding the jQuery Expand/Collapse Slider Panel to Blogger</h3>
This sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below the <head> tag: 
 
Step 1. From your Blogger dashboard > 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;"><img alt="blogger template" 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="add a jQuery sliding panel with expanding/collapsing content to Blogger" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and search by pressin the CTRL + F keys for the <head> tag 
 
Step 3. Below the <head> tag, add this script: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
 
$(&quot;#open&quot;).click(function(){ 
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;); 
}); 
 
$(&quot;#close&quot;).click(function(){ 
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;); 
}); 
 
$(&quot;#toggle a&quot;).click(function () { 
$(&quot;#toggle a&quot;).toggle(); 
}); 
 
});</script> 
 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<style> 
body#layout #slide-top-panel {display:none !important;} 
</style> 
</b:if></blockquote>
 
Step 4. Now search (CTRL + F) the </head> tag and add the CSS styles just above it: 
<blockquote class="tr_bq">
<style> 
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
.clearfix {height: 1%;} 
.clearfix {display: block;} 
 
.tab { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-b05NntsFIN1FdHWBTDYfNnISjfXiEz01OxPoRBnwFkRsPxFgprBVwI0jz5PUz10JyMT5_UfOKIaAw7sfiaGcRg9aqKkxzPVQOFtvp5SBMPIwXwb0IvkK8awkcLloMwzLVYzZKebtsxm4/s1600/sliding-panel-tab-0.png) repeat-x 0 0; 
height: 42px; 
position: relative; 
top: 0; 
z-index: 999; 
} 
.tab ul.login { 
display: block; 
position: relative; 
float: right; 
clear: right; 
height: 42px; 
width: auto; 
font-weight: bold; 
line-height: 42px; 
margin: 0; 
right: 150px; 
color: white; 
font-size: 80%; 
text-align: center; 
} 
.tab ul.login li.left { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxwMJQGeAreiEBWh1ylSOz0g7IthlmCahm_JBE2vOADK11nM9gDUimBxMYt3AWqmLOI-8_NVt_GtqyY-PbG0zsnafVoMCAqUqespN1Imqx7Uw6w3sRY5HfwachHKBx3jGHW6_6woJkIXp/s1600/sliding-panel-tab-left.png) no-repeat left 0; 
height: 42px; 
width: 30px; 
padding: 0; 
margin: 0; 
display: block; 
float: left; 
} 
.tab ul.login li.right { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkUS66S4fKBS59M9LYkt4rc7a5BFEgG9SYrEsJUb-dn9l19mGS9qxR4aodZQ5kpEk5q92zKv_ZXwkzDcZsycndMv5XPn96ccpdLvmbe28RlJX-juDAcEvS92JHWTFOYHynwDk_hlInZtn/s1600/sliding-panel-tab-right.png) no-repeat left 0; 
height: 42px; 
width: 30px; 
padding: 0; 
margin: 0; 
display: block; 
float: left; 
} 
.tab ul.login li { 
text-align: left; 
padding: 0 6px; 
display: block; 
float: left; 
height: 42px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPrUBiCahx_ypqksz7wQoN0poJBOa9WsT-9TymNWVI0r6GW7BAywQAIKMWqyfcdjBk8AMAJq-yalldI21EzmdDMcNRAM4fh_FVbh6yOA5ux6Qfu8BvyTE8nSzT8kkwF16WtK4iTk8oAl0/s1600/sliding-panel-tab.png) repeat-x 0 0; 
} 
 
.tab ul.login li a {color: #15ADFF;} 
.tab ul.login li a:hover {color: #FFFFFF;} 
.tab .sep {color:#414141} 
 
.tab a.open, .tab a.close { 
height: 20px; 
line-height: 20px !important; 
padding-left: 30px !important; 
cursor: pointer; 
display: block; 
width: 100px; 
position: relative; 
top: 11px; 
} 
 
.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8roioylkiuNUdR839v8XcmoxDfwyu32-_jBVAr1hF64ojcI0X50OUlnduPz6DwRfsI19XEC7m8Dyt_r4XhtNgIjaKmiCEMaAw4Sb542s-5acfUSA5q64-LoFWWmx6gWa0KUPtjbAnasr/s1600/button-open.png) no-repeat left 0;} 
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZuJB7H81yhTFHRf1jMAHtSQoV4uli-b7P7BPxnOz5bB1veQ-Ke8ozmiopVPFEIqmuKE0b7CoXlq-Y7DVSoX_8Jt6WP5NgeaT1Z-Wvp1bz8i-CgRi9JLuNWoJX9xCC_ET1UC4q2lNXYCf/s1600/button-close.png) no-repeat left 0;} 
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8roioylkiuNUdR839v8XcmoxDfwyu32-_jBVAr1hF64ojcI0X50OUlnduPz6DwRfsI19XEC7m8Dyt_r4XhtNgIjaKmiCEMaAw4Sb542s-5acfUSA5q64-LoFWWmx6gWa0KUPtjbAnasr/s1600/button-open.png) no-repeat left -19px;} 
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZuJB7H81yhTFHRf1jMAHtSQoV4uli-b7P7BPxnOz5bB1veQ-Ke8ozmiopVPFEIqmuKE0b7CoXlq-Y7DVSoX_8Jt6WP5NgeaT1Z-Wvp1bz8i-CgRi9JLuNWoJX9xCC_ET1UC4q2lNXYCf/s1600/button-close.png) no-repeat left -19px;} 
 
#slide-top-panel { 
position: absolute; 
top: 0; 
width: 100%; 
z-index: 999; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
} 
#panel { 
width: 100%; 
height: 230px; 
color: #999999; 
background: #272727; 
overflow: hidden; 
position: relative; 
z-index: 3; 
display: none; 
} 
#panel h4 { 
font-size: 18px; 
color: #F2F2F2; 
text-align: center; 
padding: 5px 0 10px; 
margin: 0; 
} 
#panel p { 
margin: 5px 0; 
padding: 0px; 
} 
#panel a { 
text-decoration: none; 
color: #15ADFF; 
} 
#panel a:hover { 
color: white; 
} 
#panel .content { 
width: 960px; 
margin: 0 auto; 
padding-top: 15px; 
text-align: left; 
font-size: 0.85em; 
} 
#panel .content .left { 
width: 280px; 
float: left; 
padding: 0 15px; 
border-left: 1px solid #333; 
} 
#panel .content .right { 
border-right: 1px solid #333; 
} 
#panel .content form { 
margin: 0 0 10px 0; 
} 
#panel .content label { 
float: left; 
padding-top: 8px; 
clear: both; 
width: 280px; 
display: block; 
} 
#panel .content input.field { 
border: 1px #1A1A1A solid; 
background: #545454; 
border-radius: 10px; 
margin-right: 5px; 
margin-top: 4px; 
width: 200px; 
color: white; 
height: 18px; 
} 
#panel .content input:focus.field { 
background: #7F7F7F; 
} 
#panel .content input.button-register { 
display: block; 
clear: both; 
height: 24px; 
width: 94px; 
color: white; 
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZqorYdzXobgF4z7lASgnk8JdDcJj0c-zJgFBD7RzDMfQwuSj87irGh04Y7dnI5RJ3O6hyA1G8H5uF3YkP3zhrfcZ3lAPl7yRwvc-0rvlwbgsE07WMfcCBavY2b7hiZ_MDZMC7Tx6MmsA8/s1600/button-register.png) no-repeat 0 0; 
text-align: center; 
cursor: pointer; 
border: none; 
font-weight: bold; 
margin: 10px auto; 
} 
#sliding-panel { 
width: 160px; 
float: left; 
} 
#sliding-panel2 { 
width: 160px; 
float: right; 
} 
#sliding-panel ul, #sliding-panel2 ul{ 
font-family: Arial, Helvetica, sans-serif; 
list-style-type:none; 
margin:0; 
padding:0; 
} 
#sliding-panel ul li a, #sliding-panel2 ul li a { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6lpEwD7y-NA0JUVpR4-9dsL0c5NzrcW0ewQnZ3C48d4BfXYyMAMup2nhUWYht6LcD4oA1qccUw0I60Cbmz8G7xzdZebe7YITSvIhEzRwj9WPQZAz8gdpiOQSRTEJu4VcYSluTTpgMSWh/s1600/star-bullet.png) center left no-repeat; 
margin:0; 
padding:3px 3px 3px 18px; 
} 
#sliding-panel li, #sliding-panel2 li { 
display: inline; 
} 
#sliding-panel a, #sliding-panel2 a{ 
color: #999999; 
text-decoration: none; 
font-size: 11px; 
display: block; 
padding: 3px; 
width: 160px; 
} 
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited { 
color: #999999; 
text-decoration: none; 
} 
#sliding-panel a:hover, #sliding-panel2 a:hover { 
color: #FFFFFF; 
} 
 
#search-box22{ 
margin-top: 20px; 
} 
 
#search-box22 input[type="text"] { 
float: right; 
background: 10px 6px #444; 
border: 0 none; 
font: bold 12px Arial,Helvetica,Sans-serif; 
color: #777; 
width: 160px; 
padding: 6px 15px 6px 35px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 
transition: all 0.7s ease 0s; 
} 
 
#search-box22 input[type="text"]:focus { 
width: 190px; 
} 
 
.about-author { 
width: 100%; 
text-transform: none; 
margin-top: 15px; 
} 
.authorbox { 
overflow: hidden; 
padding: 0; 
width: 100%; 
} 
.authorbox .authorinfo { 
} 
.authorbox .authorinfo img { 
float: left; 
margin: 4px 10px 4px 5px; 
border-radius: 100%; 
width: 20%; 
background: #222; 
padding: 5px; 
} 
.authorbox .authorinfo p { 
margin: 0; 
padding: 0 5px; 
text-align: left; 
} 
.authorinfo p a { 
text-decoration:none; 
} 
.authorbox h3 { 
margin: 0; 
display: inline-block; 
} 
h3.boxtitle { 
font-size: 14px; 
} 
</style></blockquote>
Note: 
- in case you need more space for your widgets, the height of the entire container can be changed by modifying the 230px value from height: 230px; 
- To change the background color, change this color value: #272727 
 
Step 5. And finally, we will place the HTML structure of it - right after the <body> tag, add this code: 
<blockquote class="tr_bq">
 
<div id='slide-top-panel'> 
<div id='panel'> 
<div class='content clearfix'> 
 
 
<div class='left' style='width:240px !important'> 
 
<h4>Welcome to my blog!</h4> 
<div class='about-author'> 
<div class='authorbox'> 
  <div class='authorinfo'> 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTl6nOLTkjg_0xC7gxHIY8-X4zlBWX6F5KGTS6Ra5TnYVgtAV-Yp5ABioPs2MAR-OjytXIG7BfCb6wegm3N4eQYuhDtVmPtFmeC6BnaI7VjIDy0O04UlBkln3nEWEkUOjplgrF7WA-SG-g/s1600/profile-pic.png'/> 
<h3 class='boxtitle'>Meet the Author</h3> 
Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti. 
</div> 
</div> 
</div> 
Looking for something? 
<form method="get" action="/search" id="search-box22"> 
  <input name="q" type="text" size="40" placeholder="Search..." /> 
</form> 
 
</div> 
 
 
<div class='left' style='width:320px !important'> 
<h4>Categories</h4> 
 
<div id='sliding-panel'> 
<ul> 
<li><a href='Link URL'>Category 1</a></li> 
<li><a href='Link URL'>Category 2</a></li> 
<li><a href='Link URL'>Category 3</a></li> 
<li><a href='Link URL'>Category 4</a></li> 
<li><a href='Link URL'>Category 5</a></li> 
<li><a href='Link URL'>Category 6</a></li> 
<li><a href='Link URL'>Category 7</a></li> 
</ul> 
</div> 
 
<div id='sliding-panel2'> 
<ul> 
<li><a href='Link URL'>Category 1</a></li> 
<li><a href='Link URL'>Category 2</a></li> 
<li><a href='Link URL'>Category 3</a></li> 
<li><a href='Link URL'>Category 4</a></li> 
<li><a href='Link URL'>Category 5</a></li> 
<li><a href='Link URL'>Category 6</a></li> 
<li><a href='Link URL'>Category 7</a></li> 
</ul> 
</div> 
</div> 
 
 
<div class='left right' align="center"> 
 
<h4>Subscribe to this blog!</h4> 
Receive the latest posts by email. Just enter your email below if you want to subscribe! 
 
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'> 
<input class='field' name='email' type='text/' value=''/> 
<input name='uri' type='hidden' value='Feed-Name'/> 
<input name='lang' type='hidden' value='en_EN'/> 
<input class='button-register' type='submit' value='Subscribe'/></form> 
 
<div align='center' style="clear: both;"> 
<a href='http://www.facebook.com/username'><img title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9P6-xKIH_jZnfREWHuQysH1yvQrtqB2wB3_fp49l9q9x9LwsD91Lx44ZcI4feQBKFOK5rkyAZH9vwUD7SdrXul0-RvPxuNf_ydLT5vC3tc2mO4tRijGVZp-B7o1EigvNu9fzqKWNdpFze/s1600/Facebook.png' style='padding:5px;' width='32'/></a> 
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxhFlhT_MakFkszr7Vz7Tj6Z7sMSkGOiUXZacQyQ2iXqrRKU0hJpXWSr4bA_ta8eoZm3XR9cWht0tJojw7vhWQxpB3aXV6UWlM9xNeNc5oo-MTAsmFjdZjVw40wfcdkgpjBnX4DPiGuzR/s1600/RSS.png' style='padding:5px;' width='32'/></a> 
<a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtwHFZBBfSznHearVciTF5wmThGOSP94usFH2uUlRjgYn_RVOZMYDZa268wYVyjGzR6-w_17OxLJLa3MMCs9pE2zSKR_UzjLApF1nTVK3HsB4sAPu5X1N7l0E70frvgEa7i4fMsUOxjto/s1600/Google-plus.png' style='padding:5px;' width='32'/></a> 
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxUFAEGH_QeLSaI6SfaK_YWwOMdJR13mZGS4yq8Y54a6dADmZOWDhKsCw2-W97TlFR6LpYzm4YXpiWVZeyM8WdFW_7sAKHLYR13uROfLE79QVvXMftLq4At3p9Kkt9Ig3NDlP3ZJNIymm/s1600/Twitter.png' style='padding:5px;' width='32'/></a> 
</div> 
 
</div> 
</div> 
</div> 
 
<div class='tab'> 
<ul class='login'> 
<li class='left'/> 
<li>Hello guest!</li> 
<li class='sep'>|</li> 
<li id='toggle'> 
<a class='open' href='#' id='open'>Open menu</a> 
<a class='close' href='#' id='close' style='display: none;'>Close menu</a> 
</li> 
<li class='right'/> 
</ul> 
</div> 
</div></blockquote>
Note: if you can't find the <body> tag, then try to find this one: 
<blockquote class="tr_bq">
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>
Here we have added the content in the sliding panel which will be hidden and will show on mouse click. In green are the names of each section so to make it easier to recognize them. 
 
Note: 
- In the first section, you can change the welcome message, "Meet the author" title and add your description by replacing the text in bold. To add your own picture, replace this URL: 
<blockquote class="tr_bq">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTl6nOLTkjg_0xC7gxHIY8-X4zlBWX6F5KGTS6Ra5TnYVgtAV-Yp5ABioPs2MAR-OjytXIG7BfCb6wegm3N4eQYuhDtVmPtFmeC6BnaI7VjIDy0O04UlBkln3nEWEkUOjplgrF7WA-SG-g/s1600/profile-pic.png</blockquote>
- In the second section you have the categories - there add the URLs of your links by replacing the addresses in blue and replace Category 1, 2, 3... with the titles that you want to appear for the links. 
- In the third section is the email subscription - you must have enabled this option in your Feedburner account - just replace the text in blue with the name of your blog's feed. As for the social icons below, change the URLs in blue with your Facebook and Twitte and add the URL of your blog's RSS feed address. 
 
Basically, those are the main sections that can be customized, though, we can take some parts and paste something else instead. 
 
Step 6. Save the template and that's it! Note that this menu works with jQuery, so if you are already using Scriptaculous, Prototype or Mootools, then it will not work. 
 
I hope you'll enjoy this elegant menu with sliding effect, which will look way better if we <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>.</div>

jQuery menus social media Widgets jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. ...

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...

Vertical drop down menu with jQuery

jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and in addition, he can browse through the tabs in a very peculiar manner that comes with a sliding effect giving a sexy touch. One of the advantages is that it can store a large number of links and can be removed anytime if we want. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bBFhYMCmLQl6vrbfz5ieQR7D48hx7FBofWPElGIfxScVtlzHEEcb5h7RE9k-wApOuNRe4vtguE9LdHJKvnge118T5XINP8EX1qT4FtQDdMSG7B9HFI85lCgfFggMIbb6exbROEz1y5_a/s1600/vertical-drop-down-menu-with-jquery-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="vertical menu, menu for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bBFhYMCmLQl6vrbfz5ieQR7D48hx7FBofWPElGIfxScVtlzHEEcb5h7RE9k-wApOuNRe4vtguE9LdHJKvnge118T5XINP8EX1qT4FtQDdMSG7B9HFI85lCgfFggMIbb6exbROEz1y5_a/s1600/vertical-drop-down-menu-with-jquery-for-blogger.png" title="vertical drop down menu with jQuery" /></a></div> To understand this menu better and to see it in action, visit this <a href="http://helploggerdemo.blogspot.com/">demo blog</a>. There we can drag the menu, navigate through its tabs or close. To add this vertical menu on your blog, just follow these steps: 1) From your Blogger dashboard, go to Template > Edit HTML and before the </head> tag, add these scripts: <blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/> <script src='http://helplogger.googlecode.com/svn/trunk/jQuery.jGlideMenu.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $('#jGlide_001').jGlideMenu({ tileSource : '.jGlide_001_tiles' , demoMode : false }).show(); $('#switch').click(function(){$(this).jGlideMenuToggle();}); }); //]]> </script></blockquote>2) Now paste before ]]></b:skin> these styles: <blockquote class="tr_bq">.jGM_box { position: absolute; /* Change absolute with fixed if you want it to float */ top: 50px; /* Distance from above */ right: 760px; /* Distance from right */ width: 227px; height: 317px; background: #fff; /* Background color */ margin: 0; padding: 0; border: 1px solid #ccc; /* Border */ overflow: hidden; } .jGM_header { position: absolute; top: 0; left: 0; height: 18px; width: 227px; background: #d1d1d1; /* Background color for the up bar */ color: #fff; text-align: right; vertical-align: middle; line-height: 18px; cursor: move; } .jGM_header a { margin-right: 12px; text-decoration: none; color: #000 !important; cursor: pointer; } .jGM_wrapper { position: absolute; top: 19px; left: 0; width: 2270px; height: 288px; margin: 0; padding: 0; border: 0; } .jGM_tile { position: absolute; top: 0; left: 7px; width: 213px; height: auto; overflow: hidden; margin: 0; padding: 0; border: 0; display: block; } .jGM_cats { width: 100%; height: 64px; overflow: hidden; vertical-align: middle; text-align: left; } .jGM_cats h4 { font-family: Verdana,Arial,serif; font-size: 1.8em; margin: 0; padding: 2px 0; line-height: 1.8em; color: #414141; font-weight: normal; } .jGM_cats p { font-family: Verdana,tahoma,arial; font-size: 1em; /* Font size of the description */ margin: 0; padding: 0; line-height: 1.2em; color: #858585; /* Description color */ font-weight: normal; } .jGM_pager { height: 18px; width: 213px; line-height: 18px; margin: 0; border: 0; padding: 0; background: #f6f6f6; text-align: center; vertical-align: middle; } .jGM_pager a { text-decoration: none; font-weight: bold; text-decoration: none; display: block; } .jGM_pager a:hover { background: #d1d1d1; } .jGM_pager img { border: 0; margin: 6px 0; } .jGM_content { width: 213px; height: 150px; margin: 1px 0; padding: 0; border: 0; overflow: hidden; } .jGM_content a { font-family: Tahoma,arial; text-decoration: none; color: #333 !important; height: 18px; width: 100%; display: block; line-height: 18px; padding: 0 0 0 10px; background-color: #e6e7e9; margin: 1px 0; } .jGM_content a:hover { color: #fff !important; background-color: #4D4E67; /* Bar color on mouseover */ } .jGM_more { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPBE6HQ_J3bTYJmLBNOymfTvwVMkX_hd7404Vcv4iW1Th4cg0k2lwSb8QIhMWH1boVcTOSFj8hk6B6_8wByvupLQLHjyVvvMJiHT83cX7OAilXzYS-On-XcFwcXSSKEm-TRtM8B8YZ8Y/s1600/arrow.gif); background-repeat: no-repeat; background-position: 203px 50%; } .jGM_back { position: absolute; top: 255px; right: 0; height: 18px; width: 52px; background: #d1d1d1; line-height: 18px; vertical-align: middle; text-align: center; margin: 10px 0 0 0; padding: 0; border: 0; z-index: 99; } .jGM_back a { height: 100%; width: 100%; text-decoration: none; color: #000 !important; /* Color of the "Back" link */ display: block; } .jGM_back a:hover { color: #fff !important; /* Color of the "Back" link on mouseover */ background: #4D4E67; } .jGM_reset { position: absolute; top: 255px; right: 62px; height: 18px; width: 52px; background: #d1d1d1; line-height: 18px; vertical-align: middle; text-align: center; margin: 10px 0 0 0; padding: 0; border: 0; z-index: 99; } .jGM_reset a { height: 100%; width: 100%; text-decoration: none; color: #000 !important; /* Color of the "Home" link */ display: block; } .jGM_reset a:hover { color: #fff !important; /* Color of the "Home" link on mouseover */ background: #4D4E67; }</blockquote>3) Now go to Layout and paste the structure of the menu inside a HTML/Javascript gadget: <blockquote class="tr_bq"><div class="jGM_box" id="jGlide_001">  <ul id="tile_001" class="jGlide_001_tiles" title="Menu" alt="Description of the first level"> <li rel="tile_002">Link 1</li> <li rel="tile_003">Link 2</li> <li rel="tile_004">Link 3</li> <li rel="tile_006">Link 4</li> <li rel="tile_007">Link 5</li> <li><a href="URL address">Link 6</a></li> <li><a href="URL address">Link 7</a></li> <li><a href="URL address">Link 8</a></li> <li><a href="URL address">Link 9</a></li> <li><a href="URL address">Link 10</a></li> <li><a href="URL address">Link 11</a></li> </ul>  <ul id="tile_002" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"> <li rel="tile_005">Link 1.1</li> <li><a href="URL address">Link 1.2</a></li> <li><a href="URL address">Link 1.3</a></li> <li><a href="URL address">Link 1.4</a></li> </ul> <ul id="tile_003" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"> <li><a href="URL address">Link 2.1</a></li> <li rel="tile_008">Link 2.2</li> <li><a href="URL address">Link 2.3</a></li> </ul> <ul id="tile_004" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"> <li><a href="URL address">Link 3.1</a></li> <li><a href="URL address">Link 3.2</a></li> <li><a href="URL address">Link 3.3</a></li> </ul> <ul id="tile_006" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"> <li><a href="URL address">Link 4.1</a></li> <li><a href="URL address">Link 4.2</a></li> <li><a href="URL address">Link 4.3</a></li> </ul> <ul id="tile_007" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"> <li><a href="URL address">Link 5.1</a></li> <li><a href="URL address">Link 5.2</a></li> </ul>  <ul id="tile_005" class="jGlide_001_tiles" title="Menu" alt="Description of the third level"> <li><a href="URL address">Link 1.1.1</a></li> <li><a href="URL address">Link 1.1.2</a></li> </ul> <ul id="tile_008" class="jGlide_001_tiles" title="Menu" alt="Description of the third level"> <li><a href="URL address">Link 1.2.1</a></li> <li><a href="URL address">Link 1.2.2</a></li> </ul> </div></blockquote>Add the URLs of the links and the names of the tabs and that's it. If you want to add more links to the first level, then add another line like this: <blockquote class="tr_bq"><li><a href="URL address">Link 12</a></li></blockquote>If you want to add another level to the link, then the line should be like this: <blockquote><li rel="tile_0010">Link 5</li></blockquote>Then in the area of ??the second or third level, add a piece like this: <blockquote class="tr_bq"><ul id="tile_0010" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"> <li><a href="URL address">Link 5.1</a></li> <li><a href="Url address">Link 5.2</a></li> </ul></blockquote>Here you should keep something in mind, if you look closely the link takes the REL attribute which must be the same as the ID we put on the second level, these IDs should not repeat and always be unique. Yes, it sounds complicated, but once you understand the concept, you'll see that is actually pretty simple. In the area of ??the styles, there are the parts that can be customized. If you want the menu to be static, let's say you want to add it in the sidebar, then delete the first code of the script that is in italics. And in the CSS styles, remove this part: <blockquote class="tr_bq">position: absolute; /* Change absolute with fixed if you want it to float */ top: 50px; /* Distance above */ right: 760px; /* Distance to the right */</blockquote>When there are many links then, there will be showing some arrows, so when you mouseover them, it will show the rest of the links either up or down. Throughout the menu structure we can change the Menu name and the descriptions as well. As this menu is made with JQuery, it is recommended to verify to have only one version of it.

jQuery menus Widgets Vertical drop down menu with jQuery

jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and in addition, he can browse throu...