How To Make "Back To Top" Navigation Link
>> Sunday, March 21, 2010
Back to Top is a Navigation link at the bottom of the web page. Provide by site owner to jump back to the top of the page.
Sometime when we visited a Website or Blog, In addition to interested in the main article, we are also interested in some "information" that (intentionally placed by the owner to attract visitors) is located at the top of a web page. After finished reading the main article, it would be very helpful if there is a navigation link to the top of the page, so we only need a single click to navigated away to the top page to continue explored another "information" that attracted us.
In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS above ]]></b:skin>
/* CreditWe are not going to discuss the CSS Code above, but if we read line by line you will get the "picture" of this widget display settings (please look at the bottom of this page to see the result of the setting...!!!). You can replace the parameters to match with your template. ex: backgrounds or fonts color.
----------------------------------------------- */
#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #444444;
font-weight: normal;
background: #777777;
}
#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 71%;
background: #ffffff;
}
#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 30%;
background: #ffffff;
}
#creditleft p {
margin: 0;
padding: 0
}
#creditright p {
margin: 0;
padding: 0
}
#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #444444;
text-decoration: underline;
}
#creditright a, .creditright a:hover, .creditright a:visited {
color: #444444;
text-decoration: underline;
}
Next, Copy this Widget Script and Paste at the bottom of your HTML Code above the closing tag </body>
<div id='credit'>The final position will be like this :
<div id='creditleft'>
<p><b>  © <a href='http://doit2us.blogspot.com/'>New Blogger Tips For Us</a> <i>Free Blogger Template</i> by <a href='http://doit2us.blogspot.com/'>Mc</a> 2010</b></p>
</div>
<div id='creditright'>
<p><b>Back to <a href='#outer-wrapper'>TOP</a>  </b></p>
</div>
</div> <!-- end credit -->
Widget ScriptThat's all, If you want to... You can replace the Blue with Your Link and Text... And last, do not forget to save your template, view your blog and... enjoy your new "Back to Top" widget
</body>
</html>
28 comments:
thanks!china wholesale wedding dresses
Thank you for sharing script of Sticky Post. i will use this in my project.
Very very thanks for posting this coding script. I must use it in my next project.
Thanks for providing with the coding segment. You have really done a good job. Good to see you here…
Awesome article! I have gradually become fan of your article and would like to suggest putting some new updates to make it more effective.
That a very nice article. I get complete information about the Sample Of Sticky Post from this article. So thank you very much to posting me such a wonderful article.
Thank you for this useful and very impressive article. I have learn a lot from this. Great work.
Thanks a lot for sharing the codes. Its useful indeed.
This guide has been a helpful tips for me, now my template had change from default, I just added some tweaks from it. Thanks.
Thanks a lot for imparting us this knowledge.
This source code is incredible..!
Wow, another great stuff to learn. Thanks:)
Thanks for taking this opportunity to discuss this, I feel strongly about it and I take pleasure in learning about this topic. If possible, as you gain information, please add to this blog with new information. I have found it extremely useful.
Interface Talent Network
Its worth to read this. Many thanks.
Thank you regarding talking over this matter. We concur together with your findings. The particular factors how the files stated are typical upfront in genuine encounters even help much more.
Best 42 Inch Flat Screen TV 2011
This blog is very cute. The web design is very appealing and eye-catching. The article is well-written and can be considered as an interesting one to read. I never regret of stopping by to your website.
ice cream maker reviews
I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.
baby mattress
Really impressed! Everything is very, very clear and open. You have shared a lot of valuable information.
Truly impressed! Everything is very, clear and also available. You've shared a lot of important information.
This is the best post on this topic I have ever read. I am really very impressed with it. Keep blogging!
Thanks, it's very good details of sharing and making individuals know about the projects that are happening to be performed. I believe I can easily discover better information here, thanks.
I honestly appreciated looking at your posting! You have top quality materials.
Now, I already know how to make back to top navigation link. You shared a simple post but very useful. Thank you so much!
I am pretty much amazed of the article content. I learned a lot from the interesting topics that are being discussed.
below you’ll find the link to some sites that we believe you must visit
marketing Austin
I certainly agree to some points that you have discussed on this post. I appreciate that you have shared some reliable tips on this review.
Very interesting blog. A lot of blogs I see these days don't really provide anything that attract others, but I'm most definitely interested in this one. Just thought that I would post and let you know.
I certainly agree to some points that you have discussed on this post. I appreciate that you have shared some reliable tips on this review.
Post a Comment