Showing posts with label menus. Show all posts
Showing posts with label menus. Show all posts
Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new AJAX navigation menu widget, images can be added to the drop-down menu as well.

The AJAX navigation menu for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long before it was given a makeover. Despite the plain and simple inspiration, the drop down menu with images is a huge hit.

It works based on the jQuery library and Blogger JSON Feed API. Function-wise, it works just like a normal drop-down menu when JavaScript is disabled. For it to work online, a blog must be for public visitors, so the Blogger JSON Feed API will function as designed.

Features

Multi-Level Menu Support

The AJAX menu is a multi-level drop-down menu that is based on the standard unordered list of HTML. When a menu contains a sub-menu, it loads on the fly when a user rolls over the main menu. What is great about this is that it saves outgoing traffic, especially on a website that uses a large navigation.

Cross-browser Compatibility

Most AJAX applications will work across different browsers even with other plugins or proprietary technology already installed.  The menu with images works in the same premise, instead of being designed for a specific browser. Because there is no telling which browser you or your blog readers would use, the new AJAX drop-down mega menu with images is the ideal option.

Some of the Windows browser supported includes IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When you're using a Mac, the AJAX menu is supported on Firefox, IE and Safari. If JavaScript is disabled, however, the menu is still accessible, but only as pure CSS menu.

Automatic Sub-Menu Display

With the new AJAX menu, you only need to roll over a menu item and sub-menus will automatically load. No need to click on a menu to get the sub-menu to drop down. This not only saves users' valuable navigation time, but also outgoing traffic.

Menu Styling

AJAX menus can be styled by simply changing the megamenu.js and the CSS style. The former is used when javaScript is turned on, while the latter is when it is turned off. You can adjust the menu parameters manually or you can use ready-to-use templates.

There are plenty of other features, but you would not be able to use or experience them if you do not install the new mega menu with images. What do you need to do then to implement it in your blog or website?


Adding Mega Menu with Images/Thumbnails in Blogger

Step 1. Log in to your Blogger account, then go to the Dashboard. Select the blog where you want to install the new mega menu.

CSS

Step 2. Click on Template, then press the Edit HTML button. Press anywhere inside the code area and use the CTRL + F function to make your search quicker and easier. Type the following tag and hit Enter to find it:
]]></b:skin>
Once you find the tag, add the code below just above/before it:
.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

JavaScript

Step 3. Check if your blog has the jQuery plugin already installed. If not, you need to add a few lines of code before the </head> tag (CTRL + F to find it). See the code below:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39;
 });
});

$(function(){
  $(&#39;.search-here&#39;).submit(function(e){
    if($(&#39;.search-box .search-field&#39;).val().length==0){
       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
      e.preventDefault();
    }
  });
});
</script>

Note

- If jQuery plugin already exist, remove the line in red.
- To change the number of posts, change the 4 value from:
postsNumber : 4
- To add a different thumbnail when a post has no image, replace the url in blue from:
noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39;

HTML

Step 4. Carefully add the HTML code to ensure that the drop down menu with images will work as designed. There are only three types of URLs that the AJAX Menu accepts and they must be used accordingly.

Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Among the three URLs, the Search Query has to be URL encoded using a specific tool.

Step 5. Search the following line using CTRL + F:
<div class='main-outer'>
Just above this line, add the following HTML code:
<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>
Note: replace the text in blue with the label url and the text in red with the name of the label. This is the label that you have added to the Labels settings of your post editor:


Step 6. Click on Save template for all the changes to take effect.

If you can't find the line from step 5, access the Layout tab, click on Add Gadget, and then choose HTML/JavaScript Gadget. Copy the HTML code and paste it inside the box... then press the Save button.

That's it!

Once that is done, your AJAX menu with images will be implemented and ready for you to use. Make sure to choose photos that are relevant to the menu and sub-menus so your website will have cohesive look and appeal. Research shows, however, that text accompanied by any image, even if completely irrelevant, can grab attention. 

Mega Menu with Images or Thumbnails for Blogger

Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new AJAX navigation menu widget, images can be added to the drop-down menu as well.

