Cara Pasang Icon Back To Top Dengan Efek Scroll Pada Blog. Tips blog
kali ini yaitu memasang salah satu fasilitas untuk memberikan kemudahan
kepada pengunjung blog dalam menjelajahi isi atau informasi-informasi
yang sudah dishare pada blog. Adapun tips yang saya maksud adalah Icon Back To Top Dengan Efek Scroll Pada Blog. Icon ini kadang para blogger memasangnya sekaligus yaitu icon back to top dan icon back to down.
Biasanya icon ini kita temukan pada blog di bagian kanan bawah ataupun
kanan bawah dan kanan atas tergantung keinginan admin blog tersebut
untuk memasangnya. Biasanya icon back to top yang saya lihat pada
blog-blog yang saya kunjungi, ketika diklik langsung ke bagian atas
halaman blog tersebut tanpa ada efek scroll. Nah, inilah yang saya
maksud pada judul postingan ini yaitu ada penambahan efek scroll pada saat icon back to top tersebut diklik. Pada icon back to top yang akan saya share ini jika ditinjau dari linknya pun agak berbeda dengan link icon back to top yang pernah saya lihat pada blog-blog yang saya kunjungi. Contohnya sobat bisa lihat di bawah ini :
http://agungtalaga.blogspot.com/# (Tanpa Efek Scroll)
http://agungtalaga.blogspot.com/#top (Ada Efek Scrollnya seperti pada blog saya ini)
Dari kedua link icon back to top di atas tentunya sobat sudah bisa membedakan mana yang memiliki efek scroll. Untuk gambaran dari hasil pemasangan icon ini, sobat bisa coba klik icon back to top pada blog saya ini yang letaknya di sebelah kanan bawah.
Jika sobat ingin memasang icon back to top ini pada blognya, silahkan ikuti cara-caranya berikut ini :
- Silahkan sobat login dulu ke akun bloggernya
- Pada halaman dasbor akun blogger sobat, klik nama blognya
- Setelah berada pada halaman ikhtisar atau overview, silahkan sobat pilih menu template - edit html - lanjutkan - centang pilihan expand template widget.
- Setelah sobat berada pada halaman edit html blog sobat, silahkan
letakkan kode di bawah ini tepat di atas kode ]]></b:skin>.
Untuk memudahkan proses pencarian kode ]]></b:skin>, silahkan
gunakan tombol Ctrl+F atau langsung tekan tombol F3 pada keybord lalu
masukan kode ]]></b:skin> ini pada kotak pencariannya. Jika
sudah ketemu kodenya, langsung letakkan kode di bawah ini tepat di atas
kode ]]></b:skin>
#bittop {position:fixed;_position:relative; bottom:2px; right:2px; clip:inherit;
_top:expression (document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression (document.documentElement.scrollLeft+document.documentElement.clientWidth-offsetWidth);}
- Lanjutkan lagi mencari kode </head> dan kalau sudah ketemu kodenya, silahkan letakkan kode di bawah ini tepat di atas kode </head>
<script src='http://share-with-agung-talaga.googlecode.com/files/Back-to-top-agungtalaga.js' type='text/javascript'/>
- Kemudian lanjutkan lagi dengan mencari kode <body> dan jika sudah ketemu silahkan ganti dengan kode ini <body id='top'>
- Berikutnya lanjutkan lagi dengan mencari lagi kode </body> dan jika sudah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode </body>
<div id='bittop'><a href='#top'>
Kalau sobat mau pasang icon back to top yang langsung terbang ke atas saat iconnya disorot pointer, sobat bisa gunakan kode yang ini
<img alt='Back To Top' border='0' height='30' src='http://abrition.com/wp-content/uploads/2012/04/Back-to-top-icon.png' title='Kembali Ke Lap Top' width='30'/></a>
</div>
<div id='bittop'>
Keterangan :
<a href='#top' onmouseover='window.location=this.href'><img alt='Klik Untuk Kembali Ke Atas' border='0' height='30' src='http://abrition.com/wp-content/uploads/2012/04/Back-to-top-icon.png' title='Klik Untuk Kembali Ke Atas' width='30'/></a>
</div>
Silahkan ganti url gambar ini http://abrition.com/wp-content/uploads/2012/04/Back-to-top-icon.png dengan url gambar yang sobat inginkan. Untuk lebar dan tinggi gambarnya, silahkan edit ukurannya pada bagian height='30' dan width='30'.
- Jika semuanya sobat sudah atur, silahkan disave kode template blognya untuk menerapkan apa yang telah sobat tambahkan tadi dan silahkan reload atau muat ulang halaman blognya. Jika ada kendala dalam proses pemasangan icon back to top ini, silahkan tanyakan kembali pada admin blog ini.
Posted by , Published at 20.07 and have
0
komentar
Tidak ada komentar:
Posting Komentar