Anda sudah melihat button "Back to Top" atau "Scroll to Top" di kebanyakan laman web? Button ini memudahkan para pengunjung untuk kembali ke bahagian atas website apabila semakin di scroll ke bahagian bawah website. Ini juga kemudahan bagi anda yang mempunyai post panjang.
Sebelum bermula, cuba scroll kebawah dulu, pasti akan muncul scroll button dan cuba tujukan mouse ke button, pasti juga muncul title 'Scroll to Top' dan cuba klik button itu. Jadi, anggap saja anda sudah faham apa itu "back to top button" dan terus ikuti langkah cara memasangnya dalam blog.
- Buka template manager. klik Template → Klik Edit html.
- Cari kod </body>. Tekan button
Ctrl +F → Paste kod tersebut → Enter.
Copy kod bawah ni dan paste tepat diatas kod </body>
<style type="text/css">
#ad-StoTop{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
width:100px;
background-color:#eee;
background-color:rgba(238,238,238,0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');
text-align:center;
padding:5px;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
color:#444;
text-decoration:none;
border:1px solid #c9c9c9}
</style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type='text/javascript'>jQuery(function(a){a.fn.scrollToTop=function(){a(this).hide().removeAttr("href");if(a(window).scrollTop()!="0"){a(this).fadeIn("slow")}var b=a(this);a(window).scroll(function(){if(a(window).scrollTop()=="0"){a(b).fadeOut("slow")}else{a(b).fadeIn("slow")}});a(this).click(function(){a("html, body").animate({scrollTop:0},"slow")})}});jQuery(function(a){a("#ad-StoTop").scrollToTop()});</script><a href='#' id='ad-StoTop' style='display:none' title='back totop button'>To Top!</a>
title='back to top button' & To Top! = Gantikan apa title yang diinginkan. Save template dan lihat hasilnya.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Tinggalkan kod javascript jika sudah ada di dalam template blog. Hapus skrip tersebut. Tidak boleh memasang lebih dari 1 pada template!
Happy blogging ya'll!


0 comments:
Post a Comment
Sila berkomen dengan menggunakan bahasa yang sopan dan mudah difahami.
No spam & komen anda HARUSLAH berdasarkan topik diatas.
Link aktif & komen dengan bersertakan iklan akan dipadam serta merta!