Monday, 16 September 2013

How To Add Floating Navigation Bar In Blogger

How To Add Floating Navigation Bar In Blogger

Hello Friends, welcome to hackers and thiefs, we provide you with quality tutorial on blogger and search engine optimization. Today i am going to tell you how you can add a floating navigation bar at the top of your blog in blogger.
It is good for attracting users to your account. Your users will not have to go again to the top of the page to click link on navigation bar.
Follow each step carefully otherwise you will break your template.

Creating Floating Navbar in Blogger

First of all backup your template. So that you can use this if by chance you template get destroyed by mistake.

Step 1
Go To Blogger Home > Dashboard > Template

Step 2
Than Click On Edit Html

Step 3
Click Ctrl+F To Open Search Box. Now Search For Code Given Below.

Step 4 
Than Paste The Code Given Below Just Above "]]></b:skin>".
/* Sticky Navigation Bar--*/#MBL_wrapper .MBL_social_wrapper{margin-top: 15px;}
#MBL_wrapper{width: 100%;margin: auto;background: #fff;height: 50px;border-top: 5px solid #2c2f32;border-bottom: 1px solid #EBEBEC;-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);position: fixed;z-index: 999;}
#MBL_wrapper .topmenu.notice{float: left;width: 500px;margin-top: 15px;color: #fff;}
#top_menu a{color: #fff;}
#top_menu{display: block;float: left;list-style: none;margin-top: 12px;}
#top_menu li{display: inline-block;margin-right: 15px;font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;font-size: 14px;text-transform: uppercase;}
#top_menu li ul{display: none;}
#boxed_wrapper{width: 980px;margin: auto;}
.MBL_standard_wrapper{width: 960px;margin: auto;}
.MBL_standard_wrapper.wide{width: 980px;}
.MBL_standard_wrapper.header{margin-bottom: 0px;}
.MBL_social_wrapper{width: auto;float: right;}
#menuforall .MBL_social_wrapper{margin-top: 15px;}
.MBL_social_wrapper ul{list-style: none;}
.MBL_social_wrapper ul li{float: right;margin-left: 5px;}
.MBL_social_wrapper ul li img{width: 24px;}
#MBL_menu_wrapper{width: 930px;height: 50px;padding: 0;margin:auto;}
.mainmenu.notice{float: left;width: 600px;padding: 17px 0 10px 12px;z-index: 999;}
#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav{list-style: none;display: block;float: left;margin: 0 23px 0 5px;width: 700px;}
#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li{display: block;float :left;margin: 0;}
#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul{display: none;list-style: none;background: #000;position:absolute;padding: 0;margin-top: 51px;width: 200px;height: auto;z-index: 1000;padding-top: 5px;border-bottom: 5px solid #000;border-left: 0;}
#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul{margin-left: 200px;margin-top: 5px;}
#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a{background: none;}
.main_nav li ul li{width: 100%;}
#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a{color: #fff;display: block;width: 188px;font-weight: bold;line-height: 1em;padding: 10px 0 10px 12px;background: none;}
.main_nav ul, .main_nav{list-style: none;margin: auto;width: 600px;height: 50px;z-index: 999;float: left;border-left: 1px solid #EBEBEC;}
.main_nav ul li,  .main_nav li{display: block;float :left;margin: 0;}
.main_nav ul li a,  .main_nav li a{display: block;float :left;margin: 0 0 0 0;padding: 18px 15px 14px 15px;color: #2c2f32;font-family: 'Patua One';text-transform: uppercase;font-size: 13px;font-weight: 500;border-right: 1px solid #EBEBEC;}
.main_nav ul li ul li a,  .main_nav li ul li a{width: 165px;padding: 7px 19px 7px 16px;border: 0;font-size: 12px;font-weight: normal;color: #ccc;font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;}
.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a{border-bottom: 0;}
.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a{color: #fff;background: #1bc4de;}
.main_nav li:last-child a:hover, .main_nav li:last-child a.hover{border-right: 0;}
.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,{display: block;width: 170px;line-height: 0.7em;padding: 5px 0 5px 30px;}
.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover}
a{color: #2C2F32;text-decoration: none;-webkit-transition: color .2s linear, background .1s linear;-moz-transition: color .2s linear, background .1s linear;-ms-transition: color .2s linear, background .1s linear;-o-transition: color .2s linear, background .1s linear;transition: color .2s linear, background .1s linear;}
/* Font Face ----------------------------------------------- */@font-face {font-family: 'Patua One';font-style: normal;font-weight: 400;src: local('Patua One'), local('PatuaOne-Regular'), url( format('woff');}
ul{margin: 0;padding: 0;list-style: none;}

Step 5
Again Search For <body> Tag. And Paste The Code Given Below Just Below It.
<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href=''>Hackers & Thiefs</a></li>
<div id='menu_border_wrapper'></div>
<!-- End Navigation -->
That's It. Save Template And You Are Done.
Go To Your Website And See How Your Navigation Looks.
Happy Blogging.

You May Also Like

1 comment: