Cara Memasang Tombol Go Up dan Go Down di Blogspot


Cara Memasang Tombol Go Up dan Go Down di Blogspot - Tombol Go up dan Go down terdapat di samping scrool bar blog, tombol ini berungsi untuk go dan backup pada halaman yang telah di baca sebelumnya.
 
Sehingga memudahkan pembaca untuk melakukan scrol ke bawah maupun ke atas, selian itu tombol ini juga di lengkapi dengan efek smooth scrool ke atas ataupun ke bawah dengan efek scrool yang halus.

Untuk memasang tombol tersebut ke dalam blog, kamu bisa mengikuti langkah-langkah di bawah ini.

Pertama silahkan masuk ke dalam blog pada bagian edit tema dan pilih edit HTML. Setelah itu simpan kode css ini di atas kode </head>

Untuk versi sederhana 
<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>
Lalu tambahkan kode berikut ke bagian </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> 
Selanjutnya tambahkan font awesome di bagian atas kode </head> namun jika template yang sudah kamu gunakan telah di pasang font awesome maka kamu tidak perlu memasang kode ini lagi
<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>
Terakhir save template blog kamu. 
Next Post Previous Post
No Comment
Add Comment
comment url