Cara Membuat Tombol Back to Top Di Blogger

Caraono.com_Cara Membuat Tombol Back to Top di Blogger._Tombol back to Top adalah Sebuah tombol kecil yang di pasang di bagian bawah halaman blog yang di gunakan untuk kembali ke bagian atas halaman blog atau website. Secara ringkasnya Tombol Back to Top itu ialah tombol untuk kembali ke bagian atas blog dengan satu kali "klik".

Tombol Back to Top di perlukan kehadirannya di dalam sebuah blog. Tombol ini memudahkan para user atau pengunjung untuk kembali ke bagian atas blog dalam satu klik, tanpa harus men-scroll mousenya atau "mengusap-usap" jarinya di touch pad atau layar smartphon-nya.

Tombol back To top ini memiliki peranan yang penting bagi sebuah blog atau website dengan konten halaman yang cukup panjang, oleh karena itu pada setiap blog atau website di pasangi tombol back to top di blog  untuk memudahkan para pengunjung blog.

Lalu bagaimana Caranya membuat tombol back to top di blog ?
Ada banyak cara untuk membuat tombol back to top di blog yang sudah di share oleh kawan-kawan blogger yang baik hatinya. Oke pada kesempatan kali ini Caraono.com akan menshare cara membuat tombol back to top di blog.

Oke, Mari ikuti langkah-langkah cara membuat tombol back to top di blog.
1. Login ke Blogger sobat
2. Pada dashboard blog klik template
3. Setelah itu Klik Edit HTML,
4. Lalu Tekan CTRL F untuk memudahkan pencarian
5. Pada kotak pencarian cari kode </head>
6. Setelah itu pasang kode di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/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>

Note :   Jika kode jquery sudah ada di blog sobat maka tidak usah di pasang lagi

7.  Setelah itu cari kode ]]></b:skin>
8. masukkan kode Css di bawah ini tepat 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. Setelah itu cari kode </bode> lalu pasang kode di bawah ini tepat di atas kode </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLEFT5QVzLbON4x21RWnsfsY32Fm46m5q_f697tt2Nam0S-EqnstDKsG01jn53XWEmSvmBthXq-rO6A8nSNwIfI-M2eA9YSPk2ZYo1cbW3iE28pHDzGWm-qFqixSk76PPGjdN0WRls30/s1600/backtotop.png'/></div>

Note : Kode warna merah adalah gambar tombol back to topnya silahkan ganti dengan keinginan sobat

10. Langkah terakhir simpan template dan lihat hasilnya.


Demikianlah tutorial cara membuat tombol back to top di blog.
Terima kasih telah berkunjung dan membaca artikel singkat Cara mebuat Tombol Back To Top di Blog. Semoga setelah membaca menambah wawasan dan ilmu yang kita miliki.

Salam sukses untuk kita semua.
Bye-bye