Cara Memasang Tombol Go Up dan Go Down Di Bawah Halaman Blog

Hello sahabat blogger, pada kesempatan kali ini monsuka akan membahas cara memasang tombol go up dan go down di bawah halaman blog. Fungsi tombol ini adalah untuk memudahkan pembaca setia blog untuk kembali ke atas dan ke bawah halaman secara instan tanpa harus scroll manual. Tentu hal tersebut sangat berguna bagi pengunjung yang kebetulan membuka halaman dengan isi artikel panjang.

Cara Memasang Tombol Go Up dan Go Down Halaman Blog

Langsung saja, untuk pemasangan tombol go up dan go down bisa ikuti langkah-langkah berikut ini.

Cara Memasang Tombol Go Up dan Go Down di bawah halaman blog


Sebelum memasangnya, pastikan blog kamu sudah terpasang link FontAwesome. Jika belum, kamu bisa tambahkan kode link dibawah ini sebelum </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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>

Pertama buka dashboard Blogger - Pilih menu Tema dan klik Edit HTML - kemudian tambahkan kode dibawah ini sebelum </head>
Pilih salah satu dari style berikut ini dan edit kode berwarna biru untuk mengganti warna dari tombol go up dan go down.
Pilihan warna 1

<style type='text/css'>
/* Slide Up and Down */
#slidetop,#slidebottom{background:#fff;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#222;bottom:0;border:1px solid rgba(0,0,0,0.05);border-bottom:0;cursor:pointer;display:none;line-height:2;box-shadow:0 -1px 20px rgba(0,0,0,0.05);backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:#fafafa}#slidetop{right:46px;border-radius:5px 0 0 0}#slidebottom{right:0;border-right:0;box-shadow:5px -1px 20px rgba(0,0,0,0.05)}
@media only screen and (max-width:768px){#slidetop{right:43px}}
</style>

Pilihan warna 2
 
<style type='text/css'>
/* Slide Up and Down */
#slidetop,#slidebottom{background:#e74c3c;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}#slidetop:hover,#slidebottom:hover{background:#333}#slidetop{right:46px;border-radius:5px 0 0 0}#slidebottom{background:#c0392b;right:0}
@media only screen and (max-width:768px){#slidetop{right:43px}}
</style>

Kemudian tambahkan kode dibawah ini sebelum </body>

<div id='downfooter'/>
<a href='#' id='slidetop'><i class='fa fa-chevron-up' title='Slide up'/></a><a href='#' id='slidebottom'><i class='fa fa-chevron-down' title='Slide down'/></a>
<script type='text/javascript'>
//<![CDATA[
// Slide Up and Down by www.naminakiky.com
!function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#slidetop").removeAttr("href"),o("#slidetop").fadeIn()):o("#slidetop").fadeOut()}),o(function(){o("#slidetop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#slidebottom").removeAttr("href"),o("#slidebottom").fadeOut()):o("#slidebottom").fadeIn()}),o(function(){o("#slidebottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
//]]>
</script>

Terakhir klik Simpan Tema dan lihatlah hasilnya di blog anda.

Sangat mudah bukan? Sekian tips dari monsuka yaitu cara memasang tombol go up dan go down dibawah halaman blog. Terima kasih sudah membaca sampai akhir dan jangan lupa kembali lagi yaa.

Sumber kode : blog naminakiky

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Memasang Tombol Go Up dan Go Down Di Bawah Halaman Blog"

Posting Komentar

Iklan Tengah Artikel 1