Smooth Back To Top. Cara memasang back to top pada blog. Fungsi tombol back to top adalah untuk memberikan kemudahan kepada pengunjung atau pembaca blog yang ingin menscroll halaman kembali keatas hanya dengan mengeklik satu tombol saja. Karena pentingnya fungsi tombol back to top sudah banyak para blogger atau template blog yang menggunakan dan memasang tombol ini didalam blognya. Sehingga para pembaca tidak harus repot repot menscroll untuk kembali ke halaman atas. Tutorial ini saya ambil dari blog favorite saya Arlinadesign.blogspot.
Untuk membuat dan memasang tombol back to top didalam blog sahabat silahkan ikuti langkah langkah dibawah ini.
Catatan : Sebelum anda memasang dan membuat tombol back to top ini, pastikan diblog anda belum memiliki tombol back to top, jika sudah ada silahkan sahabat hapus terlebih dahulu.
Langkah pertama. Silahkan sahabat copy dan pastekan kode dibawah ini tepat diatas atau sebelum kode <head> atau </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Catatan : Jika didalam blog sahabat sudah terpasang font awesome diatas maka lewati langkah pertama ini.
Langkah kedua. Silahkan sahabat copy dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:2px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s;}.smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s;}.smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px;}.smoothscroll-top i.fa { line-height:inherit;}
Langkah ketiga. Silahkan sahabat copy dan pastekan kode JQuery dan HTML dibawah ini sebelum atau tepat diatas kode </body>
<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span></div><script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop);}); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');}//]]></script>
Setelah sahabat menerapkan semua langkah diatas, kemudian simpan template sahabat, dan lihat hasilnya.
Efek Bounce. Jika sahabat menginginkan tombol back to top pada blog sahabat memiliki efek bounce, silahkan ganti kode JQuery dan HTML diatas dengan kode dibawah ini.
<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span></div><script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop);}); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);}//]]></script>
Demikian cara mudah membuat dan memasang Tombol Back To Top keren didalam blog. Semoga tutorial ini bermanfaat bagi sahabat yang berkunjung dan membaca artikel ini. Salam blogger dan Nice Share from Zam Blog
Sumber tutorial ini Arlina
terimakasih infonya gan, salam sejahtera
ReplyDeletesama sama gan. Semoga bermanfaat artikelnya :)
DeleteTerimakasih banyak mas, bagus nih, bisa saya coba..
ReplyDeleteSama-sama gan, silahkan di coba semoga bermanfaat
Deletesama-sama mba
ReplyDeletePost a Comment
> Tuliskan komentar anda dibawah ini dengan sopan.
> Komentar yang mengandung Link Hidup kami anggap sebagai spamm. Dan jenis komentar ini terpaksa tidak akan kami tampilkan.
> Ayo budayakan blogwalking dengan baik dan bijak.
> Terima kasih sudah berkunjung.