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 666; to 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.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>
and then click Save Template
And you are done.
And you are done.
0 Comments
Be the first to comment!
Don't just read and walk away, Your Feedback Is Always Appreciated. I will always reply to your queries.
Regards:
Noble J Ozogbuda
Back To Home