Membuat Tombol Back To Top di Blogger

Membuat sebuah tombol back to top (kembali ke atas) dengan efek geser yang halus ke atas bisa jadi merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol ini dibuat dengan tampilan dan sentuhan yang cukup elegan. 

Tutorial dibawah ini menunjukan cara membuat tombol back to top dengan mudah dan cukup singkat, hanya memerlukan waktu beberapa menit saja. Berikut langkah-langkahnya.

1. Login ke Blogger.

2. Klik Template kemudian Edit HTML.

3. Klik kiri 1 kali di kotak template.

4. Tekan Ctrl+F untuk pencarian cepat.

5. Cari kode </head> menggunakan kotak pencarian, kemudian enter.

6. Masukan kode di bawah ini diatas kode </head> 

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

<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>

Keterangan :

Warna Biru adalah jarak tombol back to top muncul dan tersembunyi

Warna Hijau adalah kecepatan pada saat melompat ke atas

9. Cari kode ]]></b:skin> atau </style>

10. Masukan kode CSS dibawah ini diatas ]]></b:skin> atau </style> di bagian head.

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

Keterangan :

Warna Hijau adalah posisi dari tombol tersebut.

11. Cari kode </body>

12. Masukan kode di bawah ini di atas </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgViQoGk0H0RH8c9-NdMe-B48wO5AOxpAjimW7rEQ7nYpHyU-nBcx109rQqXf4grrhG_PlzxYmnwcYPJYyGKl7vX1Q58FJaR4z_FyvUZu8gxQSCYLPufFdKorqiK6W3TLI-XpqCknkg0mU/s1600/backtotop.png'/></div>

Keterangan :

Warna Biru adalah link dari gambar tombol back to top, sebaiknya diganti / disave dan upload menggunakan tempat upload gambar masing-masing.

13. Save Template dan lihat hasilnya.

Demikian cara membuat tombol back to top dengan tampilan yang cukup menarik, semoga dapat bermanfaat.

Ditulis Oleh Unknown Tanggal Wednesday, October 15, 2014 | 1:31 AM

Bagikan Artikel ini Di :

Tweet