Hello sobat ICloudzer kali ini admin akan membahas mengenai tutorial blogger yakni bagaimana sih caranya membuat back to top menggunakan icon roket dan bisa bergerak ketika disentuh
Info: Okay jika kamunya sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama okay
Back to top
Sepertinya admin sering sekali deh membahas mengenai cara pembuatan back to top, namun kali ini yang membedakannya adalah tampilan dari Back to top nya yang sedikit berbeda, nah jikankamu terapkan Back to top diblog milik kamu pastinya Bakalan membuat blog kamu semakin kece tentunya
Fungsi Back to Top
Seperti yang sudah kita ketahui back to top merupakan fitur yang digunakan ketika pengunjung blog ingin menscroll tampilan blog keatas hanya dengan menggunakan sebuah tombol, bukan hanya tombol sih bisa juga icon, text, atau juga yang lainnya, dan untuk kali ini admin bakalan memberikan informasi mengenai cara membuat back to top gaya roket bergerak diblogger
Cara pembuatan
Baiklah sekarang saatnya admin bakalan memberikan informasi mengenai bagaimana sih cara membuat back to top pakai icon roket bisa gerak diblogger terbaru tersebut, silahkan kamu simak dan kamu pelajari artikel ini hingga selesai okay
Kode CSS
Seperti biasanya langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa letakkan diatas kode ]]><b:skin>
#TopToRah svg{width:24px;height:24px;vertical-align:-4px}
#TopToRah:hover svg path{fill:#fff}
#TopToRah:hover{box-shadow:0 0 .5rem 0rem #444;background:#f80000;);border-radius:50%;border:2px solid #fff}
#TopToRah{background:#f80000;border:2px solid #fff;color:#444;padding:6px 10px;box-shadow:0 0 .5rem 0rem #444;font-size:24px;border-radius:50%;transition:all .30s ease-in-out}
.TopToRah:hover{transform:rotate(-45deg)}.TopToRah{position:fixed!important;position:absolute;bottom:60px;right:20px;transition:transform .5s ease-out;z-index:998}Info: Atau kamu juga bisa menggunakan tag <style> untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah meyalin lagi kode HTML dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<div class="TopToRah">
<a href="#" id="TopToRah" title="back to top">
<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>Info: Fungsi dari HTML diatas adalah untuk menampilkan kode CSS tersebut
Kode Javascript
Selanjutnya kamu bisa memyalin kode javascript berikut ini kemudian tempelkan juga diatas kode </body>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#TopToRah').fadeIn();
} else {
$('#TopToRah').fadeOut();
}
});
$('#TopToRah').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>Info: Kamu harus meletakkan kode javascript diatas untuk bisa menampilkan tombol back to topnya okay
Contoh Tampilan
Agar kamunya tidak penasaran dengan tampilan back to topnya, admin sudah menyediakan sebuah contoh demo ataupun contoh tampilan dari tombol back to top diblogger, kamu bisa menggunakan tombol Aktifkan mode responsif untuk bisa melihat tombol Back to topnya
Info: Bagaimana sobat dengan contoh tampilannya keren bukan
Tema dan Posisi
Admin juga telah menyediakan beberapa tema dari tampilan back to top nya, kemudian admin juga telah menyediakan beberapa pilihan posisi yang bisa kamu gunakan untuk meletakkan back to top tersebut
Tema
Admin akan menampilkan contoh tampilan beserta kode CSS nya, jadi kamu hanya perlu menyalin dan meletakkan kode CSS saja tepat diatas kode </b:skin>
Info: Jadi kode CSS yang awal awal saya jabarkan tidak usah dipasang didalam blog, pilih beberapa tampilan CSS yang saya sediakan untuk beberapa warna
Tema Hitam
Dibawah ini adalah contoh tampilan dari Back to top, dengan tema warna hitam ataupun black
Info: Posisinya masih sama seperti Contoh demo yang admin jelaskan di atas
Kode CSS
Salin dan gunakan kode CSS dibawa ini untuk menampilkan back to top dengan menggunakan warna hitam
#TopToRah svg{width:24px;height:24px;vertical-align:-4px}
#TopToRah:hover svg path{fill:#fff}
#TopToRah:hover{box-shadow:0 0 .5rem 0rem #444;background:#000;);border-radius:50%;border:2px solid #fff}
#TopToRah{background:#000;border:2px solid #fff;color:#444;padding:6px 10px;box-shadow:0 0 .5rem 0rem #444;font-size:24px;border-radius:50%;transition:all .30s ease-in-out}
.TopToRah:hover{transform:rotate(-45deg)}.TopToRah{position:fixed!important;position:absolute;bottom:60px;right:20px;transition:transform .5s ease-out;z-index:998}Tema Biru
Tema Selanjutnya dari tampilan back to top adalah warna biru, kamu bisa melihat contoh back to top nya seperti berikut ini
Info: Posisinya juga masih sama seperti Contoh Demo yang saya jabarkan diatas
Kode CSS
Kamu bisa meyalin dan menghunakan kode CSS berikut ini, untuk bisa menggunakan tema bewarna biru tersebut
#TopToRah svg{width:24px;height:24px;vertical-align:-4px}
#TopToRah:hover svg path{fill:#fff}
#TopToRah:hover{box-shadow:0 0 .5rem 0rem #444;background:blue;);border-radius:50%;border:2px solid #fff}
#TopToRah{background:#blue;border:2px solid #fff;color:#444;padding:6px 10px;box-shadow:0 0 .5rem 0rem #444;font-size:24px;border-radius:50%;transition:all .30s ease-in-out}
.TopToRah:hover{transform:rotate(-45deg)}.TopToRah{position:fixed!important;position:absolute;bottom:60px;right:20px;transition:transform .5s ease-out;z-index:998}Tema Hijau
Tema berikutnya adalah tema warna back to top berwarna hijau, lihat contoh tampilannya seperti contoh dibawah ini
Info: Posisinya juga masih sama seperti Contoh demo yang saya jabarkan diatas
Kode CSS
Kamu bisa menyalin dan menggunakan kode CSS dibawah ini untuk menampilkan back to fop Tema hijau tersebut
#TopToRah svg{width:24px;height:24px;vertical-align:-4px}
#TopToRah:hover svg path{fill:#fff}
#TopToRah:hover{box-shadow:0 0 .5rem 0rem #444;background:green;);border-radius:50%;border:2px solid #fff}
#TopToRah{background:green;border:2px solid #fff;color:#444;padding:6px 10px;box-shadow:0 0 .5rem 0rem #444;font-size:24px;border-radius:50%;transition:all .30s ease-in-out}
.TopToRah:hover{transform:rotate(-45deg)}.TopToRah{position:fixed!important;position:absolute;bottom:60px;right:20px;transition:transform .5s ease-out;z-index:998}Posisi
Selain tema warna yang admin sediakan, admin juga menyediakan beberapa kode CSS lainnya, untuk meletakkan posisi dari back to topnya, kamu bisa memilih dari beberapa posisi dari tombol back to top yang telah admin sediakan dibawah ini
Posisi Kiri
Nah apabila kamu meneroakan posisi Kiri pada tampilan back to topnya, maka yang sebelumnya posisi dari back to top tersebut berada di Sebelah kanan maka aka berada disebelah kiri
Kode CSS
Kamu bisa menyalin dan menggunakan kode CSS dibawah ini, untuk bisa menggunakan posisi Sebelah kiri pada tampilan back to topnya
#TopToRah svg{width:24px;height:24px;vertical-align:-4px}
#TopToRah:hover svg path{fill:#fff}
#TopToRah:hover{box-shadow:0 0 .5rem 0rem #444;background:#f80000;);border-radius:50%;border:2px solid #fff}
#TopToRah{background:#f80000;border:2px solid #fff;color:#444;padding:6px 10px;box-shadow:0 0 .5rem 0rem #444;font-size:24px;border-radius:50%;transition:all .30s ease-in-out}
.TopToRah:hover{transform:rotate(-45deg)}.TopToRah{position:fixed!important;position:absolute;bottom:60px;left:20px;transition:transform .5s ease-out;z-index:998}Posisi Tengah
Posisi berikutnya ini adalah Posisi Tengah yang mana posisi yang sebelumnya berada di Sebelah kanan akan berpindah ke Posisi Tengah
Kode CSS
Kamu bisa salin dan gunakan kode CSS dibawah ini untuk bisa menggunakan tampilan back to top nya, berada pada Posisi Tengah
#TopToRah svg{width:24px;height:24px;vertical-align:-4px}
#TopToRah:hover svg path{fill:#fff}
#TopToRah:hover{box-shadow:0 0 .5rem 0rem #444;background:#f80000;);border-radius:50%;border:2px solid #fff}
#TopToRah{background:#f80000;border:2px solid #fff;color:#444;padding:6px 10px;box-shadow:0 0 .5rem 0rem #444;font-size:24px;border-radius:50%;transition:all .30s ease-in-out}
.TopToRah:hover{transform:rotate(-45deg)}.TopToRah{position:fixed!important;position:absolute;bottom:60px;left:50%;right:50%;transition:transform .5s ease-out;z-index:998}
