Recents Posts

Monday, July 9, 2018

Cara Menciptakan Tombol Back To Top Pure Javascript Di Blogger

Leave a Comment
Cara Membuat Tombol Back To Top Pure Javascript Di Blogger Cara Membuat Tombol Back To Top Pure Javascript Di Blogger

Tombol Back To Top ialah sebuah tombol kecil yang biasanya terletak pada bab kanan bawah pada tampilan suatu blog. Kegunaan dari tombol ini sangat sederhana, yaitu untuk kembali ke tampilan atas halaman.

Dengan adanya tombol ini maka anda tidak perlu lagi melaksanakan scroll keatas apabila ingin melihat kembali halaman awal blog.

Anda hanya perlu menekan tombol Back To Top yang telah anda pasang sebelumnya, dan otomatis halaman blog akan kembali ke tampilan atas blog.

Untuk cara pemasangan tombol ini sendiri juga sangat mudah, untuk lebih jelasnya mengenai pemasangan tombol Back To Top ini silahkan ikuti caranya dibawah ini:

1. Langkah yang paling awal ialah dengan login ke blogger.com
2. Pada dashboard blogger, silahkan pilih Tema>>Edit HTML
3. Cari aba-aba </head> dengan memakai CTRL+F

4. Kemudian letakkan aba-aba berikut, diatas aba-aba </head> tadi
<style type='text/css'> /*<![CDATA[*/ /*Back To Top*/ .scroll-button{box-sizing:border-box;font-size:1.2rem;line-height:2rem;padding:3px;width:38px;height:38px;right:20px;bottom:20px;visibility:visible;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;cursor:pointer;transition:all 1.2s;-webkit-transition:all 1.2s;-moz-transition:all 1.2s;-ms-transition:all 1.2s;-o-transition:all 1.2s;background:none;border:solid 2px rgb(210,104,211);color:rgb(249,104,211);border-radius:0%;position:fixed} .scroll-button:hover{filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1} .scroll-button--hidden{filter:alpha(opacity=0);filter:progd:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;visibility:hidden} /*]]> </style> <script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/backtop.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> 

5. Simpan Tema dan selesai

Sangat gampang dan simpel bukan? nah kini anda sanggup memanfaatkan tombol ini untuk melaksanakan scroll ke halaman atas pada tampilan blog dengan sangat mudah.

Semoga cara ini sanggup bermanfaat untuk anda ya. Terimakasih dan hingga jumpa di pembahasan selanjutnya.
If You Enjoyed This, Take 5 Seconds To Share It

0 Comments:

Post a Comment