Kali ini akan membuatkan tips Cara Memasang Tombol Go Up dan Go Down di Blog. Apa itu Tombol Go Up dan Go Down? Tombol Go Up dan Go Down ialah tombol yang berfungsi baik cara untuk melompat ke atas maupun ke bawah dengan gampang dan singkat, daripada menggerakannya dengan mouse. Ini ialah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan mudah.
Tombol Go Up dan Go Down mempunyai peranan cukup penting bagi sebuah situs dengan konten yang mempunyai halaman yang panjang. Untuk situs yang mempunyai banyak isu pada halamannya akan menciptakan konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.
Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini
Langkah pertama, buka Blogger > Klik hidangan Tema > Klik Edit HTML
Kode yang akan aku bagikan ini memakai ikon dari Fontawesome, bila belum ditambahkan. Tambahkan instruksi di bawah ini sebelum </head> pada Template editor.
Setelah menambahkan instruksi Fontawesome silakan tambahkan instruksi di bawah ini sempurna sebelum </head>
Versi 1
Versi 2 yang lebih sederhana
Kemudian tambahkan kedua instruksi di bawah ini sebelum </body>
Simpan tema dan lihat alhasil di blog sobat.
Sekian untuk tips Cara Memasang Tombol Go Up dan Go Down di Blog, agar bermanfaat dan wassalam.
Tombol Go Up dan Go Down mempunyai peranan cukup penting bagi sebuah situs dengan konten yang mempunyai halaman yang panjang. Untuk situs yang mempunyai banyak isu pada halamannya akan menciptakan konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.
Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini
Cara Memasang Tombol Go Up dan Go Down di Blog
Langkah pertama, buka Blogger > Klik hidangan Tema > Klik Edit HTML
Kode yang akan aku bagikan ini memakai ikon dari Fontawesome, bila belum ditambahkan. Tambahkan instruksi di bawah ini sebelum </head> pada Template editor.
<script type='text/javascript'> //<![CDATA[ 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>Setelah menambahkan instruksi Fontawesome silakan tambahkan instruksi di bawah ini sempurna sebelum </head>
Versi 1
<style type='text/css'> /* Go Up and Down */ #scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99} #scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #top{position:absolute;top:0} </style>Versi 2 yang lebih sederhana
<style type='text/css'> /* Go Up and Down */ #scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99} #scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px} #scrollToTop a:hover{color:rgba(0,0,0,0.5)} #top{position:absolute;top:0} </style>Kemudian tambahkan kedua instruksi di bawah ini sebelum </body>
<ul id='scrollToTop'> <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li> <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li> </ul> <div id='top'/> <div id='bottom'/><script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})}); $(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})}); //]]> </script>Simpan tema dan lihat alhasil di blog sobat.
Sekian untuk tips Cara Memasang Tombol Go Up dan Go Down di Blog, agar bermanfaat dan wassalam.