Cara Menciptakan 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 dipakai 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 bila ingin membuka artikel dengan isi yang panjang untuk mengembalikan ke atas ataupun kebawah.
Namun kini 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 sanggup mengikuti langkah-langkahnya untuk di pasang didalam blog kalian. Kalau blog kalian sudah tersedia tombol slide up dan down ini, kalian sanggup eksklusif skip postingan ini.
Memasang tombol slide up dan down pada blog, selain fungsinya di atas juga untuk mempercantik dan sebagai aksesori blog kita. meskipun jarang dipakai namun blog yang memasang tombol ini sanggup terlihat lebih bagus. Dari pada panjang lebar, kita eksklusif 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 aba-aba </head>.
Jika sudah terpasang, Kalian sanggup eksklusif 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 aba-aba diabwah ini sebelum aba-aba </head>
Untuk Style II
Silahkan Pilih salah satu aba-aba style di atas. Ubah warnanya sesuai yang kalian inginkan yang sudah diberi tanda kuning.
5. Jika Sudah, Cari aba-aba ini </body>
6. Dan tambahkan aba-aba dibawah ini sebelum aba-aba </body>
7. Kemudian, Simpan Tema
Baca Juga :
Sumber html code : Namina kiky
Sumber https://www.kored.id/
Namun kini 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 sanggup mengikuti langkah-langkahnya untuk di pasang didalam blog kalian. Kalau blog kalian sudah tersedia tombol slide up dan down ini, kalian sanggup eksklusif skip postingan ini.
Memasang tombol slide up dan down pada blog, selain fungsinya di atas juga untuk mempercantik dan sebagai aksesori blog kita. meskipun jarang dipakai namun blog yang memasang tombol ini sanggup terlihat lebih bagus. Dari pada panjang lebar, kita eksklusif 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 aba-aba </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 sanggup eksklusif 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 aba-aba diabwah ini sebelum aba-aba </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 aba-aba style di atas. Ubah warnanya sesuai yang kalian inginkan yang sudah diberi tanda kuning.
5. Jika Sudah, Cari aba-aba ini </body>
6. Dan tambahkan aba-aba dibawah ini sebelum aba-aba </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 Praktis Membuat Effect Double Click To Select Dengan Tag Selection 'kbd' di Blogger
Sumber html code : Namina kiky
Sumber https://www.kored.id/
