Hello readers!! Adding a back to top button
widget in blogger is very useful stuff and it is one of the most
important widget which you need to install for you visitors to make them
feel comfortable with your blogs. In some situations the blog post
which is long enough or having more over 100 comments you really need
this kind of widget so that the visitor can easily reach to the top of
your blog so the visitor will not face any tiredness while scrolling up
to the page.
Now lets get back to our widget. The widget looks very cute and
smooth. lets see a demo before adding the widget into your blog.
How to Install Rocket Back To Top Button Widget For Blogger :-
The steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.- Go To Blogger.com >> Your Blog >> Template
- Now Backup your template.
- Then select Edit HTML >> Proceed
- Search for and just below </body> under it paste the following code.
<style>
#rocketbacktotop{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gd3BU7cgcWPWgwuhMkU6mXAe9M_2U921zGCReWe9mivpZNPbgDNuqbNQiCcwssRSpfMW80T6R7XmZpekUFyJCo_TRFrcyZZG1Tsgk03ef_TNOMdB_kcI7MQFuU9tlo8JqMWSuV-JAwAu/s1600/back-to-top-sprite-30224d9b.png') 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
z-indez:1;
}
#rocketbacktotop:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gd3BU7cgcWPWgwuhMkU6mXAe9M_2U921zGCReWe9mivpZNPbgDNuqbNQiCcwssRSpfMW80T6R7XmZpekUFyJCo_TRFrcyZZG1Tsgk03ef_TNOMdB_kcI7MQFuU9tlo8JqMWSuV-JAwAu/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by Deep Sinha -->
<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)
{$("#rocketbacktotop").removeAttr("href");$("#rocketbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#rocketbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#rocketbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<!-- Code provided to you by skillblogger Blog -->
<a href='#' id='rocketbacktotop'/>
- All Done : Now everything is completed just Save your Widget by pressing Save button.
Get Free UpDates ?
If yes, Then enter your email below to get
more such great articles in your inbox
Powered By HAmza Gujjar Get Free !
Posts
0 comments:
Post a Comment