Cara Menciptakan Tombol Back To Top Di Blogger

Caraono.com_Cara Membuat Tombol Back to Top di Blogger._Tombol back to Top yaitu Sebuah tombol kecil yang di pasang di cuilan bawah halaman blog yang di gunakan untuk kembali ke cuilan atas halaman blog atau website. Secara ringkasnya Tombol Back to Top itu ialah tombol untuk kembali ke cuilan 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 cuilan 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 mempunyai peranan yang penting bagi sebuah blog atau website dengan konten halaman yang cukup panjang, oleh sebab itu pada setiap blog atau website di pasangi tombol back to top di blog  untuk memudahkan para pengunjung blog.

Lalu bagaimana Caranya menciptakan tombol back to top di blog ?
Ada banyak cara untuk menciptakan 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 menciptakan tombol back to top di blog.

Oke, Mari ikuti langkah-langkah cara menciptakan 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 arahan </head>
6. Setelah itu pasang arahan di bawah ini sempurna di atas arahan </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 arahan jquery sudah ada di blog teman maka tidak usah di pasang lagi

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

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg11fkJOkrIZnrOK3stNXd2H99xNK58GBZ06VnjAxQ4Rw23URM2oYCF5MkDTZlmXrgyKD8DdKGRnmqNHKn3_0HBnPSSKBhGqaLGywG3ZyL9FZjh1DpGSGFtCWZPI3MIV3HwU3aL5C0XqY/s1600/backtotop.png'/></div>

Note : Kode warna merah yaitu gambar tombol back to topnya silahkan ganti dengan harapan sobat

10. Langkah terakhir simpan template dan lihat hasilnya.


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

Salam sukses untuk kita semua.
Bye-bye