October 2013 | PreToPro Blogger

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?

Today I am Going to post about a cool and small but useful widget. It contains five useful buttons for navigation- 1.Older Po...

5 tips to improve Alexa Rank Quickly

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpaclkE-304p3_OR5aj_dLsciGvmfSEukSklQVsN079x5evB4Xrj6p4sMUMb6L29M9wi29r_9G1y4er7VjTTJBER1yguFa8y0HGwGqJYLSPxnyxLViW40kuANecEyQ29sWejJhcLpPVK4G/s1600/improve-alexa-rank.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpaclkE-304p3_OR5aj_dLsciGvmfSEukSklQVsN079x5evB4Xrj6p4sMUMb6L29M9wi29r_9G1y4er7VjTTJBER1yguFa8y0HGwGqJYLSPxnyxLViW40kuANecEyQ29sWejJhcLpPVK4G/s320/improve-alexa-rank.png" width="304" /></a></div>
<br />
<br />
Every Webmaster (Site-owner) knows what Alexa is and what it does. So Today I will discuss about how to increase your site's Alexa Rank Drastically in just few weeks. There are many ways to improve your alexa rank, some good some bad, Some work, some don't. So which one to choose??<br />
<br />
<b>Recommended</b> : <a href="http://pretoproblogger.blogspot.com/2013/08/what-is-alexa-and-how-to-claim-your.html" target="_blank">What is Alexa and how to claim your Blog on Alexa?</a><br />
<br />
Here are few methods that are tested and that really work (I too use them.) :<br />
<br />
<b>Install The Alexa Toolbar :</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2nAIoWaaQFgwlDkbHbE0PwPX5PQyVpeKHfb2P4GYY0IWRh4UhfLYtKbcyzWI61UwWgnfJXwEWlnwBWqAPlV0b_jh7lTjm5n95NUDcN6NgSbjZWxp8UbIb52qRIqYJx2uCwbmhQWbfvXY/s1600/alexa-toolbar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2nAIoWaaQFgwlDkbHbE0PwPX5PQyVpeKHfb2P4GYY0IWRh4UhfLYtKbcyzWI61UwWgnfJXwEWlnwBWqAPlV0b_jh7lTjm5n95NUDcN6NgSbjZWxp8UbIb52qRIqYJx2uCwbmhQWbfvXY/s400/alexa-toolbar.png" width="400" /></a></div>
<br />
<br />
One of the most trusted and working method is to Install the alexa toolbar in your browser and set your blog/Site as the homepage of your browser. (Click Here To <a href="http://www.alexa.com/toolbar" rel="nofollow" target="_blank">install Alexa Toolbar</a>)<br />
<br />
<b>Add Alexa Rank widget to your blog : </b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.alexa.com/data/details/main?url=http://pretoproblogger.blogspot.com" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibzAHPgH8MQIUh8jDQzDQVo6OtKWmyocdyIRSZww-rFdfouNSHvJlTHJ0UEaJteUlbiyhYoCokEFrDnaja1pjMf8SJJDJVCdnKr8RsU1h53UOHDhCSuYMjf8TfuI8DgAWtwEPr2L09zLUV/s1600/traffic-rank-widget.png" /></a></div>
<br />
This is the other basic method and works well. You will see change within a week.<br />
<br />
<b>Promote Your own Blog's alexa Toolbar :</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://s3.amazonaws.com/com.alexa.toolbar/atbp/LnEmk_/download/index.htm" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXivsIxdJs-wypAPSm_ygQNzcTH4q5MCJJD4cIqmIX74GqbQ45VJI15AbRZQuoKFShy-wsw2qs1SEcj9W16bZxkB611XAk7v8iWjgZXT4HS7nAf1EW1L9Whe66TqPQWduXZjXv5oa87zW3/s1600/toolbar+download.png" /></a></div>
<br />
Yes you can make your own Blog's toolbar through Alexa. Just Sign up for alexa (If you have an account just log in). Then Click on create toolbar and make your own toolbar. Now all you have to do is promote your own toolbar. You can do it so by placing a small widget to install your blog's toolbar provided by alexa in your blog.<br />
<br />
<b>Get Friends and Your blog visitors to review your blog on Alexa : </b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.alexa.com/siteinfo/http://pretoproblogger.blogspot.com?p=rwidget#reviews" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSeSquiUrzWGmIIUtSp6fPIwP4Ac_4GLAgUpHRXkpU8CVDY1l6vzNsNoutyhb4v2p6g3HGohdp6cx9UCAEDe2msB6IUWjNu8-hdUVQRFaZMS_kTMcxNSSf76TZ-eRastwa-a4amoykZx3/s1600/Write-a-review-on-alexa.png" /></a></div>
<br />
You can ask your friends and visitors to review your blog and rate it on alexa. You can do so by adding a review widget(see Above fig.) on your blog<br />
<br />
<b>Post Unique Content : </b>The last but not the least point is to write unique content in your blog bringing you highly targeted visitors from various countries and thus improving your Alexa Rank.<br />
<br />
<i><b>Apply This 5 tips and I am sure you will see positive results within few weeks...</b></i><br />
<br />
<i>Comment if you know some more good tips to increase Alexa Rank fast.</i></div>

5 tips to improve Alexa Rank Quickly

Every Webmaster (Site-owner) knows what Alexa is and what it does. So Today I will discuss about how to increase your site's Alexa...

Advertise Here

How to add a floating navigation bar in blogger blog?

5 tips to improve Alexa Rank Quickly

Get FREE updates on your Email | RSS

Popular Posts

Comments

Blog Archive