Cara Membuat Scroll Button Back To Top - Atau Cara Membikin Tombol Gulir ke Atas. Memuliakan tamu merupakn salah satu identitas seorang RAPI, silahkan baca ulang Kode Etik dan Panca Bhakti RAPI pada postingan terdahulu. Begitu juga memuliakan pengunjung blog adalah merupakan ciri admin bijak/blogger sejati.
Memuliakan pengunjung blog salah-satunya adalah dengan memberi kemudahan gulir ke atas. Tombol Gulir ke Atas atau Scroll Button Back To Top berguna tatkala artikel blog kita terlalu banyak pembahasan yang harus dibedah, hingga artikel berada dipaling bawah, sementara kita ingin mengulang membacanya dari awal. Kita tak perlu memutar scrool mouse, hanya dengan satu sentuhan (tindis klik) saja sudah pindah ke atas.
Sebenarnya Scroll Button Back To Top ini adalah tombol gulir bawaan template yang saya pakai, hanya dirobah sedikit untuk posisi tombolnya agar ada di samping kanan, asalnya berada di credit footer template. Okeh sudah ya obrol-obrolnya, kita langsung pada langkah pembuatan.
Pertama yang harus sobat lakukan adalah Login ke Akun Blogger sobat.
Lalu masuk ke dashboard >> Layout >> Edit HTML lalu pastekan kode script dibawah ini diatas kode </head>
<script type='text/javascript'>
$(function() {$.fn.scrollToTop = function() {$(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow")} var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() {$("#MD-StoTop").scrollToTop();});</script>
$(function() {$.fn.scrollToTop = function() {$(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow")} var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() {$("#MD-StoTop").scrollToTop();});</script>
Masukan kode CSS dibawah ini diatas ]]></b:skin> atau </style> di bagian head.
#MD-StoTop {background:$(body.background.color); display:block; width:40px; height:25px; color:#fff; text-align: center; border-radius: 0 0 5px 5px; margin:0 auto; cursor:pointer; }
a:hover#MD-StoTop{opacity:0.8;}
a:hover#MD-StoTop{opacity:0.8;}
Masukan kode di bawah ini untuk Tombolnya di atas </body>
<div id='ScrollToTop'><img alt='Back to top' src='//4.bp.blogspot.com/-7dgGPHoK_rY/WXBJlB4Ti0I/AAAAAAAAA54/UmeNJyPCnSkuNUE1EtyYhh6CMu8oFZengCLcBGAs/s1600/BTP.png'/></div>
Link gambar berwarna merah adalah gambar tombol back to top, silahkan ganti sesuai selera sobat.
Langkah terakhir (sama dengan langkah pertama diatas) adalah memasukan kode scrift min js dibawah ini, diatas kode penutup head </head> Tapi bisa dilewatkan karena biasanya dalam sebuah template sudah ada kode scrift jquery min js-nya meski beda versi.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
Save Template dan lihat hasilnya.
Happy Blogging !
