Buat kamu yang ingin memancahkan pengunjung blog kamu agar tidak susah, meng-scrol mouse ke atas dan kebawah mungkin atrikel ini bisa membantu untuk kamu. Back To Top adalah salah satu widget yang memungkinkan pengunjung blog kamu, mengklik button dan akan langsung menuju ke atas hanya dengan 1x klik, Widget ini menggunakan Javascript dan digabungkan dengan CSS.
Widget ini biasannya ditemukan di template keluaran terbaru, Seperti template dari arlina design, sora blogger template dan masih banyak lagi. Jadi jika blog kamu tidak memiliki fitur ini, segerah tambahkan dengan code dibawah ini. Karena bisa sangat membantu pengunjung blog anda. Tanpa basa basi lagi langsung saja.
Add JQuery di Blogspot.
- [message]
- ##check## Perhatian!!
- Sebelum memasukan kode-kode dibawah ini, Pastikan anda telah meng-install/menambahkan code JQuery terlebih dahulu Karena sangat dibutuhkan dibagian CSS, Carannya tepat seperti dibawah ini.
1. Masuk Blogger.com > Template > Edit HTML Letakan code dibawah ini tepat dibawah Code <head>
[<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>]
Masukan CSS & Menambahkan Javascript
1. Seperti biasa Masuk di blogger.com
2. Masuk>Template>Edit HTML> Lalu cari ]]></b:skin> atau bisa juga </style> Lalu masukan code dibawah ini, Tepat sebelum code yang sudah saya sebutkan tadi.
[.back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;
}]
3. Sesudah masukkan code CSS diatas, Selanjutnya cari code ini: </body> Lalu masukan code dibawah ini, Setelah itu save template agan.
- [message]
- ##check## Perhatian!!
- "Back to Top" bisa kamu ganti menjadi kembali ke atas atau juga yang lainnya, Terserah agan.
[<a href="#" class="back-to-top">Back to Top</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
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>]
No comments:
Post a Comment