Cara Membuat Tombol Slide Up Dan Down Di Blog - Kored ID

3 March 2019

Cara Membuat Tombol Slide Up Dan Down Di Blog

Dari namanya saja sudah kelihatan, dan mungkin kalian sendiri sudah tahu fungsinya untuk apa. Slide Up dan Down biasanya digunakan pengunjung untuk mengembalikan tampilan halaman ke atas atau kebawah tanpa harus scroll mouse secara manual. memasang Slide up dan down tentunya akan sangat membantu pembaca jika ingin membuka artikel dengan isi yang panjang untuk mengembalikan ke atas ataupun kebawah.

Membuat Tombol Slide Up Dan Down - kored id

Namun sekarang tombol slide up dan down biasanya sudah terdapat dalam setiap template. baik itu template gratis ataupun premium. tapi apabila blog kalian belum memasang tombol ini, kalian bisa mengikuti langkah-langkahnya untuk di pasang didalam blog kalian. Kalau blog kalian sudah tersedia tombol slide up dan down ini, kalian bisa langsung skip postingan ini.

Memasang tombol slide up dan down pada blog, selain fungsinya di atas juga untuk mempercantik dan sebagai pelengkap blog kita. meskipun jarang digunakan namun blog yang memasang tombol ini bisa terlihat lebih bagus. Dari pada panjang lebar, kita langsung saja ke inti materinya :v,

Baca Juga :
Cara Membuat Tombol Slide Up dan down di dalam blog

Jika kalian akan memasangnya, pastikan dulu kalau blog kalian sudah terpasang link Fontawesome. Jika belum silahkan tambahkan link dibawah ini seblum kode </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>

Jika sudah terpasang, Kalian bisa langsung mengikuti langkah-langkah untuk memasang Tombol Slide Up Dan Down Di Blog
1. Login Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari Kode </head> (gunakan ctrl+f untuk mencarinya)
4. Copy kode diabwah ini sebelum kode </head>

Untuk Style I
<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>

Untuk Style II
<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>

Silahkan Pilih salah satu kode style di atas. Ubah warnanya sesuai yang kalian inginkan yang sudah diberi tanda kuning.

5. Jika Sudah, Cari kode ini </body>
6. Dan tambahkan kode dibawah ini sebelum kode </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
!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>

7. Kemudian, Simpan Tema

Baca Juga :
Sekian Cara Membuat Tombol Slide Up Dan Down Di Blog, Semoga bisa diterpakan didalam blog kalian. Terimakasih sudah berkunjung.

Sumber html code : Namina kiky