Search

Wednesday 16 September 2015

How to add Floating Button for Newer and Old Post?

How to add Floating Button for Newer and Old Post by BloggingFunda

Bloggers are just writing posts almost every day.

But few are aware about the bounce rate of their blogs.

Do you think that if your blog's bounce rate is high then you will not get organic search result.

This is new policy of Google Search Engine and no one is trying to reduce the bounce rate of blogs.

Do you know why?

Because, blogging is an art and every blogger can not be a architect.

If you really want to know about the core level blogging skills then you must dig each line of code of you blog's template to get the maximum in all levels of blogging.
  1. Organic Search Traffic
  2. Search Engine Ranking
  3. Reduced Bounce Rate of Blog
  4. Better Reader's Engagement...and so on....
No, I am not going to discuss about above topics here except the 3rd one "Reduced Bounce Rate of Blog".

If your blog is having reduced bounce rate, then I am sure that your content will have more engagement and more readership and also better search engine ranking.

To improve the bounce rate, I am going to discuss about one simple trick, that is valid as per google search engine algorithm.

Do you want to reduce your blog's bounce rate?

I hope you all would love to do so.

Because, if the bounce rate of your blog is low, then the plus point is that the readers engagement with your blog is much better than the high bounced rate blog.

if it happens, then, google algorithm will keep a note about the low bounce rate blogs and by doing so, google will show your blog content in maximum relevant search.

And you will get organic search result and more chances of conversion and click through rate (CTA).

So,

What is the best way to reduce bounce rate?

For this you have to make some changes to your blog's template. And for taking backup here is the step by step guide:-
Once you have taken the backup of your blog template, follow the below step by step instructions to add floating button for newer and old posts.
STEP1 - Log in to your Blogger dashboard via www.blogger.com
STEP2 - Click on Template
STEP3 - Click Edit HTML tab (Back up your blog template)
STEP4 - STEP5 - Use CTRL+F to find
]]></b:skin>
STEP5 - Now paste the following code above the ]]></b:skin>


.leftArrow a 
{
  -moz-transition:.2s ease-in;   
  -o-transition:.2s ease-in; 
  -webkit-transition:.2s ease-in; 
  left:-5px; padding:25px 20px;  
  position:fixed; top:45%; 
  transition:.2s ease-in; 
  z-index:100;
}
.leftArrow a:hover 

  -moz-transition:.2s ease-in; 
  -o-transition:.2s ease-in; 
  -webkit-transition:.2s ease-in; 
  color:#fff; 
  left:0; 
  transition:.2s ease-in;
}
.rightArrow a 
{
  -moz-transition:.2s ease-in; 
  -o-transition:.2s ease-in; 
  -webkit-transition:.2s ease-in; 
  padding:25px 20px; 
  position:fixed; 
  right:-5px; 
  top:45%; 
  transition:.2s ease-in; 
  z-index:100;
}
.rightArrow a:hover 
{
  -moz-transition:.2s ease-in; 
  -o-transition:.2s ease-in; 
  -webkit-transition:.2s ease-in; 
  color:#fff; 
  right:0;
  transition:.2s ease-in;
}
.arrowNav a 
{
  background:#000; 
  color:#fff; 
  font-size:25px; 
  text-decoration:none;
}

STEP6 - Again use Ctrl+F to find <b:includable id='nextprev'>
STEP7 - Now select all code starting from <b:includable id='nextprev'> untill </b:includable> and replace all selected code with the following new code:-
 

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<div class='arrowNav'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<div class='leftArrow'>
<a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'>
<span class='arrow'/>
<span class='prevnext'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEMuWTLyeR0eUYyqsutR6EKtp7VLzcNyXtrXZIyVSM_n_auEYmPRayICpM4NImNzXEV6D8H-cXx8Q9jhX0S3NV6Y3_dHKVvfzj7Ne_jwuyriCcJwTaD1NYUJQ5t3oAN0nNG86nIm9UgI/s1600/gr8erArrow.png"/>
</span>
</a>
</div>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<div class='rightArrow'>
<a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'>
<span class='arrow'/>
<span class='prevnext'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_r45lkdZfTf9cwXa_nqvGSxH7VfRnkR6j4DJBq15QQZ6BQAdh6jT0NZbiswURNBrpJuz6AFqs1qKVALbD1n6AqeT1zc9No6FbWnCYlhxCH4ak9vDec53KQj2aXNFz8RZc2w30hwOeKR0/s1600/lessArrow.png"/>
</span>
<br/>
</a>
</div>
</span>
</b:if>
</div>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/>
</a>
 <b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/>
</a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>

STEP8 - Now save the Template, and you are done.


After implementing above changes to your blog's template, you will decrease your blog's bounce rate and your readers will have an option to view more posts.

This technique is tested with an XML software and also I have tested on my few blogs. It is working fine.

If you think that this little technique is worthy for you and other bloggers, please share this with others.

You can also follow BloggingFunda - A Community of Bloggers on our Google Plus page.

2 comments:

  1. Are you looking for free Twitter Re-tweets?
    Did you know that you can get these AUTOMATICALLY AND TOTALLY FOR FREE by using Like 4 Like?

    ReplyDelete