Setiap kita ngeblog pasti pernah kan melihat gambar panah atau petunjuk yang mengarahkan kita untukback to top. Jika visitor atau pengunjung membaca artikel di blog sanha pasti di kanan blog akan ada tanda panah untuk mengarahkan kita untuk kembali ke top (atas) agar kita tidak perlu repot-repot lagi menggunakan scroll mouse ataupun scrollpad kita. Nah sanha akan memberikan tips untuk memasang button Back to Top yang akan sangat membantu sekali bagi pembaca dalam berselancar di dunia maya,khususnya ya di blog aku ini hehe, hanya dengan satu kali klik saja maka pembaca akan langsung di bawa ke bagian top ataupun bottom blog anda.
bentuknya akan seperti gambar dibawah ini.
Langkah Langkah nya :
1. Login Ke Blogger Kalian
2. Klik Design
3. Jangan Lupa Beri tanda centang pada Expand Template Widget.
4. Cari kode seperti ini ]]></b:skin>
5. Kemudian Pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
#floating-up {
position:fixed;_position:absolute;top:280px; right:0px; clip:inherit;
_bottom:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#floating-up a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#floating-up img
{
border:0;
}
#floating-up a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
6. Lalu tambahkan kode warna merah ini <a href="" name="to-bottom"></a> tepat diatas kode </body>
7. Kemudian cari kode <body> ( ini beda ama bodi yang ada di nomer 6 lhoo. Bedanya tanpa tanda / )
8. Setelah ketemu, tambahkan kode dibawah ini dibawah kode <body> tersebut.
<div id='floating-up'>9. Terakhir tinggal savetemplatenya, dan Abrakadabraaa....jadi deh,,
<div><a href='#' title='back to top'><img alt='back to top' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png'/></a></div>
<div><a href='#to-bottom' title='back to bottom'><img alt='back to bottom' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png'/></a></div>
</div>
Selamat Mencoba dan jangan lupa untuk memberitahukan ke teman2 dengan cara share yaa..
0 komentar:
Posting Komentar