Cara Memasang Back To Top Pada Html Blog
Cara memasang tombol back to top pada HTML blog sangat gampang sama halnya artikel yang sebelumnya yang membahas "Cara Membuat Tombol Back To Top di Blog Dengan Mudah", namun kini saya akan menjelaskan bagaimana caranya biar tidak disimpan pada widget melainkan eksklusif pada html template blog Anda yang akan dipasang.
Perbedaannya yang dipasang pada html blog, instruksi 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 damai saya akan menjelaskannya bagaimana cara memasang tombol back to top tersebut pada html.
Selesai sudah klarifikasi yang saya berikan yang membahas Cara Memasang Back To Top pada HTML Blog. Untuk desain lainnya misalkan warna ataupun icon Anda sanggup mengubahnya sesuai keinginan. Terima kasih sudah membaca artikel ini bagikanlah artikel apabila dinilai sanggup bermanfaat bagi orang lain. Sumber http://www.bloggars.com/
Perbedaannya yang dipasang pada html blog, instruksi 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 damai 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" sesudah itu masukan instruksi script berikut dibawah instruksi <head>.
- Setelah script diatas sudah ada pada template blog, masih pada edit html Anda cari instruksi </body> atau </footer> dan sesudah menemukan salah satunya masukan instruksi script berikut sempurna diatasnya instruksi tersebut.
- Kemudian masukan instruksi css dibawah ini sempurna diatas instruksi ]]></b:skin> atau dibawah instruksi <style type='text/css'> untuk style/desain tombolnya.
- Setelah semua instruksi 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
Berikut yakni 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 instruksi <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 sanggup 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 klarifikasi yang saya berikan yang membahas Cara Memasang Back To Top pada HTML Blog. Untuk desain lainnya misalkan warna ataupun icon Anda sanggup mengubahnya sesuai keinginan. Terima kasih sudah membaca artikel ini bagikanlah artikel apabila dinilai sanggup bermanfaat bagi orang lain. Sumber http://www.bloggars.com/