Pada postingan
yang sebelumnya saya sudah menjelaskan tentang bagaimana cara mengetahui visitor kita yang online di
blog kita (ganti dengan link
posting agan). Kali ini saya akan membagikan sebuah tutorial yang berguna
untuk menyamankan visitor di blog kita. Tutorial kali ini adalah cara membuat
tombol back to tap dengan efek pantulan di blog kita.
Back to top
sangat membantu sekali bagi visitor kita, karena mereka bisa kembali lagi ke
bagian atas blog kita tanpa harus menscrollnya, melainkan hanya dengan menakan
tombol back to top. Hamper semua blogger sekarang ini menggunakan tombol back
to top di blognya. Namun, bagi anda yang belum mengerti bagaimana cara
membuatnya tidak usah khawatir. Karena cara membuat sangatlah mudah, anda
tinggal mengikuti tutorial berikut ini.
Cara membuat tombol back to top smooth :
1. Silahkan
log in terlebih dahulu ke dashboard blogger anda masing – masing.
2. Jika sudah,
masuk ke menu “Template”
3. Untuk
berjaga – jaga jika nanti terjadi kesalahan pada saat edit, back up terlebih
dahulu template anda.
4. Sekarang
menuju “Edit HTML” pada template anda.
5. Cari kode
</head> di template anda, gunakan Ctrl +F atau tekan F3 untuk mempermudah
pencarian. Jika sudah ketemu, silahkan letakkan kode berikut tepat diatas kode
</head> tadi.
|
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {
if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else {
$('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return
false})});
</script>
|
6. Simpan
template anda.
7. Sekarang,
masuk ke menu “Layout” atau “Tata letak” di template anda.
8. Tambahkan
widget “Javascript/HTML”
9. Letakkan
kode berikut ini pada kolom Javascript/HTML
|
<style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed;
bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to
top'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3V1ZJMuYY7JixaOgHhqAZr4l3vBLUBXNda5_mNHOk8_9zPrxmhrNv8CNwPs6l535pCWELMKjSXfFKk2nliTL_6w2W3dkJztctIq_CtIG6NHVaPeuLMT-p19k8YybAw1TU8Yiq3YizULtU/s1600/arrow-up_basic_blue.png'/></div>
|
10. Terakhir
simpan widgetnya.
Sekarang coba
lihat blog anda dan scroll sedikit kebawah, lihat apakah sudah ada tombol back
to topnya atau belum. Nah, itulah tutorial cara membuat tombol back to top ti
blog. Sekian tutorial kali ini, semoga bermanfaat bagi anda.
0 komentar:
Posting Komentar