Text Back To Top Link with different styles And Colors

0 64
Text Back To Top Link with different styles And Colors

Step 1
Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following code.
]]></b:skin>
And before it add this code
#backtotop {
width:100px; /* Change Box Width*/
background:#F4FFBF; /* Change background color*/
border:1px solid #ccc; /* Change Border Style*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666; /* Change text color*/
text-decoration:none;
}
And please change it’s properties to fit and blend with your blog template,
Change 100 to lower or higher number to increase or decrease the size of the box.
Change 1px To change the border width.
Change #ccc to your favorite color code change the border color.
Change F4FFBF to your favorite background color code.
Change 666to your favorite Text color code.

Note : You can get your favorite color codes via our new hex color codes generator here
Step 2
Find the following Code :
</body>
And before it, Paste the following code.
<a href="#" id="backtotop">Back to top</a>
To change the text on the button, just change Back to top to what ever you want,
Step 3
Find the following code
<head>
And paste this 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 
And you are done.


Related Articles: More from author

Leave A Reply

Your email address will not be published.