New AJAX Navigation Menu Widget for Blogger

December 26, 2012   /   Posted by in Blogger Jquery, Blogger Widgets 46 Comments
New AJAX Navigation Menu Widget for Blogger

After so long time almost two months, i am here with awesome new blogger widget. It is very hard to manage the works and blogs simultaneously. But still love to give the new blogger widgets and tips.

AJAX Navigation menu for blogger is very new widget created by Me in Blogger platform that uses Blogger JSON feed API and AJAX. This navigation menu is inspired from Mashable.com old site. I coded this widget some months ago, but there is no time for publishing this article. And now i recoded and improved this widget and added customizable features.

How it Works ?

Well, this widget is works based on jQuery library and Blogger JSON feed API. Your blog must be for Public visitors. other wise the Blogger JSON Feed API won’t works.
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.

AJAX Navigation Menu For Blogger Banner

View Demo

How to Install this Widget?

  1. Go to Blogger Dashboard > Select the Blog > Go to Template page of the Blog
  2. Click Edit HTML button

The CSS

Add the Following CSS Code before ]]></b:skin>

/* 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{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('http://i.imgur.com/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;}

The JavaScript

If your Blog has jQuery plugin, then don’t add this plugin in your blog template,
Otherwise add the below line of code before  </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Add the following Javascript code before  </head> tag

<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#w2bajaxmenu').ajaxBloggerMenu({
		numPosts : 4, // Number of Posts to show
		defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
	});
});
</script>

The HTML

In this section you should be carefully add the HTML, otherwise it won’t works.
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

Note:- Search Query must be Url encoded. You can use this tool to encode your search query.

Use this MENU Example code and add it in HTML/JavaScript gadget.

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

Final Words!

I hope you enjoyed with this widget. I am really sorry for not posting new gadgets and templates regularly. I hope i will continue release new templates, widgets and tips. :)
Suggest new features, your feedback and your thoughts on this widget by leaving a comment and don’t forget to share this widget. and…………. Advanced HAPPY NEW YEAR! :D

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

46 Comments on “New AJAX Navigation Menu Widget for BloggerAdd Comment

  1. avatar

    Jack Owen December 26, 2012 10:59 pm #

    Wow. amazing tips … thanks so much

  2. avatar

    Rounak December 26, 2012 11:49 pm #

    WoW nice to see post from you after a long back. Anyways I surely will try it. :)

  3. avatar

    file-24 December 27, 2012 12:24 am #

    Harish Thanks,but show me this error,
    can u help me?
    image:http://s9.postimage.org/hcnsdjce7/image.png

    • avatar

      Harish December 27, 2012 12:27 am #

      It’s my typo mistake.Thanks.
      I fixed the it. :)

  4. avatar

    Tien Nguyen December 27, 2012 6:12 am #

    Oh God, this is amazing design. Love you Harish.

    • avatar

      Harish December 27, 2012 5:53 pm #

      Thanks Tien!. :)

  5. avatar

    marjorie December 27, 2012 8:15 am #

    Fabulous, Thank you all you do xo

  6. avatar

    Ashiq Hassan December 27, 2012 2:02 pm #

    Awesome Widget keep it up..
    Bloggers are expecting this types of widget.. Thanks..

  7. avatar

    Sagar December 27, 2012 2:30 pm #

    Looks Professional like adpated from WordPress Nice!

  8. avatar

    Nilesh December 27, 2012 4:13 pm #

    Not working man. Getting lot of 403 (Forbidden) for lots of resources. Please help.

    • avatar

      Harish December 27, 2012 4:24 pm #

      please share the blog link!

      • avatar

        Nilesh December 29, 2012 4:38 pm #

        thetechtrash.blogspot.in :(

        • avatar

          Harish December 29, 2012 5:40 pm #

          you are using the old CSS.
          I updated the CSS already, please use updated CSS.

  9. avatar

    file-24 December 27, 2012 6:44 pm #

    Harish again have problem!!!
    plz fix this:

    ————————————————–
    and here u can see this is not working,i sure!
    http://test-example-new-menu.blogspot.com

    • avatar

      Harish December 27, 2012 9:23 pm #

      You didn’t added the jQuery plugin. Make sure that you followed all the steps mention above. Please don’t bring your mistakes as the problem.

      • avatar

        file-24 December 28, 2012 2:09 am #

        When i add First javascript,show me error!
        anyway i sure this is not my problem!
        Thanks….

        • avatar

          Harish December 28, 2012 2:04 pm #

          Yes! the menu is working fine! but the css conflicts w/ blogger template css and menu css, which makes the menu is not showing. However, i updated the some parts of css. and now hopefully it works without conflicts.

  10. avatar

    Vinay December 27, 2012 6:57 pm #

    Nice Post :-)

  11. avatar

    Bhaskar Bharti December 27, 2012 7:01 pm #

    Hi can I customize it further.

    1. Do not want the font to be bold as well as a background grey color. What to do.
    2. The drop down is going behind my slider. What can be the reason.

    Please advise. This is the page: www.androidappsforyou.com
    Love you tuts they are damn simple to learn and implement. Keep it up.

    • avatar

      Harish December 27, 2012 9:25 pm #

      Yes, you can!
      Right now it is there is some conflicts with the AJAX menu styles and template menu styles. remove the css with id #nav2
      You can make changes with css id #w2bajaxmenu. Don’t make changed to the CSS i provided.

      • avatar

        Bhaskar Bharti December 28, 2012 2:19 pm #

        Did not get you, what exactly are you saying. I mentioned two problems there. Can you help me out with each of them separately.

        • avatar

          Harish December 28, 2012 2:32 pm #

          OK,

          Remove the OLD CSS and add New Updated CSS.

          After adding Updated CSS, look for #w2bajaxmenu { selector(in last line), and change the background property!

  12. avatar

    Muhammed December 27, 2012 7:30 pm #

    Great dude !!! http://www.tweaksformypc.com

  13. avatar

    Igor December 28, 2012 4:36 am #

    Got to say I’m really disappointed by this.

    I love the work you do, and have most of your widgets on my blog, but this time you really didn’t give enough time for this one to work properly. I guess you’ve been preoccupied with some other projects.

    Not only you messed up with the script, which BTW you didn’t correct as you said you will, but also your html code has an tag missing.

    Basically, the widget is not working. And I have say it’s a shame. Guess you lost your touch, as you have not been working with widgets for quite some time.

    Sorry for non constructive comment, but I have to give this one a thumbs down.

    You just lost one loyal reader.

    • avatar

      Harish December 28, 2012 2:09 pm #

      So sad to hear from you! :) As i said in previous comments it is CSS Conflicts! I am so sorry! i updated the css and fixed some css conflict errors.

      • avatar

        Igor December 28, 2012 3:34 pm #

        I love you man!

        I thought to give up on you, but you responded in a fashionably manner and corrected the code.

        It works perfectly now.

        I apologies if my previous comment was in any kind offensive.

        You got your loyal reader back :)

        Please take more time to make us more of these awesome widgets, if it is possible :)

        Thank you once again.

        • avatar

          Harish December 28, 2012 3:48 pm #

          :D
          No apologies please!
          In Open source code, You are responsible to report issues and bugs. I am responsable to fix them ASAP. :)
          B/W Thank You!

          • avatar

            Igor December 28, 2012 5:29 pm #

            Harish, is there maybe a possibility that you could enlighten us on Google AdSense.

            May write a post on best tricks how to get a higher CTR and CPC, where to set our ads, what ad types, ad sizes, more or less ads, link ad units etc…

            Maybe something that has worked best for your blog.

            I’m sure we all read official Google’s manual on ad positioning and ad types and sizes, but it would be really great if some problogger like yourself would write his experience with AdSense.

            I’m of the opinion that this kind of post would interest lot of your readers, myself included.

            • avatar

              Harish December 28, 2012 5:46 pm #

              Sure! i will try to make a post. but not now!, may be next year! :P

  14. avatar

    Anon December 28, 2012 6:56 am #

    I took the liberty of checking the code of the drop down menu from the demo page, and it doesn’t remotely resemble to the code you presented us here.

    Good part of code is missing.

    Please don’t share unfinished widgets just so you could get cheap backlinks to your site, or I’ll be forced to take your site down.

    Either repair this, or face the consequences.

    • avatar

      Harish December 28, 2012 2:13 pm #

      Dear Anon, I am not making the widgets for backlinks. you can not find backlinks in any of my recent widgets. Any Open Source code comes without Warranty, if you find any errors and bugs let me know, i will fix them ASAP.
      Make sure before posting such type of comments.

  15. avatar

    saif December 28, 2012 11:32 am #

    Awesome widget. Thanks for sharing.

  16. avatar

    Nihal December 28, 2012 12:22 pm #

    Hello Harish, i see you respond to each comment, means you are active but why you do not post on blog same as u did before?

    • avatar

      Harish December 28, 2012 2:15 pm #

      Several reasons!, Due to some personal works and Future projects. :)

  17. avatar

    ahad December 28, 2012 12:31 pm #

    Not Working,show me error!

    • avatar

      Harish December 28, 2012 2:15 pm #

      Please share your blog url!

  18. avatar

    Jack Owen December 28, 2012 7:06 pm #

    Sadly I do not integrate it into my code. Can you help me?

    • avatar

      Harish December 28, 2012 8:08 pm #

      What’s the problem?

  19. avatar

    CCW December 29, 2012 1:04 am #

    Looks awesome. Thanks!

  20. avatar

    Mohammed Forhaj December 29, 2012 1:58 am #

    That’s Awesome Bro. Thank You.

  21. avatar

    File-24 December 29, 2012 7:58 pm #

    Oh,harish…
    im happy ,in last u found bug and fixed this “Navigation Menu”
    ———–
    Yea,now working 101%,Thanks…
    Example:http://ajax-navigation-menu.blogspot.com

    • avatar

      Harish December 29, 2012 11:19 pm #

      :D

  22. avatar

    Clark December 29, 2012 10:15 pm #

    Thanks so so much!
    It is the most amazing tip i’ve ever seen in Blogger :-)
    Keep up the good work ^^

  23. avatar

    Nilesh December 29, 2012 11:27 pm #

    Thanks bro. This is awesome. :):):)

    • avatar

      Harish December 29, 2012 11:29 pm #

      Looks very nice!
      Enjoy! :D

  24. avatar

    Nitin Maheta January 1, 2013 6:09 pm #

    Thanks Dude…. Osam Menu…
    I just applied it to my blog :)

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress