Cara Membuat Tombol Go Up Dan Go Down Di Blogger

2 min read

Cara Membuat Tombol Go Up Dan Go Down Di Blogger
Tombol Go Up Dan Go Down


Cara Membuat Tombol Go Up Dan Go Down Di Blogger – Halo sobat blogger dimana pun kalian berada. semoga tetap semangat yah ngeblognya. Seperti biasa, pada kategori dunia blogging watpedia akan membahas mengenai berbagai hal yang berkaitan dengan ngeblog. Mulai dari CMS, tutorial, tips dan berbagai macam hal yang tentunya akan bermanfaat bagi para blogger, khususnya yang baru terjun ke dunia blogging.

Seperti judul diatas, kali ini kita akan membahas mengenai Cara Membuat Tombol Go Up Dan Go Down Di Blogger. Cara yang akan kita sampaikan ini benar benar sangat mudah. Jika kamu memperhatikan dengan seksama in syaa Allah akan dijamin work 100%. Ohiya, bagi kalian yang belum tahu apa itu tombol go up dan go down, tombol ini adalah fitur scroll otomatis. Cukup dengan sekali menyentuh tanda (keatas) maka layar akan menscroll otomatis kearah atas, begitu juga sebaliknya.
Tanpa basa basi lagi, mari langsung saja kita simal tutorial dibawah ini mengenai:

Cara Membuat Tombol Go Up Dan Go Down Di Blogger

Perlu diketahui, cara membuat tombol go up dan go down ini kita bagi menjadi 4 tahap. Yang dimana masing masing tahap, akan menggunakan script khusus. Perhatikan dibawah ini,

Langkah 1

Masuklah kedalam dashboard blogger, pilih menu tema, lalu klik edit HTML. Dan setelah masuk kedalam halaman script tema, cari kode </head>. Setelah ketemu kode </head>, tempelkan kode script dibawah ini tepat diatas </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>


Langkah 2

Setelah langkah diatas selesai, berikutnya tempelkan kode script dibawah ini tepat diatas </head> .  Masih ditempat yang sama.
<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>



Langkah 3

Setelah langkah diatas selesai, langkah berikutnya adalah menempelkan kode script dibawah ini, tepat diatas 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'/>


Langkah Terakhir

Setelah langkah diatas selesai, langkah terakhir adalah menempelkan kode script dibawah ini masih ditempat yang sama, yaitu diatas kode </body>.

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

Setelah selesai dengan langkah diatas. Klik Simpan Tema. Selesai!!!
Demo dari tombol go up dan go down ini bisa dilihat di blog ini Gambar Kata


Cara Membuat Tombol Go Up Dan Go Down Di Blogger

Baiklah, mungkin itu saja yang bisa kami bagikan kali ini, mengenai cara memasang tombol go up dan go down di blogger. Semoga bermanfaat. Baca juga artikel menarik lainnya seputar dunia blogging dan tutorial disini. Sekian dan terima kasih. Assalamu’alaikum. 


Judul : Cara Membuat Tombol Go Up Dan Go Down Di Blogger
Penulis : Admin
Tanggal : 5 Maret 2019
Hari : Selasa
Di : Kota Medan

Cara Membuat Pop Up Card Unik

Cara Membuat Pop Up Card Unik Di Blog Cara Membuat Pop Up Card Unik – Halo sobat blogger balik lagi di watpedia. Seperti biasa,...
admin
2 min read

Cara Menonaktifkan Inspect Element Di Blog

Cara Menonaktifkan Inspect Elemen Di Blog Cara Menonaktifkan Inspect Elemen Di Blog Balik lagi di watpedia. Sebuah situs kecil suka suka berbagi tips /...
admin
1 min read

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *