Posted by Syed Muhammad Ali
 |
Today we are going to share an awesome navigation menu made by W2B. Navigation widgets plays an important role in getting your visitor understanding your blog. This navigation menu has an awesome layout which would help you to show your visitor featured post.
This widget is made using Jquery and Css.
You can easily install this widget to Blogger.
Follow the Below Steps to Add this widget to Blogger
- Go to Blogger
- Log-In to your Dashboard
- Go to Template Section
- Click Edit Html
- Now Search for ]]>
- Paste the Below Code Just Above ]]>
/* InfoTechBlogging Stylings */.ITB-Menu *{margin: 0;padding: 0; z-index:1000;}ul.ITB-Menu {list-style: none;line-height: 1;overflow: visible !important;}ul.ITB-Menu:after{margin: 0;padding: 0;content: ‘ ‘;display: block;height: 0px;clear: both;}ul.ITB-Menu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}ul.ITB-Menu 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.ITB-Menu li a:hover,ul.ITB-Menu li a.hoverover{background: #f5f5f5 !important;}ul.ITB-Menu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}ul.ITB-Menu li:hover > ul{display: block;}ul.ITB-Menu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}ul.ITB-Menu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}ul.ITB-Menu ul li a:hover,ul.ITB-Ajax-Menu ul li a.hoverover{background: #fff !important;}ul.ITB-Menu ul ul{display: none;left: 100%;top: 0;}/* InfoTechBlogging Menu Stylings */ul.ITB-Ajax-Menu 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.ITB-Ajax-Menu li:hover div.submenu {display: block;}ul.ITB-Ajax-Menu ul ,ul.ITB-Ajax-Menu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}ul.ITB-Ajax-Menu ul li{background: none !important;float: none !important;}ul.ITB-Ajax-Menu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}ul.ITB-Ajax-Menu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}ul.ITB-Ajax-Menu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}ul.ITB-Ajax-Menu ul.postslist li:last-child{border-bottom: none 0;}ul.ITB-Ajax-Menu 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.ITB-Ajax-Menu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}ul.ITB-Ajax-Menu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}ul.ITB-Ajax-Menu .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.ITB-Ajax-Menu .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;}
#ITB-Ajax-Menu {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 tag inside template editor
- paste the Below Code just Above tag.
Note: Don’t add the Above code if you already have installed it.
- Also Paste the below code above tag.
jQuery(document).ready(function($) { $(‘#ITB-Ajax-Menu’).ajaxBloggerMenu({ numPosts : 4, // Number of Posts to show defaultImg : ‘http://url-to-image.com/default-image.jpeg’ // Default thumbnail Image });
});
- Now Search for
- Paste the Below Code just Below
Congrats! You are Done.
You can see this awesome widget working on your Blog.
I hope you like this widget, Ask any queries related to this widget in Below Comments.
Follow Us! 
About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter
