Cara Membuat Tombol Go Up Dan Down Di Blogspot

Cara Membuat Tombol Go Up Dan Down Di Blogspot - Pada kesempatan ini saya ingin berbagi cara membuat tombol go up dan down di blog. Cara nya sangat mudah. Sebelum kita mulai tutorial kali ini saya akan jelaskan apa itu tombol go up dan down. Tombol up down sebenarnya sama seperti Cara membuat tombol Go To Top yang bisa kalian temukan pada template kalian bila kalian menggunakan nya. Yang dimana saat kita klik tombol tersebut kita akan menuju ke halaman atas. Nah untuk tombol up dan down yang akan saya bagikan ini fungsi nya hampir sama, yang membedakan nya yaitu saya hanya menambahkan tombol untuk down. Sehingga kalian tidak susah - susah payah untuk menggerakan mouse atau jempol kalian bila browsing melalui hp.

Mungkin kita langsung saja mulai tutorial kali ini, silahkan ikuti langkah berikut ini.

Cara Memasang Tombol Go Up Dan Down Di Blogspot

Silahkan kalian copy code di bawah ini dan letakan code tersebut di atas code </head>.

Sebelumya kalian lihat terlebih dahulu, apakah code yang di bawah ini sudah ada atau belum di template kalian. Bila sudah ada kalian bisa lewatkan code yang di bawah ini dan lanjut ke tahap berikut nya.

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

Sekarang kalian copy lagi code di bawah ini dan letakan code tersebut di atas code </head>

Tombol UP Dan Down ini mempunyai 2 tampilan :

• Code Di bawah ini untuk Versi 1
  

  
  <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 code di bawah ini untuk Versi 2
  

  
  <style type='text/css'>
  /* Go Up and Down */
  #scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
  #scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
  #scrollToTop a:hover{color:rgba(0,0,0,0.5)}
  #top{position:absolute;top:0}
  </style>
  

Dan yang terakhir copy 2 code di bawah ini dan letakan code tersebut di atas code </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'/>

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

Untuk Demo kalian bisa lihat demo / tampilan nya di bawah ini.

• Result

Mungkin itu saja yang bisa saya berikan di kesempatan kali ini. Semoga bisa bermanfaat untuk sobat blogger. Selamat mencoba!

Share this post