by

Add floating navigation bar with older newer posts, reload, home and back to top button

image_pdfimage_print

This is a very cool widget that allows visitors to navigate through your blog easily.
It has 5 options:
floating navigation bar
1. Go to Older Posts
2. Go to Newer Posts
3. Reload Page
4. Home
5. Back to top

How to add this widget

Step 1. Go to Blogger Dashboard >> Design >> Edit html and find the tag below

]]></b:skin>

Step 2. Paste before/above the following 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(http://mybloggertricks.org/wp-content/uploads/2013/02/floatmenu.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 3. Now find this tag:

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

Step 4. Just after it, add the code below:

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

I hope you like it.
Please share & subscribe for more tutorials.

image_pdfimage_print

Leave a Reply

Your email address will not be published. Required fields are marked *