Cara Membuat Tombol Back To Top di Blog
Seocips - 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='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/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.
16 Komentar untuk "Cara Membuat Tombol Back To Top di Blog"

Tombol back to topnya kaya sampean ini ya mas?

makasih kawan :) bermanfaat ini postingannya
sukses selalu :*

gak gan, jika ingin sama seperti blog ini, pada langkah ke 12 diatas ganti saja gambarnya mirip back to top di blog ini.

gan cara membuat gambar tanda centang itu gimana gan ?

bro cara ke kanan back to topnya kode apa?kok saya ke kiri

tanks mas brando, kunjungan saya yang kesekian kalinya ini..dlm rangka bikin blog baru pasang back to top

Hehe ok gan, semoga blog barunya cepat maju dan sukses. Terimakasih juga sering berkunjung.

Terimakasih bro, aku udh banyak ambil ilmu dari blog mu hehe.. Izin praktek, semoga Sukses selalu

gak ada pilihan gambar back to top yg lain gan? kayaknya gak maching kalo warna itam nih...
tapi tutorialnya bagus, dah saya pasang di blog saya. trims gan

Belum ada sob, coba search aja Google, ada banyak. Atau bisa bikin sendiri.

Punya saya jadi aga tengah gan ya jadi nya. Emang beda ya hasil nya ga sama kaya di blog ini ?

gan bisa nggak dibuatin gambar back to top nya seperti back to top seperti blog agan tapi diubah warnanya jadi warna hitam. sorry, ane gak pandai ngedit gambar.