Siapa yang tidak mengenal template legendaris buatan Mas Sugeng? Mereka para penggemarnya menyebutnya sebagai template sejuta umat. Template itu tidak hanya laris di beli tapi juga di 'bajak' ya melalui inspect elemen seorang yang memiliki pengatahuan koding akan mudah menjiplak template apapun.
Dalam kesempatan ini Saya ingin mengungkapkan cara membuat tombol back to top seperti pada template viomagz karena elemen buatan Mas Sugeng ini cukup reponsif dan menarik untuk di terapkan ke dalam template. Baiklah kita mulai.
1. Tambahkan CSS
- Masuk pengaturan blogger
- Pilih Tema
- Pilih Edit Tema dan cari kode </head>
Letakan kode berikut di atas </head>:
<style>/* Back to top */
#back-to-top {
background:rgb(249, 0, 255);
color:blue;
padding:0px 0px;
font-size:24px;
border-radius: 50px;
box-shadow: 0 0px 0px 0 rgb(240, 255, 240), 0 1px 1px 0 rgb(240, 255, 240);
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 15px;
right: 5px;
z-index: 998;
}</style>
2. Tambahkan HTML/XML:
Masih di dalam opsi halaman Edit HTML (HTML Editor), cari kode <body> atau kode <body expr:class='"loading" + data:blog.mobileClass'>
Dan letakan kode berikut tepat di bawahnya:
Dan letakan kode berikut tepat di bawahnya:
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z' fill='#000000'/>
</svg>
</a></div>
3. Terakhir Tambahkan JavaScript
Cari kode </body> dan letakan kode JavaScript berikut tepat di atasnya:
<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>
Save template
Pada saat sekarang Mas Sugeng telah merilis template terbaru buatannya yakni Link Magz. Bedanya sama viomagz selain tampilan headernya, template ini menurut pembuatnya lebih di peruntukan untuk keperluan Jualan alias bisnis Online. Silahkan cari di Google.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!
Thanks sudah berbagi..
BalasHapusSama sama
HapusA great tutoring!
BalasHapusI am so left behind, I have no idea about who is mas sugeng :)
Thanks for sharing the tips and tricks.
Everyone just have their interest and become the great one in their field, just only when he/she fight for it. And you have what we do not have..😊
HapusWah keren nih bisa dicoba. Memang ya template Mas Sugeng tuh booming bgt. Hhh
BalasHapusCaranya mudah sekali
BalasHapusBisa dipahami dan bisa langsung diterapkan
Punya saya juga menggunakan kode yang hampir mirip dengan diatas
Karena tombol back to top itu penting juga