How To Make "Back To Top" Navigation Link

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.

To make this widget, we must declare the CSS Code of the widget first (declare the name and parameters that set the display widget in browser) then write / put the widget code itself (div id="widget-name") in its position (bottom)



In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS above ]]></b:skin> 

/* Credit

----------------------------------------------- */

#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;

}

We 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.



Next, Copy this Widget Script and Paste at the bottom of your HTML Code above the closing tag </body>

<div id='credit'>



<div id='creditleft'>

<p><b>&#160;&#160;&#169; <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>&#160;&#160;</b></p>

</div>



</div> <!-- end credit -->

The final position will be like this :

Widget Script

</body>

</html>

That'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