NECTES Global Media Technology Website.

Text Back To Top Link with different styles And Colors

0 69
Read More:
1 of 119
More Publications You Missed!
1 of 119
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='https://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.

Newsletter

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.



Join 1,129 other subscribers.