 |
| Tombol Go Up Dan Go Down |
Cara Membuat Tombol Go Up Dan Go Down Di Blogger - Halo sahabat blogger dimana pun kalian berada. biar tetap semangat yah ngeblognya. Seperti biasa, pada kategori dunia blogging Infoterlengkap.com akan membahas mengenai banyak sekali hal yang berkaitan dengan ngeblog. Mulai dari CMS, tutorial, tips dan banyak sekali macam hal yang tentunya akan bermanfaat bagi para blogger, khususnya yang gres 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 kau 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 ialah fitur scroll otomatis. Cukup dengan sekali menyentuh tanda (keatas) maka layar akan menscroll otomatis kearah atas, begitu juga sebaliknya.
Tanpa basa kedaluwarsa lagi, mari eksklusif saja kita simal tutorial dibawah ini mengenai:
Cara Membuat Tombol Go Up Dan Go Down Di Blogger
Perlu diketahui, cara menciptakan tombol go up dan go down ini kita bagi menjadi 4 tahap. Yang dimana masing masing tahap, akan memakai script khusus. Perhatikan dibawah ini,
Langkah 1
Masuklah kedalam dashboard blogger, pilih sajian tema, kemudian klik edit HTML. Dan sehabis masuk kedalam halaman script tema, cari isyarat </head>. Setelah ketemu isyarat </head>, tempelkan isyarat script dibawah ini sempurna 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 isyarat script dibawah ini sempurna 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 ialah menempelkan isyarat script dibawah ini, sempurna 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 ialah menempelkan isyarat script dibawah ini masih ditempat yang sama, yaitu diatas isyarat </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 dapat dilihat di blog ini Gambar Kata
Cara Membuat Tombol Go Up Dan Go Down Di Blogger
Baiklah, mungkin itu saja yang dapat 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.
Cara Membuat Tombol Go Up Dan Go Down Di Blogger
Infoterlengkap.com
5 Maret 2019
Selasa
Advertisement