Menambahkan Tombol Back To Top Pada Blogger
Kamis, 13 Januari 2011
, Posted by MaJza at 22.13
Jika blog sobat termasuk kedalam blog yang "Panjang", hehehe. Menambahkan tombol back to top pasti akan lebih mempermudah pengunjung blog sobat ketika akan scolling ke batas atas blog sobat. Ketika pengunjung selesai membaca postingan sobat, lalu menekan tombol ini maka dalam sekejap pengunjung blog sobat akan kembali ke batas atas blog. Menarik bukan?
Beginilah screenshot nya:
Caranya mudah saja
1. Buka "Rancangan" lalu "Edit HTML"
2. Cari kode berikut
</body>
3. Letakkan kode dibawah ini diatas kode tadi.
<a href="#" id="backtotop"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoNUIH6bnpc8jR7Y_vmUeUb13YKDypSQxf7bZITpLylQArCN10gJlwkj-jOHkNAE1ovMzHbbaAHhIBZ_DqITkjHPcKJY5fdhDOqoHH2msyiCoxe2p4gYyBF-gWa3M89BuNe7tsUIE8bQAD/s800/backtotop_www.cr0wja.co.cc.png'/></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
*Scroll to top
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
*Scroll to top
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
4. Cari kode berikut
</b:skin>
5. SIsipkan kode berikut diatasnya
#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
6. Simpan template, lalu lihat hasilnya. Jika sobat mengalami kesulitan, tanyakan saja dengan berkomentar. OK
Sumber : http://www.cr0wja.co.cc/2011/01/menambahkan-tombol-back-to-top-pada.html#ixzz1AzHxZzah
Currently have 0 komentar: