Tutorial Cara Memasang Tombol Go Up & Go Down di Blog

Tutorial Cara Memasang Tombol Go Up & Go Down di Blog

Tombol Go Up - Go Down

Amaterasublog – Hallo teman-teman bloggers, pada kesempatan kali ini saya akan berbagi Tutorial 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.

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 Memasang Tombol Go Up & Go Down di Blog

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

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

Share this post

Loading...

Berlangganan update artikel terbaru via email: