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.
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 :
Jika kalian akan memasangnya, pastikan dulu kalau blog kalian sudah terpasang link Fontawesome. Jika belum silahkan tambahkan link dibawah ini seblum kode </head>.
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
Untuk Style II
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>
7. Kemudian, Simpan Tema
Baca Juga :
Sumber html code : Namina kiky
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 Mengubah Warna Address Bar Supaya Mengikuti Warna Blog
- Cara Membuat Sitemap Keren Dan Responsive Pada Blog
- Cara Membuat Komentar Disqus di Blog Lengkap Dengan Load Comments dan Mengganti Nama Moderator
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 :
- Cara Membuat Link Sumber Otomatis Ketika Artikel Blog di Copas Orang Lain
- Cara Mudah Membuat Effect Double Click To Select Dengan Tag Selection 'kbd' di Blogger
Sumber html code : Namina kiky