Cara Buat BACK TO TOP Dalam Blog

tutorial, cara, back to top, blog
Adakalanya kita buat posting yang panjang sangat sampai mata pelawat blog pun layu dan tewas dalam kelemasan. Oleh itu, kita kurangkan kepenatan mereka dengan meletakkan butang BACK TO TOP. 

Dengan pemasangan Back To Top dalam blog, pelawat hanya perlu klik dan sepantas kilat akan dibawa je bahagian paling atas. Macam magik kan? Anda bole buat magik ni dengan meletakkan kod yang berikut.



 tutorial, cara, back to top, blog

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><" src="http://static1.squarespace.com/static/531c9d7be4b063fa3e95cc97/t/533f2b4ee4b0d9f7ba807eb4/1396648783614/"/></a></div>

Cara letak kod Back To Top  :


1. Klik pada layout

 tutorial, cara, back to top, blog

2. Klik Add Gadget ( Sebaiknya pilih yang paling bawah )
3. Pilih HTML/JavaScript
4. Copy Paste kod tersebut dalam content dan tekan save.
5. Berjaya


Apa? Butang Back To Top ni tak cantik? 


Anda boleh cari imej lain dan gantikan pada url merah tersebut. Untuk memudahkan anda, saya sediakan koleksi butang Back To Top daripada google.

Copy kod ni dan letakkan di Add Gadget  : 


Grey


 tutorial, cara, back to top, blog
<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><" src="http://4.bp.blogspot.com/-BqT3X_uI0M8/VO9u6djAuyI/AAAAAAAABRo/MGmKZwF_cho/s1600/Back_to_top_icon.png"/></a></div>

Blue 



 tutorial, cara, back to top, blog

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><" src="http://2.bp.blogspot.com/-qrqR533gJMI/VO9uAvCqrXI/AAAAAAAABRc/kiU9UypIkoQ/s1600/back-top-button.png"/></a></div>

Owl


 tutorial, cara, back to top, blog

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><" src="http://1.bp.blogspot.com/-nAS04dM-Uyw/VO9u6fNys7I/AAAAAAAABRk/hjFJpYmpDhc/s1600/BackToTopButtonRevised_zps41897e9f.png"/></a></div>

Besi


 tutorial, cara, back to top, blog
<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><" src="http://2010.igem.org/wiki/images/8/87/Top.png"/></a></div>

Pink


 tutorial, cara, back to top, blog
<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><" src="http://benjaminandrewmoore.com/back%20to%20top%20button.png"/></a></div>

Anime


 tutorial, cara, back to top, blog

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><" src="http://3.bp.blogspot.com/-lkY3AfAhPE4/UnOLfmRa_WI/AAAAAAAAAkc/v8R7t6HygRY/s1600/tumblr_static_tutor-back-to-top-button.png"/></a></div>
Sumber Kod : Sumber : http://lbtblogging.blogspot.com/