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 yaitu tombol yang berfungsi baik cara untuk melompat ke atas maupun ke bawah dengan gampang dan singkat, daripada menggerakannya dengan mouse. Ini yaitu 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 gosip 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, jikalau belum ditambahkan. Tambahkan isyarat 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 isyarat Fontawesome silakan tambahkan isyarat 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 isyarat 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.

• Result

Sekian untuk tips Cara Memasang Tombol Go Up dan Go Down di Blog, supaya bermanfaat dan wassalam.

Tweet

Subscribe to receive free email updates: