Tutorial Cara Memasang Tombol Go Up & Go Down di Blog

Tombol Go Up dan Go Down

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

Follow

Ahmad Shah Laupa Orang biasa yang memiliki ketertarikan terhadap dunia blogging dan senang belajar autodidak melalui tutorial-tutorial yang terdapat di Google. [Amati, Tiru, Modifikasi]

Share to ...

Berlangganan update artikel terbaru via email: