Cara Mudah Membuat Tombol Back To Top Dengan Efek Animasi Roket

Pada kesempatan kali ini saya akan membagikan sebuah tutorial Cara Membuat Tombol Back To Top Dengan Efek Animasi Rocket di blog yang berfungsi sebagai tombol yang akan kembali kehalaman atas dari blog ketika tombol tersebut ditekan dan menggeluarkan efek animasi roket.

Tombol back to top ini akan mempermudah para pembaca untuk kembali kehalaman atas hanya dengan 1 klik saja, cara ini sangat berpengaruh untuk para blogger yang memiliki artikel yang sangat panjang. Yang berbeda dengan tombol yang satu ini adalah, Tombol ini menggunakan Gambar roket yang meluncur dengan diberi sentuhan animasi efek roket.

Cara Membuat Tombol Back To Top Dengan Efek Animasi Roket

Sebelum anda melakukan tutorialnya, silahkan kamu Hapus terlebih dahulu kode BACK TO TOP bawaan template kamu, agar tidak terjadi bentrok saat menerapkan widget ini.

1. Silahkan login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Back to top By expxo.net */
#back-to-top{color:#fafafa}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:998}
.back-to-top:hover svg{transform:rotate(-45deg);margin:-1px}
.back-to-top:hover svg path{fill:#21ef8b}
.back-to-top svg{width:34px;height:34px;transition:transform .25s ease-out}
.tutop{color:#fafafa;font-size:1.4em;width:45px;height:45px;border-radius:100px;border:none;outline:0;background:#332d4f;z-index:999;bottom:20px;right:20px;padding:6px 9px;cursor:pointer}

4. Selanjutnya, silahkan kamu pasang kode dibawah ini tepat DIBAWAH kode <footer

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<button class='tutop'><svg viewBox='0 0 29 24'>
<path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z' fill='#fff'></path>
</svg></button></a></div>

5. Kalau sudah silahkan kamu pasang kode JS berikut ini tepat DIATAS kode </body>

<script type='text/javascript'> 
//<![CDATA[ 
// To Top By Expxo.net 
$(window).scroll(function(){200<$(this).scrollTop()?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").hide().click(function(){return $("html, body").animate({scrollTop:0},1e3),!1}); 
//]]></script>

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana untuk artikel kali ini tentang Cara Membuat Tombol Back To Top Dengan Efek Animasi Roket bagi kamu yang maish bingung atau ada pertanyaan lain seputar blogger silahkan komen di kolom komentar dibawah artikel ini.