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