Cara Sederhana Membuat dan Memasang Tombol Back To Top Ala Evo Magz di Template Blog anda- Ada banyak sekali macam - macam tombol back to top , namun kali ini saya akan share membuat back to top seperti template evo magz mas sugeng . mengapa saya memilih untuk back to top ala evo magz ? karena back to topnya itu lho ringan banget dan menggunakan sedikit sekali kode java script
Scroll to Top atau yang biasa di sebut back to top merupakan sebuah widget dimana ketika kita menekan tombol tersebut maka secara otomatis kita akan kembali lagi ke bagian atas , untuk lebih jelasnya silahkan tekan tombol back to top saya [ jika masih terpasang ]
Berikut Cara Membuat Tombol Back To Top Ala Evo Magz di Blog
- Pertama kita pasang dulu css font awesome , karena back to top ini menggunakan font awesome.
Caranya pasang kode javascript berikut dan letakan diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
- Kemudian pasang css dibawah ini tepat diatas
]]></b:skin>
atau </style>
/* Back To Top */
#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}
- Setelah itu kita panggil back to topnya dengan memasang html dan javascript dibawah ini dan letakan diatas kode
</body>
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</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>
- Terkahir simpan Template dan lihat hasilnya
Taraa kini anda sudah berhasil
Membuat Sekaligus MemasangTombol Back To Top di Template Blog anda yang mirip evo magz . untuk mengeceknya silahkan anda lihat di sebelah pojok kanan bawah , adakah tombol back to topnya ? jika ada bearti anda berhasil menerapkan tutorial ini
6 Komen Tips Membuat Tombol Back To Top Ala Evo Magz di Blog
Wawww kerenn niihh gan tutorial back to topnya :) saya izin Simpan Tutorialnya yaahhh ^_^
owhh iyaa salam kenal dari zgas-pc
silahkan mas , salam kenal kembali :)
kalau dijadiin 3 kolom gmn ya gan?? pencerahaannya gan..
keren terimah kasih mas
work di blog ane,
makasih gan
cara bikintombol download , demo di templatenya mas sugeng gimana???
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish