Home � Java scripts � Floating Navigation Bar For Blogger

Floating Navigation Bar For Blogger

Unknown | 01:07 | 0 comments

Navigation bar is a most useful section of a web or blog site, because it help visitors to navigate through your posts easy. When we talking about Google adsense program they mostly consider about easy navigation of your blog/web site. But most of the time when we scroll particular page down site navigation bar is hidden.

In past I wrote article about How To Create Animated Recent Posts for Blogger with Thumbnails, Recent Posts Widget for Blogger Text CSS Hover Effect and Related post widgets with thumbnails so in this article I decided to teach how to create a floating Navigation bar. Specially this navigation bar contain 

Back button
Previous button
Home button
Refresh button
Back to top button

 Follow these steps to add this navigation bar to your blog too.

Step 01 - Log in to your blogger account and then dashboard

Step 02 - Select Design and then Edit html

Step 03 - Find below code

]]></b:skin>

Step 04 - Past Below code above the ]]></b:skin> code

#float-menu{position:fixed;top:20%;left:0;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;background:#EEE}
#float-menu ul{padding:0}
#float-menu li{margin:5px;list-style-type:none}
#float-menu li,#float-menu li a{width:24px;height:24px}
#float-menu li a{float:left}
#float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-o_y3TwEjgywGWkEJXfXCU2XnmqrbcfxF6tM_iBXGpyqdmSV4GJGN4k3T0JC57_jTMWKqQ7vDMi6Z53y1GvUEFM4jpM3bPO4Ir2R70oNH0X8CVCMn_Qgb2ThoMlZyORUp_HgbKFgN_obE/s1600/float+menu.png)}
#float-menu #menu-right a{background-position:0 -120px}
#float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px}
#float-menu #menu-left a{background-position:0 -24px}
#float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px}
#float-menu #menu-random a{background-position:0 -48px}
#float-menu #menu-random a:hover{background-position:-24px -48px}
#float-menu #menu-home a{background-position:0 -72px}
#float-menu #menu-home a:hover{background-position:-24px -72px}
#float-menu #menu-top a{background-position:0 -96px}
#float-menu #menu-top a:hover{background-position:-24px -96px}

Step 05 - Find this code

<b:includable id='main' var='top'>

Step 06 - Past below code just after above code.

<div id='float-menu'>
<ul>
<li id='menu-right'>
<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-left'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-random'>
<script type='text/javaScript'>//<![CDATA[
var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
//]]></script>
<script type='text/javaScript'>//<![CDATA[
function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="Reload" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
//]]></script>
</li>
<li id='menu-home'>
<a expr:href='data:blog.homepageUrl' title='Home'/>
</li>
<li id='menu-top'>
<a href='#' title='Back to top' rel="nofollow"/>
</li>
</ul>
</div>

Step07 - Save template and Check your blog.

Comment on this post if is it useful.

Category: Java scripts

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!

Floating Navigation Bar For Blogger

0 comments

Sponsors

Popular Posts

Followers

Labels

Recent Comments

About Me

Blog Archive

Contact Form

Categories

Visitors