How to add a floating navigation bar in blogger blog?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilb7kF00kSDe6FhdbKhLOd8NV-EWX3fxeFG_DXSadpHO0kCZmLY6B6UWrnIbbGhlb73Zeq0R3KymTsEYUzx-ZqsSaVkCCQQCzAVibYGQwngqa9mnljhVG6qOL1AWHrm7kZOedIeGYhgOTB/s1600/floating+navigation+bar1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilb7kF00kSDe6FhdbKhLOd8NV-EWX3fxeFG_DXSadpHO0kCZmLY6B6UWrnIbbGhlb73Zeq0R3KymTsEYUzx-ZqsSaVkCCQQCzAVibYGQwngqa9mnljhVG6qOL1AWHrm7kZOedIeGYhgOTB/s1600/floating+navigation+bar1.JPG" /></a></div> <div> <br /></div> <div> <br /></div> <i>Today I am Going to post about a cool and small but useful widget. It contains five useful buttons for navigation-</i> <div> <br /><div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV-JFo-IiyPTMxSBMbRiKnT3LWCBVTYWF9a0n3MgC5Ko_b3EhOoL_s95Uh36T_rudcw14O7NCS5f-TEfQq2kbR3NycOv9sg0rpsDJKRJCPfm-0DaS9emevEtHRMUjcxXK7IESZ5lL98Dv/s1600/floating+navigation+bar.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfV-JFo-IiyPTMxSBMbRiKnT3LWCBVTYWF9a0n3MgC5Ko_b3EhOoL_s95Uh36T_rudcw14O7NCS5f-TEfQq2kbR3NycOv9sg0rpsDJKRJCPfm-0DaS9emevEtHRMUjcxXK7IESZ5lL98Dv/s200/floating+navigation+bar.png" width="78" /></a><div> <br /></div> <span style="color: #666666;">1.Older Posts</span></div> <div> <span style="color: #666666;"><br />2. Newer Posts</span></div> <div> <span style="color: #666666;"><br />3. Reload Page</span></div> <div> <span style="color: #666666;"><br />4. Home</span></div> <div> <span style="color: #666666;"><br />5. Back to top</span></div> </div> <div> <br /></div> <h3 style="text-align: left;"> <br />Steps to add This widget:</h3> <div> <br /></div> <h3 style="text-align: left;"> <span style="font-weight: normal;">Step 1. Go to Blogger Dashboard >> Design >> Edit html and find the tag below</span></h3> <br /><blockquote class="tr_bq"> ]]></b:skin></blockquote> <div> <br /></div> <div> <h3 style="text-align: left;"> <span style="font-weight: normal;">Step 2. Paste before/above the following code:</span></h3> <br /><blockquote class="tr_bq"> #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}<br />#float-menu ul{padding:0}<br />#float-menu li{margin:5px;list-style-type:none}<br />#float-menu li,#float-menu li a{width:24px;height:24px}<br />#float-menu li a{float:left}<br />#float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQ0Za5SQAGezKsa4qNrOTcACT8xCM6HGRmRB2-GykLhfa28IsgyUXt8guj-rMiUKaKS2ofcMhDS0qR0ZMdm83CmkO1ZdPMrLNuHVxzH6VnHXkE3b853bPQQBBDxkS5ycLM7okDu2jA4Kx/s1600/float+menu.png)}<br />#float-menu #menu-right a{background-position:0 -120px}<br />#float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px}<br />#float-menu #menu-left a{background-position:0 -24px}<br />#float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px}<br />#float-menu #menu-random a{background-position:0 -48px}<br />#float-menu #menu-random a:hover{background-position:-24px -48px}<br />#float-menu #menu-home a{background-position:0 -72px}<br />#float-menu #menu-home a:hover{background-position:-24px -72px}<br />#float-menu #menu-top a{background-position:0 -96px}<br />#float-menu #menu-top a:hover{background-position:-24px -96px}</blockquote> <div> <br /></div> <h3 style="text-align: left;"> <span style="font-weight: normal;">Step 3. Now find this tag:</span></h3> <div> <span style="font-weight: normal;"><br /></span></div> <blockquote class="tr_bq"> <b:includable id='main' var='top'></blockquote> <div> <br /></div> <h3 style="text-align: left;"> <span style="font-weight: normal;">Step 4. Just after it, add the code below:</span></h3> <br /><br /><blockquote> <div id='float-menu'><br /> <ul><br /><li id='menu-right'><br /><b:if cond='data:olderPageUrl'><br /><b:if cond='data:olderPageUrl != data:blog.url'><br /><a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a><br /></b:if><br /></b:if><br /></li><br /><li id='menu-left'><br /><b:if cond='data:newerPageUrl'><br /><b:if cond='data:newerPageUrl != data:blog.url'><br /><a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a><br /></b:if><br /></b:if><br /></li><br /><li id='menu-random'><br /><script type='text/javaScript'>//<![CDATA[<br />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))};<br />//]]></script><br /><script type='text/javaScript'>//<![CDATA[<br />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>');<br />//]]></script><br /></li><br /><li id='menu-home'><br /><a expr:href='data:blog.homepageUrl' title='Home'/><br /></li><br /><li id='menu-top'><br /><a href='#' title='Back to top' rel="nofollow"/><br /></li><br /></ul><br /></div></blockquote> <i>Comment if you like the template... </i></div> </div>

How to add a floating navigation bar in blogger blog?

Kaushal Srivastava 2 05:33

Today I am Going to post about a cool and small but useful widget. It contains five useful buttons for navigation-  1.Older Posts 2. Newer Posts 3. Reload Page 4. Home 5. Back to top Steps to add Thi…

Read more »