Cara Membuat Tombol Go Up Dan Down Di Blogspot

Diposting pada

Membuat Tombol Go Up Dan Down Di Blog

Pada kesempatan ini saya ingin berbagi Cara Membuat Tombol Go Up Dan Down Di Blogspot. Dan cara nya pun sangat mudah. Sebelum kita mulai tutorial kali ini saya akan jelaskan apa itu tombol go up dan down. Secara ringkas tombol go up dan down merupakan tombol yang berada pada bagian sisi kiri untuk memudahkan pengunjung untuk mengscrool kembali ke atas maupun ke bawah hanya dengan sekali klik saja.

Tombol up dan down sebenarnya sama seperti tombol go to top yang biasa pada template-template yang dimana saat kita klik tombol tersebut kita akan menuju ke halaman atas. Untuk tombol up dan down ini fungsi nya hampir sama, yang membedakan nya hanya menambahkan tombol untuk down nya saja. Sehingga kalian tidak susah – susah payah untuk menggerakan mouse atau jempol kalian bila browsing melalui hp.

Nah bagi kalian yang ingin mencoba nya, mungkin kita langsung saja mulai tutorial kali ini, silahkan ikuti langkah-langkah berikut ini.

Baca Juga : Cara membuat tombol back to top yang smooth scroll di blog

Cara Membuat 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.

DEMO

Mungkin itu saja yang bisa saya berikan di kesempatan kali ini. Semoga artikel ini bisa bermanfaat untuk sobat blogger yang sedang mencari Cara membuat tombol go up dan down di blogspot. Selamat mencoba!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *