Cara Membuat Tombol Back To Top Dengan Animasi Roket di Blogger

Saat ini bagi seorang blogger dalam mengelola blog, tentu berlomba - lomba akan membuat blog mereka berbeda dengan blog lain. Biasanya sebuah blog dibuat seunik mungkin untuk menarik minat pengunjung, blog yang unik biasanya mudah diingat oleh pengunjung ataupun sebuah ciri khas dari blog tersebut.

Uniknya sebuah blog itu juga dapat memberikan nilai plus bagi sipemilik blog, itu menandakan bahwa si pemilik blog memperhatikan detail sebuah blog yang ia kelola. Keuntungan lainnya juga dapat memberikan ilmu bagi si pemilik blog, tidak serta merta menerima template yang dia dapatkan khususnya template premium.

Dengan memodifikasi blog mereka agar kelihatan unik dan juga belajar dari pengalaman mengotak atik kode html apalagi bagi blogger yang masih awam masalah html. Salah satunya yang sering dimodifikasi adalah warna, posisi ikon menu, headernya dan juga tidak ketinggalan tombol "Back To Top"

Setelah sebelumnya saya telah memberikan tutorial Cara Buat Baca Juga Ditengah Artikel Blog yang tampilannya biasa saja yaitu cuma tampilan anak panah, kali ini saya akan memberikan tutorial Cara Membuat Tombol Back to Top Animasi Roket Meluncur ke atas.

Cus kita simak langkah-langkahnya

Langkah 1. Kalian pastikan dulu bahwa blog sudah terpasang kode j Query ya sob

Langkah 2. Masuk Halaman Dasbor kemudian pilih tema/template lalu klik Edit HTML
Langkah 3. Tambahkan kode CSS berikut, kemudian letakkan diatas </style>]]> atau </b:skin>. Untuk memudah pencarian tekan CTRL + F

/* Rocket Back to Top by igniel.com */
.ignielRocket svg {width:50px; height:50px; transition:all .3s ease;}
.ignielRocket svg path {fill:#008c5f}
.ignielRocket:hover svg, .ignielRocket.launch svg {transform:rotate(-45deg);}
.ignielRocket:hover svg path, .ignielRocket.launch svg path {fill:#ff5722}
.ignielRocket {visibility:hidden; opacity:0; position:fixed; right:30px; z-index:99; cursor:pointer; border-radius:100px; bottom:-30px;}
.ignielRocket.show {visibility:visible; opacity:1; bottom:30px; transition: all .5s ease;}
.ignielRocket.launch {visibility:visible; opacity:1; bottom:0px; transition: all 0s ease;}
.ignielRocket.launch:after {background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z' fill='%23ff5722'/></svg>") no-repeat center center; background-size:30px 30px; content:''; display:block; width:30px; height:30px; transform:rotate(90deg); position:relative; text-align:center; margin:auto;}

Langkah 3. Tambahkan kode berikut diatas </body>

<div class='ignielRocket'>
  <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
    <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'/>
  </svg>
</div>

<script> //<![CDATA[
  // Rocket Back to Top by igniel.com
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('A a=["\\i\\b\\j","\\j\\b\\c\\g\\i\\g\\b\\k","\\z\\g\\y\\k\\g\\h\\d\\x\\b\\e\\t\\h\\i","","\\e\\c\\c","\\d\\f\\I\\k\\e\\p","\\q\\h\\o\\b\\B\\h\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d\\H\\b\\j","\\c\\p\\b\\E","\\f\\m\\m\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d","\\D\\C\\n\\n\\j\\F","\\f\\k\\g\\o\\f\\i\\h","\\n","\\p\\i\\o\\d\\N\\R\\b\\m\\J","\\e\\d\\g\\e\\t"];r U(l){$(w)[a[Q]](r(){$(a[2])[a[1]]()[a[0]]==-K&&$(a[2])[a[6]](a[5])[a[4]]({u:a[3]});O $(w)[a[7]]()>M?$(a[2])[a[9]](a[8]):$(a[2])[a[6]](a[8])}),$(a[2])[a[L]](r(){$(V)[a[9]](a[5])[a[s]]({u:a[P]},l);$(a[T])[a[s]]({S:a[G]},l)})}',58,58,'||||||||||_0x2bf4|x6F|x73|x6C|x63|x61|x69|x65|x74|x70|x6E|_0x1aefx2|x64|x30|x6D|x68|x72|function|12|x6B|top|x43|document|x52|x67|x2E|var|x76|x31|x2D|x77|x78|13|x54|x75|x79|100|15|300|x2C|return|11|10|x62|scrollTop|14|ignielRocket|this'.split('|'),0,{}));
  ignielRocket(750);
//]]> </script>

ANGKA YANG DITANDAI ADALAH KECEPATAN ROKET MELUNCUR KEATAS DALAM SATUAN MILIDETIK ATAU 0,75 DETIK

Langkah 4. Kemudian simpan setelan dan lihat hasilnya.

Selamat Mencoba sob

Sumber : Igniel.com

PayuBaco

Cara Membuat Tombol Back To Top Dengan Animasi Roket di Blogger

2 komentar