Cara Membuat Tombol Back To Top di Blog

Posted by Night Raid Script Posted on 19.42

Night Raid - Cara Membuat Tombol Back To Top di Blog. Pada kesempatan ini kami akan memabgikan kepada anda tentang bagaimana cara memasang tombol "back to top di Blogspot". Ada beberapa alasa sehingga banyak Blogger memasang tombol back to top ini ke Blog mereka. Yah untuk mempermudah pengunjung blog dan mempercantik tampilan blog mereka.

Kenapa tombol ini dapat mempermudah pengunjung blog? Ketika blog memposting artikel yang panjang, tombol ini dapat membeantu 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 berat 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.

Cara Membuat Tombol "Back To Top" Di Blogspot

Bebicara mempercantik tampilan blog sebelunya juga seocips telah membagikan tentang cara membuat recent post efek slide ketika halaman di scroll, mungkin saja sobat tertarik ingin membuatnya juga. Ok, berikut ini adalah cara membuat dan memasangnya ke dalam Blogspot!

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

7. Masih di tempat yang sama - Cari kode </head>
8. Masukan script dibawah ini diatas </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>

9. Cari kode ]]></b:skin>
10. Masukan kode CSS dibawah ini diatas ]]></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;}

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/AVvXsEh0K9_P9ixJiGJvJmkP9g8xW0uz4fO4N_OBgOWtqwYgac6ygNaHkWKTQMNpqaVEO5-Mw6UiSqzpZ5gPg7sNGmse3q-5nGOyAz6JLXu7uAaUEYIFMUh2NBchvPFyMJZw7q1vHpEpzgCzE0Q/s1600/backtotop.png'/></div>

13. Save Template dan lihat hasilnya.

Kode berwarna biru di atas adalah link/url gambar back to top anda dapat menggantinya dengan gambar yang anda inginkan.

Tombol back to top ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, dari pada harus menggerakannya dengan mouse. Ini adalah salah satu cara untuk mempermudah pengunjung menelusuri konten - konten yang ada di blog kita. Nah untuk itulah kita membuat dan memasang tombol back to top di Blog.