Thursday, December 22, 2011

බ්ලොගයට ආකර්ශණීය Back To Top බොත්තමක්

                   
                           ඉතාමත් පහසුවෙන් ඇතුලත් කර ගත හැකි ආකර්ශණීය Back To Top බොත්තමක් ඔබේ බ්ලොග් අඩවියට ඇතුල් කර ගන්න.පහත පියවර අනුගමනය කරන්න.

     1.ඔබේ බ්ලොග් අඩවියේ Design වෙත පිවිසෙන්න.
     2.Add New Gadget වෙත ගොස්  HTML/java script තෝරන්න.
     3.පහත code  එක ඒ තුළට paste කරන්න.
                       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
   
    // fade in #back-top
    $(function () { 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
<style>
#back-top {
position: fixed;
bottom: 30px;
margin-left: -170px;
}
#back-top a {
width: 45px;
display: block;
text-align: center;
font: 8px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #666;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover {color: #000;}
/* arrow icon undefinedspan tag) */
#back-top span {
width: 45px;
height: 45px;
display: block;
margin-bottom: 7px;
background: #777 url(http://1.bp.blogspot.com/-xFBEcD6WrPE/TtzFEwE6k4I/AAAAAAAAAVg/rHr7-Zc8fMI/s1600/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover span {   background-color: #000;}
</style>

<div id="back-top" style="display: block; ">
<a href="#top"><span></span><font><font>Top</font></font></a>
</div>
      4.අදාළ gadget එක save  කරගන්න.

No comments:

Post a Comment

හිතට දැනෙන දේ ලියලා යන්න