Search

Awesome get to top buttons widget for blogger

you must have seen in several websites that the moment you scroll down you get a back to top button,which indeed looks very trendy,if you want this thing on your blog this is the right post
the first get to top is the one being used in flipcart

1. rocket get to top button
you must have seen in flipcart and our blog the cute rocket flying when you press it,its a smooth button redesigned by skillblogger now known as trueblogtips,this also gives your blog a diwali festive look,the cute thing about it is when hover the boy closes eyes
see demo












steps 


  • go to blogger dashboard
  • backup your template
  • find</body> and paste the given code ABOVE it  
<style><!–
#skillbacktotop{
background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Etipkp0z9rRdRWdgdvStoJrXg6HCZ-yWUUkebFyprCQWDkEoHj4P7zo3sev9_la3_IJZnbx3M0JUnDT2nmGSjbbS3AY5zn4AahM8QWmMDgrhDBWRyMd-ghd-lZBqNXAb-NVzfDPGQCiq/s1600/back-to-top-sprite-30224d9b.png&#39;) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
z-indez:1;
}
#skillbacktotop:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Etipkp0z9rRdRWdgdvStoJrXg6HCZ-yWUUkebFyprCQWDkEoHj4P7zo3sev9_la3_IJZnbx3M0JUnDT2nmGSjbbS3AY5zn4AahM8QWmMDgrhDBWRyMd-ghd-lZBqNXAb-NVzfDPGQCiq/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
–></style><!– Back to top button by Deep Sinha –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js”>// <![CDATA[
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#skillbacktotop").removeAttr("href");$("#skillbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#skillbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#skillbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
// ]]></script>
<!– Code provided to you by skillblogger Blog –>
<a id=”skillbacktotop” href=”#”></a>
2.cloud get to top
this indeed funky but flat and cool button,for kid blogs or when hovered it turns purple

<style><!–
#deltageekzbacktotop{
background: url(&#39;http://www.kidspot.com.au/babyclub/product-information/images/back_to_top_button_blue.png&#39;) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
    z-indez:1;
}
  #deltageekzbacktotop:hover{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUTvE_k1VvYrJZPN9PV5kGlJkIOrfwE2RK01m6MieA7t1BFZ8NPyA9cGsmmjB5to9fQ1DfoJswxVwbarBr64V-bEJAEnt4-rpaKBInnfHCdDy2J8gpJ-qLvsV2BAmD71fvKz3AC21jcF05/s1600/back_to_top_button_purple.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by supreeth -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#deltageekzbacktotop").removeAttr("href");$("#deltageekzbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#deltageekzbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#deltageekzbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<!-- Code provided to you by deltageekz  -->
<a href='#' id='deltageekzbacktotop'/>

3.cute girl get to top button









#deltageekzbacktotop{
background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggeM_a9WfuR6isTiH1K-ycK4288W1mRKg1pyghdiUir28mTutYlbG8I6g1bC4udfmm64AMP_TPkbSq8coYaP35Wp7zN-65by9IoEu7rIpyvMGzkexyDuTAMa_C9hDwbE1lZ0O-UyO0WfE/s1600/tumblr_static_tutor-back-to-top-button.png&#39;) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
    z-indez:1;
}
  #deltageekzbacktotop:hover{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggeM_a9WfuR6isTiH1K-ycK4288W1mRKg1pyghdiUir28mTutYlbG8I6g1bC4udfmm64AMP_TPkbSq8coYaP35Wp7zN-65by9IoEu7rIpyvMGzkexyDuTAMa_C9hDwbE1lZ0O-UyO0WfE/s1600/tumblr_static_tutor-back-to-top-button.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by supreeth -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#deltageekzbacktotop").removeAttr("href");$("#deltageekzbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#deltageekzbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#deltageekzbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<!-- Code provided to you by deltageekz  -->
<a href='#' id='deltageekzbacktotop'/>

finaly
if you want to change the image and put your own change the image link and have fun!

Click here for comments 0 comments:

thankyou for commenting