Tutorial Cara Membuat Tombol Back To Top di Blog


Zona Tutorial - Tutorial kali ini saya akan membagikan kepada anda bagaimana Cara Membuat Tombol Back To Top di Blog. Ada beberapa alasan sehingga banyak Blogger memasang tombol scroll to top ini ke blog mereka. Tentunya untuk mempermudah pengunjung blog dalam menjelajahi blog.


Mengapa tombol Back To Top ini diperlukan?... Ketika admin blog memposting artikel yang panjang, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artilel tanpa perlu menggeser scroll ke atas.


Tombol back to top memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang dinamis dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.


Tutorial Cara Membuat Tombol Back To Top di Blog

Tombol yang akan dibuat kali ini akan sama seperti gambar diatas

Cara Membuat Back To Top di Blog

1. Masuk ke dasboard blogger.
2. Klik Template dan Edit HTML
3. Gunakan tombol (Crtl+F) pada keyboard untuk mempermudah melakukan pencarian script.
4. Masukan kode di bawah ini diatas kode </head> Tapi jika sudah ada kode ini di template anda, maka lewati langkah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/> 

5. Masih di tempat yang sama - Cari kode </head>
6. Masukan script dibawah ini di atas kode </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script> 

7. Cari kode ]]></b:skin>
8. Masukan kode CSS dibawah ini di atas ]]></b:skin>

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

9. Cari kode </body>
10. Masukan kode di bawah ini tepat di atas kode </body>

<div id='ScrollToTop'><img alt='Back to top' src='
https://aws-dist.brta.in/2014-12/5613e24c300be1c83c32be12d2af8932.png'/></div> 

11. Jangan lupa Save Template dan lihat hasilnya.

Sobat juga bisa mengganti gambar dengan mengganti link/URL https://aws-dist.brta.in/2014-12/5613e24c300be1c83c32be12d2af8932.png di atas, dengan gambar lain yang tersedia banyak di google.

Sekian tutorial kali ini, semoga bermanfaat.......

0 Response to "Tutorial Cara Membuat Tombol Back To Top di Blog"

Post a Comment

Iklan Atas Artikel

Iklan2

Iklan Tengah Artikel 2

Iklan Bawah Artikel