Cara Membuat dan Memasang Tombol Go Up dan Go Down Di Blog atau Situs Web Kamu

Hai, Sahabat. .
Di kesempatan yang baik ini, saya ingin membagikan tutorial atau cara membuat Tombol Go Up dan Go Down untuk situs web kamu dengan sangat mudah. Menurut saya, Tombol Go Up dan Go Down merupakan salah satu elemen yang penting dan harus ada terutama pada blog yang memiliki artikel yang panjang.


Lihat juga:

• Cara Membuat Daftar Isi (Table Of Contents) Di Dalam Postingan Artikel
• Cara Membuat Atau Memasang Fan Page Facebook Keren Di Situs Web Kamu
• Cara Memasang Iklan Google Adsense Otomatis Di Blog Atau Website Kamu

Apa Itu Tombol Go Up dan Go Down? dan Apa Fungsinya?

Tombol Go Up dan Go Down adalah tombol yang dapat mempermudah pembaca untuk menggulirkan halaman baik ke atas maupun ke bawah ketika tombol tersebut di tekan. Dengan tombol ini, pembaca tidak perlu lagi menggerakkan mouse (apabila dari desktop) dan menggerakkan jari (apabila dari mobile) untuk menggulirkan halaman ke atas dan ke aawah, mereka hanya cukup menekan tombol tersebut.

Selain berfungsi untuk mempermudah dalam menggulirkan halaman, tombol Go Up dan Go Down juga dapat berfungsi untuk mempercantik blog atau situs web kamu. Tombol Go Up dan Go Down ini akan membuat situs web kamu lebih indah dan lebih profesional.

Cara Membuat dan Memasang Tombol Go Up dan Go Down Di Blog

Langsung saja. . Untuk membuat Tombol Go Up dan Go Down, ikuti langkah-langkah di aawah ini:

1. Masuk ke "Akun Blogger" kamu
2. Klik menu "Tema". Kemudian klik "Edit HTML"
3. Cari "Kode </head>"
4. Tempelkan kode di aawah ini tepat di atas "kode </head>"


<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>


5. Kemudian tempelkan juga Kode di bawah ini tepat di atas "Kode </head>"


<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>


6. Kemudian kamu cari "Kode </body>". Tempelkan kode di bawah ini tepat di atas "Kode </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>


7. Klik "Simpan Tema"
8. SELAMAT. . Kamu telah menyelesaikan semua langkah-langkahnya.

Untuk "Menguji Coba" apakah Tombol Go Up dan Go Down telah terpasang, silahkan lihat halaman blog kamu. Jika semua langkah-langkah dilakukan dengan benar, maka Tombol Go Up dan Go Down akan secara otomatis terpasang.



Semoga Bermanfaat. .

Share this post