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

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

Berlangganan update artikel terbaru via email:

Tampilkan Komentar
Sembunyikan Komentar

5 Komentar untuk "Tutorial Cara Memasang Tombol Go Up & Go Down di Blog"

  1. Aku kira caranya susah, ternyata cukup mudah ya. Makasih infonya.

    BalasHapus
  2. Cari cari tutorialnya di google Alhamdulillah dapet disini

    BalasHapus
  3. makasih kode go up dan down nya mas. keren parah, tombolnya smooth banget

    BalasHapus
  4. Berkat tutorial ini, saya bisa langsung mencobanya di blog dan ternyata 100% work, min..
    Jd kga ssh2 lg klo mau lihat postingan ke bawah ataupun sebaliknya
    Makasih banyak, min

    BalasHapus

Seputar Blogger & Publisher

Hobi Ikan Hias & Aquascape

Info Anime List & OST Anime

Literatur Sosiologi & Politik

Informasi Menarik Lainnya ...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel