Cara 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 Showdzgn.com */
#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 Showdzgn.com 
$(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.
Tampilkan Komentar
Sembunyikan Komentar

6 Responses to "Cara Membuat Tombol Back To Top Dengan Efek Animasi Roket"

  1. Nice tutorial. BTW thumbnail nya kaya kenal :v wkwk

    ReplyDelete
    Replies
    1. Hehehehe diedit sikit gan, Terima kasih sudah berkunjung Mas Adan

      Delete
  2. Replies
    1. Bukan kok gan, ini beda dari yang lain pastinya. Terima kasih sudah berkunjung Gan Nofree

      Delete
  3. Kok di blog saya tidak muncul ya padahal sukses ga ada yang salah

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel