Cara Menciptakan Tombol Back To Top Dengan Gambar Keren Dan Elegan

Tutorial Blogger kali ini adalah bagaimana Cara Membuat Tombol Back To Top dengan Gambar Keren dan Elegan. Mungkin sebagian dari anda bertanya, apa fungsi tombol back to top? sedikit akan aku jelaskan, tombol back to top ini berfungsi untuk kembali ke atas sesudah pengunjung blog melaksanakan scroll kebawah ketika membaca artikel yang panjang pada blog kita.

Scroll ke bawah dan ke atas sebetulnya dapat saja memakai mouse, atau tombol panah kebawah dan keatas pada keyboard, dan ketika membaca artikel biasanya pengunjung akan menggunakannya, namun ketika pengunjung sebuah blog menginginkan kembali ke bab atas dengan tujuan ingin melihat-lihat fitur, koleksi artikel blog kita, atau hanya sekedar ingin mengulang membaca tulisan, akan sangat terbantukan bila di blog kita tersedia tombol back to top, dengan sekali klik pribadi kembali/ loncat ke atas.

Berikut tutorial lengkap Cara Membuat Tombol Back To Top:

Login blogger.com
Klik sajian template - Edit HTML - klik sekali dalam template dan tekan CTRL+F untuk memunculkan kotak pencarian dalam template dan silahkan anda ketik instruksi </head>
Copy instruksi berikut sempurna di atas instruksi </head>:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

Catatan: instruksi di atas anda pasang jika di template blog anda belum ada instruksi tersebut.

<script type='text/javascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700); return false})}); </script>
Berikutnya copy instruksi CSS berikut di atas kode ]]></b:skin> atau </style>

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:30px; right:30px;cursor:pointer;display:none;opacity:0.6;} #ScrollToTop:hover{opacity:1;}
Selanjutnya copy instruksi berikut di atas instruksi </body>

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

Catatan: instruksi gambar yang aku beri warna merah dapat anda ganti dengan instruksi gambar anda yang lain sesuai dengan desain tombol yang anda inginkan.
Simpan Perubahan template