Cara Memasang Tombol Go Up Dan Go Down Di Blog

Kali ini akan mengembangkan 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 warta 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, kalau belum ditambahkan. Tambahkan arahan 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 arahan Fontawesome silakan tambahkan arahan 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 arahan 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 karenanya di blog sobat.