5 Useful Blogger Functions With Vertical Menubar

This is cool widget to blogger.It include  five useful function menubar. It will appear on left side of blogger.You can try to add it to your blogger. How To Add Blogger  Vertical Stylish Css3 Side Menubar. try below steps.

1. Go to Older Posts
2. Go to Newer Posts
3. Reload Page
4. Home
5. Back to top

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

#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/AVvXsEimURCjZ7zJHe9XlMEniBK5xmI9FBlBwMX11dP7H47xDlhfVaaUlPB5ABTJGcFc9qBus8wpidC7HoW_JBcAqpvN72j-Ybh3dmXnslExkn19yqW6YZjeS718DO8gVFwjlLghQt2_00vT1B8s/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}

5. Now Find this code  by using Ctrl+F <b:includable id='main' var='top'>

6.  Paste below code Before <b:includable id='main' var='top'> 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>

7. Now save your template
 you are done.