Cara membuat tombol Back To Top di Blog

HaiSob apa kabar? Pada kesempatan ini saya akan berbagi tentang cara membuat tombol Back To Top di blog. Ketika blog memposting artikel yang panjang, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artilel tanpa perlu scroll ke atas.

Tombol back to top memiliki peranan cukup penting bagi blog dengan konten yang berat dan memiliki halaman yang panjang. Blog yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.

Back To Top


Cara membuat tombol Back To Top di Blog
Cara membuat tombol Back To Top di Blog

Cara Memasang Tombol "Back To Top" Di Blogger


1. Di Blog Bloger 😊
2. Pilih menu Template ➔ Edit HTML
Cara Memasang Tombol
Template - Edit HTML

Baca juga: cara membuat tombol Demo dan Download efek slide

3. Letakan kode di bawah ini diatas kode </head> Tapi jika sudah ada kode ini di template kamu, lewati saja langkah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
4. Letakan kode di bawah 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>
5. Letakan kode CSS dibawah ini 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;}
6. Letakan 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>

Kode berwarna hijau di atas adalah link/url gambar back to top, kamu dapat menggantinya dengan gambar yang kamu inginkan.

Baca juga: Cara membuat daftar isi di bagi berdasarkan label

7. Save Template dan lihat hasilnya.

Tombol back to top ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, dari pada harus menggerakannya dengan mouse.

Sekian, salam Bloggers