×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Tombol Back to Top Rocket Dengan Efek Rotasi


Anirock Site ~  Pada postingan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat tombol back to top dengan icon rocket bukan rocket meluncur ya.

Sebenarnya tutorial seperti ini sudah banyak yang bagikan namun mereka menyertainya dengan efek meluncur seperti rocket sungguhan, sedangkan saya disini hanya membuat tombol back to top dengan icon rocket disertai dengan efek rotasi ( Maaf jika kurang paham :v ). Untuk hasil tombol back to topnya kurang lebih sama seperti yang ada di web log ini.

Nah langsung saja kita ke tutorial bagaimana cara membuat tombol back to top dengan icon rocket.

Cara Membuat Tombol Back to Top Dengan Icon Rocket
Jika template kamu sebelumnya sudah memiliki tombol back-to-top, silahkan hapus terlebih dahulu semua kodenya, agar tidak bentrok
1. Pertama, login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, copy kode CSS dibawah ini terlebih dahulu, dan letakkan kode tersebut tepat diatas kode </b:skin> atau </style>,
/* Back to Top By Anirocksite */
#back-to-top svg {width:24px;height:24px;vertical-align:-4px;}
#back-to-top:hover{box-shadow:0 0 0.5rem 0rem #444;background:#ff69b4;border-radius:100px;border:2px solid #fff}
#back-to-top {background:#ff69b4;border:2px solid #fff;color:#444;padding:8px 10px;box-shadow:0 0 0.5rem 0rem #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. Setelah meletakkan kode CSS tersebut, copy kembali kode HTML beserta Script dibawah ini dan letakkan tepat diatas kode </body>,
<!-- Back to Top By Anirocksite -->
<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'/>
</svg> 
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>
5. Terakhir simpan atau save template tersebut.

Sekian tutorial bagaimana cara membuat tombol back to top dengan icon rocket disertai efek rotasi yang dapat saya bagikan, dan Semoga bermanfaat :D.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Membuat Tombol Back to Top Rocket Dengan Efek Rotasi"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With