Monday 17 June 2013

BACK TO TOP OF PAGE BLOGGER WIDGETS

Go To Top of Page Widget For Blogger
It is not comfortable for visitors to scroll on longer posts to go to the summit of the page so here is the go to summit of the page widget for blogger. It will take you to the summit of the page when you click upon the icon named as back to summit or go to top at the end of the website or article.This widget has two benefits, first is visitors and readers does not need to scroll the mouse roller and that is why it is comfortable for them. Just click on the icon and you are at the top of the page. Below is the step by step method to install Back to top widget to blogger.


  • HOW TO ADD BACK TO TOP WIDGET TO BLOGGER

  • Go to blogger dashboard.
  • Go to template and then click on edit template.
  • Now hit Ctrl+F and search for this fragment of code ]]></b:skin>
  • Now paste the under code before the ]]></b:skin>


#indiatip {position: fixed;cursor: pointer;background: rgba(0, 0, 0, 0.78);color: white;padding: 10px 20px;border-radius: 3px;bottom: 22px;right: 90%;}
#topcontent {margin-bottom: 10px;}
.c_images img {width: 57px;height: 57px;}
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
<!--Widget By www.bloggerspice.com-->


  • Now search for this code </body>
  • And now paste the under code above the </body>


<a id='indiatip' title='Go to summit'>Go To Top</a>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#indiatip').show();
} else {
$('#indiatip').conceal();
}
});
$('#indiatip').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
//]]>
</script>

  • Now save the template and you are done.

0 comments :

Blogger Tricks And Tips Comment here

Related Posts Plugin for WordPress, Blogger...