H
allo sobat
AHS, kali ini saya akan membagikan tutorial tentang
cara membuat back to top,
seperti yang kita ketahui sobat,
back to top itu di gunakan untuk kembali ke atas *you don't say??!!*
ha ha bercanda xD..
tombol back to top itu sebenarnya di gunakan/ dipakai agar kita selaku pengunjung tidak capek" harus men-scroll satu" artikel anda.
macamnya apa saja?
untuk macam itu terbilang sangat banyak sekali, mulai dari back to top biasa(yang hanya menggunakan anchor text untuk kembali ke atas) sampai memakai css untuk styling juga jquery agar terlihat smooth/bagus/enak di lihat.
oke,anda penasaran bukan back to topnya seperti apa?? eits sabar dulu.. *ambil teh hangat*
yuk kita mulai tutorialnya sobat..
Demo
gimana? udah tau kan demonya? langsung aja yuk :v..
Cara Membuat Back To Top Ala AHS
- login ke blogger anda
- lalu klik/sorot nama blog anda > cari menu template *lihat lagi tutorial" sebelumnya,langkah ini juga sudah saya buat kok*
- setelah itu, (waktu sesudah membuka template) tekan Ctrl+F > cari kode ]]></b:skin>
- ketika sudah ketemu copy kode dibawah ini tepat pada atas kode ]]></b:skin>
#AHSTOP{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#AHSTOP a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#AHSTOP img{border:0}
#AHSTOP a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
Eitss.. anda belum selesai sobat..
- jika sudah copy lagi kode dibawah ini lalu paste di bawah kode </body> *langkah mencarinya sama seperti diatas* (jika tidak ada cari </body)
<div id='AHSTOP'>
<a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
<a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
<a href='#header' title='Ke Atas'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
<a href='#footbar' title='Ke Bawah'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
</div>
- nah, sekarang sudah selesai, save template anda
Pengaturan/Setting
- Untuk menampilkan di kanan,ganti right:1px dengan left:1px
- Untuk link kembali ke atas(#header), jika pada template anda berbeda kode gantilah itu.
- Untuk link kembali ke bawah(#footbar),jika pada template anda, misalkan adanya hanya footer-wrapper,maka gantilah itu(#footbar) dengan #footer/#footer-wrapper *yang penting sesuaiin dengan kode pada template anda*
Oke,kalian sudah selesai sobat dalam tutorial
cara membuat back to top,jika ada pertanyaan silahkan komentar dibawah,oke??
maka, demikianlah artikel
cara membuat back to top,sampai jumpa lagi.