Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Earlier this month, I posted an article on AJAX page loading effect for Blogger, which was so far the best AJAX trick for a Blogger blog.
AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. AJAX was made popular in 2005 by Google, with Google Suggest.
So, today I'am sharing a very nice Mashable style AJAX drop down menu for Blogger, which is created by W2B. The menu is works just like normal drop-down menu when javascript is disabled, And it will turns to AJAX powered drop-down menu when javascript is enabled.
Add This Menu To Blogger:
- Go To Blogger > Template > Edit HTML > Click on "Proceed."
- Search for ]]></b:skin> and post following css just above it:
/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{text-decoration:none;margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAwncprkWmz_NVH6_V7vSerIPXdFxbOvmi9NznbaqL-YseeM-LMIo-irZIMdJ8Fj5LYB2v0GbORQxfIEjgHNpcTuyQ2Q1QgLD7jJcqELgqvEF43K1tVmYoBKST7ZRNpZ3m_xUIGAglAE/s1600/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}
- Now search for </head> and paste following script just above it:
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/AJAXBloggerMenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFeTajLrpW3Ob3OROSkVTJHcqjYWgEQYiB7xij6-xhs-MlLu4luvA8RGzk2ZUHD_jhY0AaCJ5oPUTCHy4fj7rUwE2Y3yIyczyOFnNJwfdOEDTloXopSafrvBATwoIgLl6cLhTOi0iMN8/s1600/bigthumbnail.png' // Default thumbnail Image
});
});
</script>
- Save your template....Time for the final and most complicated step, so pay some attention to this.
The AJAX Menu accepts three types of urls. You must use this urls only in the menu. They are Label, Search Query and Label w/ Search Query.
- Label URL: http://yourblogdomain.blogspot.com/search/label/LABELNAME
- Search Query: http://yourblogdomain.blogspot.com/search?q=SEARCHQUERY
- Label w/ Search Query: http://yourblogdomain.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY
- Go To Blogger > Layout > Add A Gadget > HTML/JavaScript
- Post following code:
<ul id="w2bajaxmenu" class="w2bmenu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Example 1</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a></li>
</ul>
</li>
<li>
<a href="#">Example 2</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
</ul>
</li>
<li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>
That's IT....Also, don't forget to change your blog's url in above code....
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
