Memasang Back To Top Button Pada Blog

Memasang back to top button sangat penting supaya memudahkan pengunjung, bila sebelumnya Saya share ihwal Membuat Back To Top Unik Dengan Cacing. Kali ini aku share back to top button sederhana. Pada versi ada agak sedikit berbeda, ialah ada penambahan efek smoothing.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jikalau belum pasang jQuery ini diatas arahan </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Simpan arahan ini diatas arahan ]]></b:skin> atau </style>

/*Back To Top*/ #top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;} #top:hover{background-color:#E73138}

3. Kemudian simpan arahan ini diatas arahan </body>

<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK9Lb0qbnzmWE4rIRo00lThfxDR1tStXBFWTWkBo_6J7iBHkTIYLTqS6-Yq4RQxbhtjxT5RaBV5HXyo0ulRTkmmRARG_yQJyKgePF3WtRL6ZJOHBe-_TGHtLyn9G_XJzMTmgI-Ei0Dz65R/s1600/btp.png'/></a> <script type='text/javascript'> //<![CDATA[ //Scroll Top (function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery); //]]> </script>

Demo

Sumber http://kang-mousir.blogspot.com

Artikel Terkait

Memasang Back To Top Button Pada Blog

4/ 5

Oleh Admin