√ Tutorial Cara Memasang Tombol Go Up & Go Down di Blog

Amaterasublog – Hallo teman-teman bloggers, pada kesempatan kali ini saya akan membahas tutorial blogging Cara Memasang Tombol Go Up & Go Down di Blog.

Fungsi dari Tombol Go Up & Go Down di Blog adalah dapat memudahkan para pembaca konten artikel di blog kita, untuk menuju ke atas atau ke bawah pada bagian halaman tanpa harus men-scroll secara manual. Apalagi jika situs blog kita memuat konten artikel yang panjang-panjang, maka tombol go up & go down ini sangat dianjurkan untuk dipasang.

Nah, bagi teman-teman blogger yang ingin memasang Tombol Go Up & Go Down di blog, silahkan ikuti tutorial di bawah ini:

Note : Jika teman-teman ingin memasang tombol go up & go down seperti yang saya pasang juga di blog ini, pastikan blog teman-teman sudah terpasang link FontAwesome. Jika belum terpasang teman-teman bisa copy kode di bawah ini dan tempelkan sebelum kode </head>

<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>

Cara Mudah Memasang Tombol Go Up & Go Down di Blogspot

1. Masuk ke Dashboard Blogger > Tema > Edit HTML

2. Copy kode script di bawah ini, kemudian tempelkan di atas kode </head>

<style type='text/css'>
/* Go Up and Go Down */
#gotop,#gobottom{background:#4267b2;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#fff;bottom:0;cursor:pointer;display:none;line-height:2;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#gotop:hover,#gobottom:hover{background:#6bc9f9}#gotop{right:40px;}#gobottom{background:#282480;right:0}
@media only screen and (max-width:768px){#gotop{right:43px}}
</style>

3. Selanjutnya copy kode script di bawah ini dan tempelkan sebelum </body>

<div id='downfooter'/>
<a href='#' id='gotop'><i class='fa fa-chevron-up' title='Go Up'/></a><a href='#' id='gobottom'><i class='fa fa-chevron-down' title='Go Down'/></a>
<script type='text/javascript'>
//<![CDATA[
// Go Up and Go Down
!function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#gotop").removeAttr("href"),o("#gotop").fadeIn()):o("#gotop").fadeOut()}),o(function(){o("#gotop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#gobottom").removeAttr("href"),o("#gobottom").fadeOut()):o("#gobottom").fadeIn()}),o(function(){o("#gobottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
//]]>
</script>

4. Terakhir klik Save Tema/ Template

Penutup Tutorial

Mungkin cukup sekian tutorial singkat tentang Cara Memasang Tombol Go Up & Go Down di Blog, dan jika ada yang ingin ditanyakan terkait isi artikel di atas silahkan teman-teman tinggalkan komentar di bawah ini. Semoga bermanfaat :)

Disclaimer : Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini