Cara Memasang Tombol Back To Top Fast Loading dan Responsive

Baca Juga

TOMBOL "Kembali ke Atas" (Back To Top Button) adalah fitur yang wajib ada di blog.

Tombol Back To Top (BTT) ini memudahkan pengunjung kembali ke bagian teratas halaman blog, setelah scroll ke bawah untuk baca postingan.

Dengan satu klik atau tap saja, halaman akan otomatis kembali ke bagian atas, tanpa scroll mouse.

Tombol Back To Top jelas ramah pengguna (user friendly) karerna memudahkan pengunjung yang membuka halaman atau posting blog Anda.

Tombol Kembali ke Atas (Back To Top Button) ini merupakan trend desain website. Situs-situs ternama juga menggunakannya, termasuk Yahoo dan situs-situs berita.

Cara Memasang Tombol Back To Top

Ada dua kode (HTML & JavaScript) yang harus dipasang di template, jika blog Anda belum memiliki tombol Back To Top ini.

Namun, karena gambar panah ke atasnya menggukana Awesome Font, maka pertama-tama marilah kita panjatkan puji syukur.... eh.... pertama-tama pasang LINK dulu ke CSS Awesome Font alias "Huruf Idaman" berupa kode-kode yang membentuk gambar icon di blog.

Cara Memasang Tombol Back To Top Fast Loading dan Responsive

1. Tema > Edit HTML
2. Pasang LINK ke Font Awesome. Copas kode berikut ini di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

3. KODE CSS Back to Top Blogger. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>

/* Back To Top */#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

4. KODE JavaScript Back to Top Bloger. Pasang di atas kode </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'><i class='fa fa-chevron-up'/></a></div><script>            $(window).scroll(function() {if($(this).scrollTop() &gt; 200) {$(&#39;#back-to-top&#39;).fadeIn();} else {$(&#39;#back-to-top&#39;).fadeOut();}});$(&#39;#back-to-top&#39;).hide().click(function() {$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);return false;});</script>

5. Save Template!

Kini Tombol Kembali ke Atas (Back To Top Button) Fast Loading dan Responsive sudah terpasang di Blog Anda.

Good Luck & Happy Blogging! (www.contohblog.com).*