The AJAX navigation menu for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long before it was given a makeover. Despite the plain and simple inspiration, the drop down menu with images is a huge hit.

It works based on the jQuery library and Blogger JSON Feed API. Function-wise, it works just like a normal drop-down menu when JavaScript is disabled. For it to work online, a blog must be for public visitors, so the Blogger JSON Feed API will function as designed.

Features

Multi-Level Menu Support

The AJAX menu is a multi-level drop-down menu that is based on the standard unordered list of HTML. When a menu contains a sub-menu, it loads on the fly when a user rolls over the main menu. What is great about this is that it saves outgoing traffic, especially on a website that uses a large navigation.

Cross-browser Compatibility

Most AJAX applications will work across different browsers even with other plugins or proprietary technology already installed.  The menu with images works in the same premise, instead of being designed for a specific browser. Because there is no telling which browser you or your blog readers would use, the new AJAX drop-down mega menu with images is the ideal option.

Some of the Windows browser supported includes IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When you're using a Mac, the AJAX menu is supported on Firefox, IE and Safari. If JavaScript is disabled, however, the menu is still accessible, but only as pure CSS menu.

Automatic Sub-Menu Display

With the new AJAX menu, you only need to roll over a menu item and sub-menus will automatically load. No need to click on a menu to get the sub-menu to drop down. This not only saves users' valuable navigation time, but also outgoing traffic.

Menu Styling

AJAX menus can be styled by simply changing the megamenu.js and the CSS style. The former is used when javaScript is turned on, while the latter is when it is turned off. You can adjust the menu parameters manually or you can use ready-to-use templates.

There are plenty of other features, but you would not be able to use or experience them if you do not install the new mega menu with images. What do you need to do then to implement it in your blog or website?


Adding Mega Menu with Images/Thumbnails in Blogger

Step 1. Log in to your Blogger account, then go to the Dashboard. Select the blog where you want to install the new mega menu.

CSS

Step 2. Click on Template, then press the Edit HTML button. Press anywhere inside the code area and use the CTRL + F function to make your search quicker and easier. Type the following tag and hit Enter to find it:
]]></b:skin>
Once you find the tag, add the code below just above/before it:
.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

JavaScript

Step 3. Check if your blog has the jQuery plugin already installed. If not, you need to add a few lines of code before the </head> tag (CTRL + F to find it). See the code below:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39;
 });
});

$(function(){
  $(&#39;.search-here&#39;).submit(function(e){
    if($(&#39;.search-box .search-field&#39;).val().length==0){
       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
      e.preventDefault();
    }
  });
});
</script>

Note

- If jQuery plugin already exist, remove the line in red.
- To change the number of posts, change the 4 value from:
postsNumber : 4
- To add a different thumbnail when a post has no image, replace the url in blue from:
noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39;

HTML

Step 4. Carefully add the HTML code to ensure that the drop down menu with images will work as designed. There are only three types of URLs that the AJAX Menu accepts and they must be used accordingly.

Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Among the three URLs, the Search Query has to be URL encoded using a specific tool.

Step 5. Search the following line using CTRL + F:
<div class='main-outer'>
Just above this line, add the following HTML code:
<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>
Note: replace the text in blue with the label url and the text in red with the name of the label. This is the label that you have added to the Labels settings of your post editor:


Step 6. Click on Save template for all the changes to take effect.

If you can't find the line from step 5, access the Layout tab, click on Add Gadget, and then choose HTML/JavaScript Gadget. Copy the HTML code and paste it inside the box... then press the Save button.

That's it!

Once that is done, your AJAX menu with images will be implemented and ready for you to use. Make sure to choose photos that are relevant to the menu and sub-menus so your website will have cohesive look and appeal. Research shows, however, that text accompanied by any image, even if completely irrelevant, can grab attention. 
Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com with some slight modifications so that it can be easily adapted to our Blogger template.

In the upper right side of this menu, we have the contact links and social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, there is the drop-down navigation menu and on the left side, the search form.

To achieve a 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 selector.

dropdown menu


Adding the CSS dropdown navigation menu in Blogger

Step 1. Access your Blogger Dashboard and go to "Template", then click on the "Edit HTML" button


Step 2. Next, 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.
</header>
Step 3. Just below </header> add the HTML structure of the dropdown menu:
<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='#'><img height='18px' src='http://3.bp.blogspot.com/-bsoTf8EpVbE/Uw_W2HmlPOI/AAAAAAAAGXQ/RS57fNXl1tE/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='http://2.bp.blogspot.com/-9OXxCWCilgM/Uw_WNEqUShI/AAAAAAAAGXI/2T6Dc8zVrxA/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='http://3.bp.blogspot.com/-LQABZjrBgiY/Uw_X4zGqixI/AAAAAAAAGXo/jlR7r1blHso/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='http://1.bp.blogspot.com/-NsPs8DRJfP4/Uw_XnNMAHTI/AAAAAAAAGXg/qC2kA_T-BdY/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>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>

How to Set up the Dropdown Menu

  • Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear in the menu.
  • To change the social media icons, add the links of your icons instead of the ones in blue. For more help, please see this tutorial on how to upload and get the URL of an image.
  • 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. Now, let's add the CSS styling for the menu. Search for the following tag:
]]></b:skin>
Step 5. Just above the ]]></b:skin> tag, add this CSS code:
#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 #FFF}#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:#333;display:block;font-size:14px;height:25px;line-height:25px;padding:11px 15px 10px;text-shadow:0 1px 0 #FFF}#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:#FFF;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 #FFF 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 #FFF inset;color:#444;height:24px;line-height:24px;padding:7px 12px;text-shadow:0 1px 0 #FFF}#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:#FFF;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(http://1.bp.blogspot.com/-NzU9je1udG4/Uw-1tZku4eI/AAAAAAAAGWs/-h4BU1mFTiU/s1600/menu-search.gif) no-repeat scroll 5% 50% transparent;border:1px solid #CCC;border-radius:3px 3px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:26px;padding:0 25px;position:relative;width:130px}#menu-search form:hover{background-color:#F9F9F9}#menu-search form input{color:#999;font-size:13px;height:26px;text-shadow:0 1px 0 #FFF;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}
Step 6. Click on the "Save template" button to save the changes and you're done!

Hope you like this CSS3 dropdown menu for Blogger and if you enjoyed the tutorial, please share and subscribe.

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 with some slight modifications so that it can be easily adapted to our Blogger template.

In the upper right side of this menu, we have the contact links and social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, there is the drop-down navigation menu and on the left side, the search form.

To achieve a 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 selector.

dropdown menu


Adding the CSS dropdown navigation menu in Blogger

Step 1. Access your Blogger Dashboard and go to "Template", then click on the "Edit HTML" button


Step 2. Next, 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.
</header>
Step 3. Just below </header> add the HTML structure of the dropdown menu:
<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='#'><img height='18px' src='http://3.bp.blogspot.com/-bsoTf8EpVbE/Uw_W2HmlPOI/AAAAAAAAGXQ/RS57fNXl1tE/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='http://2.bp.blogspot.com/-9OXxCWCilgM/Uw_WNEqUShI/AAAAAAAAGXI/2T6Dc8zVrxA/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='http://3.bp.blogspot.com/-LQABZjrBgiY/Uw_X4zGqixI/AAAAAAAAGXo/jlR7r1blHso/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='http://1.bp.blogspot.com/-NsPs8DRJfP4/Uw_XnNMAHTI/AAAAAAAAGXg/qC2kA_T-BdY/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>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>

How to Set up the Dropdown Menu

  • Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear in the menu.
  • To change the social media icons, add the links of your icons instead of the ones in blue. For more help, please see this tutorial on how to upload and get the URL of an image.
  • 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. Now, let's add the CSS styling for the menu. Search for the following tag:
]]></b:skin>
Step 5. Just above the ]]></b:skin> tag, add this CSS code:
#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 #FFF}#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:#333;display:block;font-size:14px;height:25px;line-height:25px;padding:11px 15px 10px;text-shadow:0 1px 0 #FFF}#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:#FFF;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 #FFF 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 #FFF inset;color:#444;height:24px;line-height:24px;padding:7px 12px;text-shadow:0 1px 0 #FFF}#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:#FFF;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(http://1.bp.blogspot.com/-NzU9je1udG4/Uw-1tZku4eI/AAAAAAAAGWs/-h4BU1mFTiU/s1600/menu-search.gif) no-repeat scroll 5% 50% transparent;border:1px solid #CCC;border-radius:3px 3px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:26px;padding:0 25px;position:relative;width:130px}#menu-search form:hover{background-color:#F9F9F9}#menu-search form input{color:#999;font-size:13px;height:26px;text-shadow:0 1px 0 #FFF;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}
Step 6. Click on the "Save template" button to save the changes and you're done!

Hope you like this CSS3 dropdown menu for Blogger and if you enjoyed the tutorial, please share and subscribe.
Many times when we think about creating a blog, we tend to put many gadgets, although many are not necessary, or perhaps only a few of them. In order to add the gadgets that we want, we need to have enough space. A solution would be to use 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 user registration, but that doesn't mean 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.


You can find a demo of this panel in this blog - just click on the Open menu link on the top.

Adding the jQuery Expand/Collapse Slider Panel to Blogger

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:

blogger template

Step 2. Click anywhere inside the code area and search by pressing the CTRL + F keys for the <head> tag

Step 3. Below the <head> tag, add this script:
<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>

