Membuat Tombol Go Up Serta Go Down Di Blog - Hallo sahabat Teknoz Update, Pada Artikel yang anda baca kali ini dengan judul Membuat Tombol Go Up Serta Go Down Di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel News, Artikel Tips Blogger, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Tombol Go Up Serta Go Down Di Blog
link : Membuat Tombol Go Up Serta Go Down Di Blog

Membuat Tombol Go Up Serta Go Down Di Blog

Pada kali ini aku bakal memberikan tutorial Cara Membuat Tombol Go Up serta Go Down di Blog dengan menggunakan JavaScript yang ringan. Tombol Go Up serta Go Down merupakan tombol yang digunakan buat menggulirkan halaman situs ke bawah atau ke atas cuma dengan sekali klik. Dengan menerapkan tombol ini, pengguna dapat menelusuri konten dengan gampang serta cepat.

Memenuhi kebutuhan pengguna merupakan hal paling penting dalam membangun blog yang baik. Dengan memasang Tombol Go Up serta Go Down atau juga disebut selaku fitur Tap To Top pada bilah sisi halaman, pengguna dapat meloncat halaman lebih jauh tanpa perlu menekan serta menggeser mouse yang lebih banyak menguras tenaga.

Cara Membuat Tombol Go Up serta Go Down di Blog

Langkah 1

Silahkan buka halaman dasbor Blogger, kemudian pilih menu Tema, lalu klik Edit HTML.


Langkah 2

Tambahkan kode dibawah ini sebelum kode </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>

Langkah 3

Tambahkan juga kode dibawah ini sebelum kode </head> atau tepatnya sesudah kode diatas.

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

Selanjutnya, tambahkan kode berikut ini tepat sebelum 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 5

Tambahkan juga kode dibawah ini sebelum 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>

Langkah 6

Silahkan Simpan kemudian lihat hasilnya.

Pada tahap ini kamu telah berhasil membuat tombol tap to up serta tap to down di halaman blogger. Selanjutnya, kamu bisa mengubah icon tombol sesuai dengan keinginan lewat fontawesome.

Demikian pembahasan mengenai tips Cara Membuat Tombol Go Up serta Go Down di Blog semoga bermanfaat buat Anda.

loading...

Demikianlah Artikel Membuat Tombol Go Up Serta Go Down Di Blog

Sekianlah artikel Membuat Tombol Go Up Serta Go Down Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Tombol Go Up Serta Go Down Di Blog dengan alamat link https://teknozupdate.blogspot.com/2018/05/membuat-tombol-go-up-serta-go-down-di.html