Cara Menciptakan 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 sanggup kalian terapkan di blog kalian. Tombol go up dan go down ini mempunyai fungsi yang hampir sama dengan tombol to top yang biasa dipakai oleh para designer blogger, akan tetapi tombol go up dan go down ini mempunyai 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, alasannya Tutorial Cara Memasang Tombol Go Up dan Go Down di Blog ini juga masih gres dan post yang berkaitan dengan ini saya temukan dari blog designer yang namanya sudah tidak abnormal lagi bagi kancah blogger.

Nah, untuk kalian yang ingin menciptakan 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 sajian 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 isyarat berikut dan letakkan sebelum isyarat </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 isyarat berikut ini dan letakkan sebelum isyarat </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 isyarat berikut ini sebelum isyarat </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 sanggup saya bagikan kali ini, Semoga Bermanfaat dan Salam luar biasa.

Source : https://info.materialapk.com/search?q=cara-memasang-tombol-go-up-dan-go-down

Share this post