Cara Membuat Tombol Go Up dan Go Down di Blog

Pada tutorial blogger kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Tombol Go Up dan Go Down di Blog yang dapat kalian terapkan di blog kalian. Tombol go up dan go down ini mempunyai fungsi yang hampir sama dengan tombol to top yang biasa digunakan oleh para designer blogger, akan tetapi tombol go up dan go down ini memiliki saudara kembar yang berfungsi untuk melompat ke paling bawah halaman blog dan tentunya akan mempermudah pengunjung yang hanya ingin membaca artikel terakhir ataupun artikel terkait dengan artikel yang sedeng mereka baca.

Tidak hanya itu, tombol go up dan go down ini mempunya tampilan material design dan simple, dan  juga masih sedikit orang yang menggunakannya, karena Tutorial Cara Memasang Tombol Go Up dan Go Down di Blog ini juga masih baru dan post yang berkaitan dengan ini saya temukan dari blog designer yang namanya sudah tidak asing lagi bagi kancah blogger.

Nah, untuk kalian yang ingin membuat ataupun ingin memasang tombol go up dan go down ini, silahkan ikuti tutorial berikut :

Cara Membuat Tombol Go Up dan Go Down di Blog

Langkah Pertama silahkan login ke akun Blogger kalian > Kemudian klik menu Tema > Kemudian klik Edit HTML

Perlu kalian ketahui bahwa pemasangan tombol go up dan go down ini disertakan icon dari Fontawesome, jadi untuk kalian yang belum memasang Fontawesome silahkan tambahkan kode berikut dan letakkan sebelum kode </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>

Jika sudah menambahkan Fontawesome, selanjutnya silahkan tambahkan salah satu kode berikut ini dan letakkan sebelum kode </head>

Versi M

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

Versi L

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

Selanjutnya silahkan tambahkan kedua kode berikut ini 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'/>

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

Terakhir, silahkan simpan setekan template kalian dan lihat hasilnya.

Sekian tutorial bagaimana Cara Membuat Tombol Go Up dan Go Down di Blog yang dapat saya bagikan kali ini, Semoga Bermanfaat dan Salam luar biasa.

Source : https://www.arlinadzgn.com/2018/05/cara-memasang-tombol-go-up-dan-go-down.html

Berbagi :