BloggARsPerbedaannya yang dipasang pada html blog, kode script harus dipisah antara script jQueri, style css dan script tombolnya. Pemasangannya tidak cukup sulit untuk dilakukan apabila Anda sudah paham script-script yang ada pada html sebuah blog. Namun apabila Anda belum mengerti tenang saya akan menjelaskannya bagaimana cara memasang tombol back to top tersebut pada html.
Memasang Tombol Back To Top pada HTML Blog
- Sebelumnya pasang terlebih dahulu script yang wajid ada pada template blog Anda. Pada Dashboard blogger masuk ke "Template" > "Edit HTML" setelah itu masukan kode script berikut dibawah kode <head>.
- Setelah script diatas sudah ada pada template blog, masih pada edit html Anda cari kode </body> atau </footer> dan setelah menemukan salah satunya masukan kode script berikut tepat diatasnya kode tersebut.
- Kemudian masukan kode css dibawah ini tepat diatas kode ]]></b:skin> atau dibawah kode <style type='text/css'> untuk style/desain tombolnya.
- Setelah semua kode script yang saya berikan diatas disimpan pada html blog Anda, maka klik "Simpan template" dan lihat tombol back to top pada blog Anda sudah ada.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
<div class="back-to-top">Ganti Dengan Tombol Back To Top yang Anda Inginkan</div>
<script type="text/javascript">
/***www.bloggars.com-style***/
jQuery(document).ready(function() {
var offset = 1000;
var duration = 700;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<script type="text/javascript">
/***www.bloggars.com-style***/
jQuery(document).ready(function() {
var offset = 1000;
var duration = 700;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
/* Back To Top www.bloggars.com */
.back-to-top{background:#ff6550;border:medium none;border-radius:50%;bottom:10px;cursor:pointer;display:none;height:50px;opacity:1;position:fixed;right:10px;text-align:center;width:50px;}
.back-to-top:hover{box-shadow:1px 2px 3px 0 #666;}
.back-to-top{background:#ff6550;border:medium none;border-radius:50%;bottom:10px;cursor:pointer;display:none;height:50px;opacity:1;position:fixed;right:10px;text-align:center;width:50px;}
.back-to-top:hover{box-shadow:1px 2px 3px 0 #666;}
Kumpulan Tombol Back To Top Design BloggARs
Berikut adalah icon awesome yang sangat cocok untuk dijadikan tombol back to top untuk blog Anda. Namun pastikan terlebih dahulu bahwa template blog sudah terdapat stylesheet css untuk font awesome yang akan dipasang. Apabila belum masuk kembali pada "Template" "Edit HTML" dan masukan script berikut dibawah kode <head>.Script Icon pada tabel dibawah untuk menggantikan kata yang berwarna merah pada script back to top yang saya berikan diatas. Polihlah salah satu sesuai yang Anda inginkan dan cocok dengan template blog. Namun untuk tombol lainnya Anda bisa mendapatkannya di artikel sebelumnya.<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
| Icon | Script Icon |
|---|---|
| <i aria-hidden="true" class="fa fa-arrow-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i> | |
| <i aria-hidden="true" class="fa fa-arrow-up" style="color: #fff; font-size:30px; padding-top:9px;"></i> | |
| <i aria-hidden="true" class="fa fa-arrow-circle-o-up" style="color: #fff; font-size:36px; padding-top:7px;"></i> | |
| <i aria-hidden="true" class="fa fa-chevron-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i> | |
| <i aria-hidden="true" class="fa fa-chevron-up" style="color: #fff; font-size:30px; padding-top:6px;"></i> |
Selesai sudah penjelasan yang saya berikan yang membahas Cara Memasang Back To Top pada HTML Blog. Untuk desain lainnya misalkan warna ataupun icon Anda bisa mengubahnya sesuai keinginan. Terima kasih sudah membaca artikel ini bagikanlah artikel apabila dinilai dapat bermanfaat bagi orang lain.
2 Comments :
ini mempengaruhi kecepatan blog nggk ya mas?
Ringan kok kang, soalnya tidak menggunakan gambar melainkan icon dari javascript awesome yang sinkron digunakan.
Beri komentar dengan menggunakan Bahasa yang Baik dan Sopan!
Didalam komentar dilarang mencantumkan link hidup dan apabila Anda melakukannya maka Admin berhak menghapusnya.