Tutorial Membuat Tombol Go Up to Down Pada Blog
Pada dasarnya tombol go up dan go down ini akan mempermudah para pembaca untuk melakukan scrol artikel terutama artikel yang panjang shingga mengurangi pekerjaan menggunakan mouse untuk scrol artikel.
Dengan adanya scrol Up Down ini diharapkan pengunjung akan betah berlama-lama di blog kita bila artikel di dalam blog kita panjang, ini biasanya berhubungan dengan blog berita atau cerpen.
Tombol ini dilengkapi dengan gaya atau efek smoth sehingga terlihat dinamis dan tidak menggangu penglihatan para pengunjung blog dalam membaca artikelnya.
untuk mempersignkatnya ada baiknya kita ikuti langkah demi langkahnya di bawah ini, Tutorial Membuat Tombol Go Up to Down Pada Blog :
Membuat Tombol Go Up to Down Pada Blog
Pertama silahkan masuk ke Blogger, Tema, Edit HTML
Silahkan pilih salah satu kode css yang ada dibawah lalu copy dan tempel tepat di atas kode </head>
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style><style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>Copy kode dibawah lalu tempel tepat di atas kode </body>
<ul id='scrollToTop'>
<li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
<li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>Apabila template Anda belum menggunakan font awesome silahkan tambahkan terlebihdahulu dan tempel diatas kode </head>
Jika template blog Anda sudah menggunakan font awesome maka kode ini tidak perlu di pasang lagi.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>Jika penerapan sudah semua silahkan klik simpan thema. Untuk melihat hasilnya Anda bisa lihat pada blog/website Anda.
Apabila Anda menyukai Artikel ini silahkan bagikan ke yang lainnya, Anda juga bisa memberikan masukan tentang artikel ini melalui kolom komentar.