Step 4. Now search (CTRL + F) the </head> tag and add the CSS styles just above it:
<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(http://1.bp.blogspot.com/-NUzxkktRzaU/Uv_kp1jV21I/AAAAAAAAGLo/KtKg7i17Ecc/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(http://4.bp.blogspot.com/-xlp0IDZdYO0/Uv_kY314jPI/AAAAAAAAGLQ/rViPl1Lb6AA/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(http://2.bp.blogspot.com/-5XawEIl5fZ4/Uv_kY6E8W2I/AAAAAAAAGLc/3gC41-rCLcE/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(http://3.bp.blogspot.com/-xRg5USmC76w/Uv_kY2BfO2I/AAAAAAAAGLU/ssNd4LjkegQ/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(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/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(http://3.bp.blogspot.com/-dT-QzDtobHo/Uv_j8KyMIWI/AAAAAAAAGLE/dhWa0RKCLpI/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(http://4.bp.blogspot.com/-zAJKRnLzcmc/Uv_yHsaS9FI/AAAAAAAAGMc/1fbDDXwrbbY/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>
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:
<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<!-- first section -->
<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='http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Looking for something?</p>
<form method="get" action="/search" id="search-box22">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

</div>

<!-- second section -->
<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>

<!-- third section -->
<div class='left right' align="center">

<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts by email. Just enter your email below if you want to subscribe!</p>

<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='http://4.bp.blogspot.com/-7yw8LAxUHDs/Uv_yeMsPAzI/AAAAAAAAGMk/FmmQs1-0onE/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='http://2.bp.blogspot.com/-m3RbHRx_SrU/Uv_yefCLr6I/AAAAAAAAGMo/UkejpiUz5gk/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/username'><img title="Follow on Google" src='http://4.bp.blogspot.com/-BDo6SRqhmMk/Uv_yefar_mI/AAAAAAAAGM4/lBmHhNcUceY/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='http://4.bp.blogspot.com/-DBsj0D214z8/Uv_yeiKl49I/AAAAAAAAGMw/xG8n2ZSVR98/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>
Note: if you can't find the <body> tag, then try to find this one:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
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 it is 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:
  • http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png
  • 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 - just replace the text in blue with the name of your blog's feed. Please note that you must have this email subscription option enabled in your Feedburner account.
  • 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, these are the main sections that can be customized, but we can remove some of them 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.

Hope you'll enjoy this elegant menu with sliding effect, which will look way better if we remove the Blogger navbar.

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about creating a blog, we tend to put many gadgets, although many are not necessary, or perhaps only a few of them. In order to add the gadgets that we want, we need to have enough space. A solution would be to use 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 user registration, but that doesn't mean 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.


You can find a demo of this panel in this blog - just click on the Open menu link on the top.

Adding the jQuery Expand/Collapse Slider Panel to Blogger

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:

blogger template

Step 2. Click anywhere inside the code area and search by pressing the CTRL + F keys for the <head> tag

Step 3. Below the <head> tag, add this script:
<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>

Step 4. Now search (CTRL + F) the </head> tag and add the CSS styles just above it:
<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(http://1.bp.blogspot.com/-NUzxkktRzaU/Uv_kp1jV21I/AAAAAAAAGLo/KtKg7i17Ecc/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(http://4.bp.blogspot.com/-xlp0IDZdYO0/Uv_kY314jPI/AAAAAAAAGLQ/rViPl1Lb6AA/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(http://2.bp.blogspot.com/-5XawEIl5fZ4/Uv_kY6E8W2I/AAAAAAAAGLc/3gC41-rCLcE/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(http://3.bp.blogspot.com/-xRg5USmC76w/Uv_kY2BfO2I/AAAAAAAAGLU/ssNd4LjkegQ/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(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/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(http://3.bp.blogspot.com/-dT-QzDtobHo/Uv_j8KyMIWI/AAAAAAAAGLE/dhWa0RKCLpI/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(http://4.bp.blogspot.com/-zAJKRnLzcmc/Uv_yHsaS9FI/AAAAAAAAGMc/1fbDDXwrbbY/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>
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:
<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<!-- first section -->
<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='http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Looking for something?</p>
<form method="get" action="/search" id="search-box22">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

</div>

<!-- second section -->
<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>

<!-- third section -->
<div class='left right' align="center">

<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts by email. Just enter your email below if you want to subscribe!</p>

<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='http://4.bp.blogspot.com/-7yw8LAxUHDs/Uv_yeMsPAzI/AAAAAAAAGMk/FmmQs1-0onE/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='http://2.bp.blogspot.com/-m3RbHRx_SrU/Uv_yefCLr6I/AAAAAAAAGMo/UkejpiUz5gk/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/username'><img title="Follow on Google" src='http://4.bp.blogspot.com/-BDo6SRqhmMk/Uv_yefar_mI/AAAAAAAAGM4/lBmHhNcUceY/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='http://4.bp.blogspot.com/-DBsj0D214z8/Uv_yeiKl49I/AAAAAAAAGMw/xG8n2ZSVR98/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>
Note: if you can't find the <body> tag, then try to find this one:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
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 it is 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:
  • http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png
  • 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 - just replace the text in blue with the name of your blog's feed. Please note that you must have this email subscription option enabled in your Feedburner account.
  • 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, these are the main sections that can be customized, but we can remove some of them 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.

Hope you'll enjoy this elegant menu with sliding effect, which will look way better if we remove the Blogger navbar.
A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

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.

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
  • 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 look something like this:

admin control panel for blogger

Adding Admin Control Panel to Blogger template

The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in.

To add the admin panel to Blogger, follow the steps below:

Step 1. Go to "Template" and click on the "Edit HTML" button:


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box

Step 3. Paste this line inside the search box then hit Enter to find it:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Note: if you can't find this line, try to find the <body> tag.

Step 4. Just below that line or tag, add the following code:
<span class='item-control blog-admin'>
<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 expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' rel='nofollow'>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 expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>
Step 4. Click on the "Save template" button to save the changes.

Now take a look on your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!

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.

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

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.

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
  • 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 look something like this:

admin control panel for blogger

Adding Admin Control Panel to Blogger template

The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in.

To add the admin panel to Blogger, follow the steps below:

Step 1. Go to "Template" and click on the "Edit HTML" button:


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box

Step 3. Paste this line inside the search box then hit Enter to find it:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Note: if you can't find this line, try to find the <body> tag.

Step 4. Just below that line or tag, add the following code:
<span class='item-control blog-admin'>
<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 expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' rel='nofollow'>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 expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>
Step 4. Click on the "Save template" button to save the changes.

Now take a look on your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!

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.