Mashable Style Blogger Horizontal Navigation Bar

Mashable dropdown menus are more popular and familiar widget for any platform, which includes thumbnails of each individual post also hyperlinks, description, search box, login form and more options. Look like the mashable style the widget is possible to download for WordPress but in blogger it's quite impossible to download form any source until or unless any developer makes it. But we're so proud releasing a jQuery based menu bar which not like to Mashable style but it creates a multi-level dropdowns like as mashable also a load icon appears when users just put the cursor on any navlinks. Today we'd show you all how to install this widget properly on Google hosted blogspot templates easily.

Live Demo

Prepare Your Template First

1. Go to Blogger > Template
2. Backup Your Template
3. Click Edit HTML
4. Now search for </b:skin>
5. Simply add the following code right before closing </b:skin>  tag

/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {background: #36b3ff; height:41px; width:960px; margin-bottom: 0px; margin-top: 0px; }
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;float: left;position:relative;margin: 0;padding: 0;}
ul.w2bmenu li a{margin: 0;padding: 13px 16px;text-decoration:none;font-size: 11px;
font-family: Arial,Helvetica, Verdana;
font-weight: normal;
text-transform: uppercase;text-shadow: 0px 1px 1px #888;color: #fff;display: block;
border-right: 1px solid #84d1ff; }
ul.w2bmenu li a:hover {
color: #fff;
}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #57c0ff;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%; }
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none; min-width: 160px;background: #76cbff; text-shadow: none; color: #fff; font: normal 12px tahoma, verdana;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal; letter-spacing: 1px;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{ text-decoration: none; }
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: #3f3f3f;border-top: 0 none; color: #fff;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul {display: block !important;border: 0 none !important;}
ul.w2bajaxmenu ul li{background: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #212121;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;position: relative;min-height: 60px;padding: 8px 8px 8px 110px;}
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 #c7c7c7;font-size: 0;line-height: 0; border-radius: 6px;
opacity: 0.5;
}
ul.w2bajaxmenu ul.postslist li .imgCont:hover {
opacity: 1;
}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display:}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0;}
ul.w2bajaxmenu
.loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQaPeG1O8ennzMrtsIMzDjxMxI1RtYvm9PXHujN8scBOMhvZq9yewXwPCkct52eI5qFLl_pw7sgsagKGzonPRxZ0YB9-qtndSuWT7KEekwWtK5YAPDrolR2VHjtqinwXKP0INn0KEmqfxD/s320/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;}

6. Don't save your template yet search for </head>
7. Now add the following jQuery script right above closing </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script src='http://snippethosted.googlecode.com/svn/ajaxbloggermenu.min.js' type='text/javascript'></script>

<script type='text/javascript'>
jQuery(document).ready(function($) {
            $('#w2bajaxmenu').ajaxBloggerMenu({
            });
});
</script>

8. Finally save your template and you're done!

How To Embed The Bar

1. Go to layout section
2. Click on Add a Gadget
3. Choose HTML/JavaScript
4. Now copy and paste the following code inside textarea of the widget
5. Finally save the widget and right place it according to your template structure

<ul id="w2bajaxmenu" class="w2bmenu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Example 1</a>
            <ul>
                <li><a href="Label URL1">Sample Label</a></li>
                <li><a href="Label URL2">Label w/ Search</a></li>
                <li><a href="Label URL3">Search Query</a></li>
                <li><a href="Label URL4">Unknown Search</a></li>
            </ul>
</li>
        <li>
            <a href="#">Example 2</a>
            <ul>
                <li><a href="Label URL1">Social Media</a></li>
                <li><a href="Label URL2">Make Money</a></li>
                <li><a href="Label URL3">Affilliate</a></li>
                <li><a href="Label URL4">Portfolio</a></li>
            </ul>
        </li>
        <li><a href="http://www.way2blogging.org">Blogger</a></li>
        <li><a href="http://www.genesisawesome.com">WordPress</a></li>
    </ul>

Customization Guidance

1. Simply change light blue colored Example 1, Example 2 as the main-menu links
2. Expand the bar up-to 100% by changing the widget 960px;
3. Change the Label URL1, Label URL2 as the label URL and Sample Label, Search Query as the exact label title

Credit Goes:

We proudly say that this script is generated and optimized by Harish Dasari (Author and admin of Way2blogging.org) we just brought changes into its css part. Now it perfectly works for any blogspot template. I think it will not create any trouble until or unless your bring any changes into its JavaScript part. If you wish to optimize it more then kindly contact us at info@thewildblogger.com we'd definitely help you to do so.

Tutorial Overview:

If you wish this tutorial helpful then you kindly support us grab our button on right column or subscribe our regular email updates or you may send your feedback through our comment form directly.

Do safe blogging :)

Original Post at : http://www.thewildblogger.com/2012/12/mashable-style-blogger-horizontal.html