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

Tutorial Cara Memasang Tombol Go Up & Go Down di Blog

Tutorial Cara Memasang Tombol Go Up & Go Down di BlogTombol Go Up dan Go Down

Amaterasublog.com - Hallo teman-teman blogger, selamat datang di amaterasublog. Pada kesempatan kali ini saya akan mengulas tutorial blogging Cara Memasang Tombol Go Up & Go Down di Blog.

Fungsi dari Tombol Go Up & Go Down pada suatu blog yaitu dapat memudahkan para pengunjung (pembaca) untuk menuju ke bagian atas atau ke bagian paling bawah halaman blog tanpa harus men-scroll secara manual. Apalagi jika situs blog yang kita miliki banyak memuat konten artikel yang panjang-panjang, maka memasang fitur tombol ini menjadi sangat direkomendasikan.

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, silahkan pasang terlebih dahulu atau bisa copy kode skrip 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>

Tutorial Cara Memasang Tombol Go Up & Go Down di Blogspot

Tutorial:

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

Demikianlah ulasan tutorial 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 ya!
Berlangganan Artikel Gratis :

Tampilkan Komentar
Sembunyikan

( 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