√ Cara Memasang Tombol Slide Up and Down

Cara Memasang Tombol Slide Up and Down

12/21/2018

Apa kabar sobat Namina, mudah-mudahan dalam keadaan sehat wal'afiat. Pada Tips Blogger ini Namina akan berbagi tips Cara Memasang Tombol Slide Up and Down. Mungkin Anda sudah tahu fungsi utama dari tombol Slide Up and Down ini yaitu memudahkan pengunjung blog untuk kembali ke atas atau ke bawah pada bagian halaman tanpa harus scroll secara manual, tentunya ini akan sangat membantu pengunjung yang membuka halaman dengan isi artikel yang panjang untuk kembali ke atas atau bawah dengan instan.

Bagi Anda yang penasaran untuk cara memasangnya di blog, yuk kita ikuti langkah-langkah di bawah ini.

Cara Memasang Tombol Slide Up and Down

Sebelum memasangnya, pastikan di blog Anda sudah terpasang link Fontawesome. Jika belum, Anda bisa tambahkan link 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 Blogger > Klik menu Tema dan tombol Edit HTML > Tambahkan kode ini sebelum </head>

Pilih salah satu dari dua style berikut dan edit kode yang ditandai untuk mengganti warna dari tombol Slide Up and 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>

Selanjutnya tambahkan kode di bawah 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>

Kemudian klik tombol Simpan tema dan lihat hasilnya di blog Anda.

Contoh Pilihan Warna 1