Tutorial Cara Membuat Tombol Go Up dan Go Down di Blog

Halo sobat blogging semua,pada pembahasan kali ini admin akan memberikan Tutorial Cara Membuat Tombol Go Up dan Go Down di Blog agar tampilan blog anda lebih keren dan mudah untuk pengunjung anda,dimana admin akan sedikit menggunakan kode JavaScript yang ringan agar ketika sudah jadi blog anda tidak berat untuk di akses,perlu anda ketahui Tombol Go Up dan Go Down ini merupakan tombol yang di gunakan untuk scrol atau menggulirkan halaman situs website anda kebawah dan ke atas dengan hanya sekali klik.

Memang script ini sudah banyak yang memakai dalam setiap situs,namun untuk script kali ini memiliki kelebihan enteng dan tombol sangat keren,dan dengan menerapkan tombol ini tentunya pengguna,dapat menelusuri konten dengan mudah dan cepat.

Kita sebagai seorang blogging prefesional tentunya harus bisa memenuhi kebutuhan si pengguna agar pengguna bisa lama lama dan nyaman ketika masuk kedalam situs kita,dan dengan memasang Tombol Go Up dan Go Down ini tentunya pengguna bisa meloncat ke halaman lebih jauh tanpa harus menekan dan menggeser mouse.

Tombol Go Up dan Go Down

Baik dalam hal ini ada beberapa step yang perlu anda lakukan agar pemasangan Script Tombol Go Up dan Go Down bisa maksimal,bagaimana caranya..? yuk langsung saja kita simak berikut :

Tutorial Membuat Tombol Go Up dan Go Down Pada Blog

Langkah yang pertama silahkan anda masuk pada dasboard Blogger,dan silahkan kemudian pilih menu Tema,lalu silahkan klik Edit HTML

Untuk Langkah yang kedua silahkan 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 Yang ketiga silahkan anda tambahkan juga kode dibawah ini tepatnya 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>

Dan Untuk langkah yang ke empat silahkan anda 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 ke lima silahkan anda masukan 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>

Dan langkah yang terahir silahkan anda Klik SIMPAN dan kemudian lihat hasilnya...?

Baik sobat blogging semua,mungkin hanya ini yang bisa saya berikan silahkan ikuti step by step tutorial diatas ini agar pemasangan Tombol Go Up dan Go Down tidak salah dan bisa maksimal,semoga bermanfaat dan salam dari seoblogger.id

1 Response to "Tutorial Cara Membuat Tombol Go Up dan Go Down di Blog"


  1. admin numpang promo ya.. :)
    cuma di sini tempat judi online yang aman dan terpecaya di indoneisa
    banyak kejutan menanti para temen sekalian
    cuma di sini agent judi online dengan proses cepat kurang dari 2 menit :)
    ayo segera bergabung di fansbetting atau add WA +855 9631562 ^^
    F4ns Bett1ng agen judi online aman dan terpercaya
    Jangan ragu, menang berapa pun pasti kami proseskan..
    F4ns Bett1ng
    B0l4, C4sin0, s4bun9 4yam, T0gel dll.. dp50 wd50

    di tunggu pendaftaran nya ya para boskuu :D

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel