Social


How to add a Back To Top Image on your blog. Its quite easy. Just follow the below steps.





Step 1:

Log in to your blogger account. Go to Dashboard > Template > Edit HTML and find for this code.

]]></b:skin>

Add below code before it.

 #backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}





Step 2:

Now find for the following code.

</body>

Add below code before it

<a href="#" id="backtotop"><img src="Image-URL" alt="back to top" /></a>

After adding, change Image-URL with your favourite below image URL.






http://4.bp.blogspot.com/-NiQJqPtXVg0/USm1QrQWQtI/AAAAAAAABJw/up58ZS2FEv0/s1600/bttp-10.png






http://3.bp.blogspot.com/-9YF1gO-FIGo/USm1Qtl_cAI/AAAAAAAABJ0/IUPUNIGDBxE/s1600/bttp-12.png






http://2.bp.blogspot.com/-JsbwXutCUBg/USm1QgkRPdI/AAAAAAAABJ4/YiQ7iMUUUdw/s1600/bttp-11.png






http://2.bp.blogspot.com/-9lEi_yLlfpg/USm1RBt-EDI/AAAAAAAABKA/5izcofcUxhQ/s1600/bttp-7.png






http://2.bp.blogspot.com/-D0jxMxhQAmk/USm1RN1s9zI/AAAAAAAABKE/iR4wVcQvFuo/s1600/bttp-13.png






http://4.bp.blogspot.com/-lXdna1I1irY/USm16PWlq5I/AAAAAAAABKY/JeU7K5rAAek/s1600/download.jpg




http://2.bp.blogspot.com/-Grp5T7VjY54/URtofe_yBKI/AAAAAAAAA1Q/q_UqNbkNd_Q/s1600/backtotop.png





Step 3:

Now find for the following code.

<head>

And paste the below code after it.

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;


And then click Save Template.
Review

Post a Comment Blogger

Don't Comment irrelevant It will be deleted!

 
Top