×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Tombol Back To Top Blogger Dengan Animasi Roket

Jagoan Redesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Tombol Back To Top Blogger Dengan Animasi Rocket di blog yang berfungsi sebagai tombol yang akan kembali kehalaman atas dari blog ketika tombol tersebut ditekan dan menggeluarkan efek animasi roket.


Cara Membuat Tombol Back To Top Blogger Dengan 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 Blogger Dengan 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 kamu.
2. Selanjutnya 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 Jagoan Redesign */
#back-to-top svg{width:24px;height:24px;vertical-align:-4px}#back-to-top:hover{box-shadow:0 0 .5rem 0 #444;background:#77ffad;border-radius:100px;border:2px solid #fff}#back-to-top{background:#1b80e3;border:2px solid #fff;color:#444;padding:8px 10px;box-shadow:0 0 .5rem 0 #444;font-size:24px;border-radius:100px;transition:transform .25s ease-out}.back-to-top:hover{transform:rotate(-45deg)}.back-to-top{position:fixed!important;position:absolute;bottom:25px;right:20px;transition:transform .25s ease-out;z-index:998}

4. Kemudian kalian cari kode </footer> dan letakkan kode dibawah ini tepat DIBAWAH kode tersebut.
<div class='back-to-top'><a href='#' id='back-to-top' title='Kembali ke Bulan'>
<svg viewBox='0 0 24 24'>
<path d='M7.961 17.563c-.182-.037-.366.044-.461.203-.475 1.02-1.576 1.592-2.684 1.395-.203-1.108.373-2.213 1.397-2.681.204-.125.271-.392.146-.597-.067-.111-.182-.188-.311-.205-1.577-.297-3.193.262-4.252 1.469C.545 18.865.074 21.03.5 23.113c.031.185.175.329.359.359.498.081 1.002.12 1.508.12 1.834.102 3.625-.581 4.931-1.873.89-1.054 1.259-2.452 1.007-3.808-.021-.187-.161-.337-.345-.375l.001.027zM23.778.203c-.171-.169-.522-.089-.522-.089C22.621.04 21.98.003 21.339.001c-4.154-.043-8.153 1.576-11.106 4.497-.36.362-.7.742-1.02 1.139-1.402-.65-3.008-.709-4.455-.165-2.287.984-3.623 3.787-4.729 6.671-.087.224.025.476.249.562.144.055.304.031.425-.064 1.566-1.163 3.618-1.445 5.44-.749L5.6 13.856c-.05.184.026.377.187.479 1.466 1.096 2.767 2.395 3.863 3.857.103.163.298.239.482.188l1.963-.539c.719 1.826.436 3.893-.749 5.456-.148.188-.116.463.071.61.121.096.285.12.428.064 2.883-1.109 5.686-2.443 6.665-4.722.544-1.446.487-3.049-.161-4.451.395-.326.772-.672 1.133-1.036 3.381-3.44 5-8.241 4.392-13.026 0 0 .076-.352-.096-.524V.203zM21.339.87c.563 0 1.127.029 1.688.088.079.771.103 1.548.07 2.322-.611-.066-1.184-.34-1.623-.771-.438-.437-.713-1.009-.777-1.623.209-.011.422-.018.636-.018l.006.002zM10.846 5.112C13.262 2.716 16.438 1.24 19.828.94c.07.677.33 1.318.749 1.855l-2.698 2.697c-1.529-1.203-3.742-.939-4.946.59-1.005 1.278-1.005 3.078 0 4.356l-3.147 3.147c-.811-.785-1.689-1.498-2.626-2.131.662-2.394 1.932-4.58 3.686-6.342zm7.524 3.159c.001 1.469-1.188 2.66-2.657 2.66-1.469.002-2.659-1.188-2.66-2.656 0-1.47 1.189-2.66 2.657-2.661h.003c1.467 0 2.656 1.19 2.657 2.657zM1.314 11.269c.941-2.254 2.09-4.268 3.779-4.994 1.154-.428 2.428-.396 3.559.09C7.639 7.78 6.871 9.36 6.387 11.033c-1.645-.667-3.498-.581-5.074.233l.001.003zm8.891 6.19c-1.074-1.37-2.311-2.604-3.683-3.677l.395-1.434c1.845 1.275 3.444 2.874 4.722 4.718l-1.434.393zm7.508 1.425c-.727 1.698-2.737 2.848-4.989 3.789.811-1.578.893-3.432.225-5.074 1.677-.488 3.259-1.26 4.679-2.278.484 1.134.515 2.412.083 3.566l.002-.003zm-5.186-2.06c-.629-.937-1.34-1.816-2.123-2.628l3.147-3.148c1.528 1.203 3.743.939 4.945-.59 1.006-1.278 1.006-3.078 0-4.356l2.698-2.698c.535.418 1.177.677 1.85.75-.299 3.387-1.772 6.563-4.166 8.979-1.763 1.754-3.947 3.022-6.343 3.684l-.008.007zZ' fill='#ffffff'></path>
</svg>
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>

5. Kalau sudah silahkan klik SIMPAN dan Selesai.

Nah, itu adalah tutorial Cara Membuat Tombol Back To Top Blogger Dengan Animasi Roket, apabila kamu memiliki pertanyaan silahkan tanya di kolom komentar dibawah artikel ini. semoga artikel ini  bermanfaat dan terimakasih.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel