Biasanya Para pengunjung blog kita, tentunya lebih senang jika diberi kemudahan dalam membaca artikel di blog kita, seperti kembali ke atas blog, menuju bagian bawah blog, dll.Kali ini kita akan mencoba membuat sebuah icon shortcut Tombol Ke Atas Ke Bawah yang akan selalu tampil di pojok layar yang berfungsi untuk menggulung scroll ke atas dan ke bawah ditambah sebuah icon untuk merefresh halaman blog.
Oke langsung aja yah, check it out!
2. Cari ]]></b:skin> lalu copy CSS dibawah ini, kemudian paste diatas ]]></b:skin>
#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
3. Kode yang berwarna merah adalah letak dari widget. Kalian bisa mengganti 'bottom' menjadi 'top' dan 'right' menjadi 'left' (sesuka hati kalian).
4. Kalo sudah cari lagi kode </body> kemudian tambahkan kode <a name='ngisor-dhewe'></a> tepat diatasnya.
5. setelah itu simpan templatenya.
selanjutnya tinggal memasang shortcutnya
<div id='mangetsu'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3hdwLArhgQExZxxyp1UGX7lSQk1wcXAprFr-FyOv1AjKt2VUuulBZffujQwJkF1ERqu_oePJZjEZG6wKpnt9YivAAZ0mCIyfcUcbna2alAJkaaQi1SsfVq1OZ6FihLjYUTHNwqysW4w/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMXVMt3as9oNT8s9U7VXlJ8Vfdu7g0n-3bpao612trXsysftLe9gedxZTJURI-WZ3p7lj5SS5j7lllQAWoO9XICtxva4JDnrHlV6Z5ruqwA2HZz8X9sJGBe7u8ERRZbHwgmIw_gH3cA3o/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgawQ6EbvkvltZ3DJiQkfP8E7ulliQ2KA6OZGiLmP44NJxF4jTsvRAb3ftt47uapmyCUpMrCrSVJIm6K0ufREYzSsuGZhHXixjINxM5OkLAXUxAtIpxI3BZSU3fvz-4qDorEmmggz0RXdA/s320/next-icon2.png'/></a></td>
<td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fxoChJZ8uFHOgwyz2E73byftR8CqLQrmajcDX_JPzwtOqABcvMJkppl5UnwdkO-zBW1S7g_hi1HsuR1AgZV-tIT6osAdKfTckTCDtCPX7MBENS-3nwhIrIseMaKsmELYQ1YHQAJ6QI0/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>
Copy code diatas.
Kode diatas bisa kalian paste di bawah <body> atau bisa juga kalian paste di gadget (Tata Letak -> Elemen Halaman -> Tambah Gadget -> HTML/Javascript).
Kode yang berwarna pink adalah url gambar yang akan dijadikan sebagai tombol Home, Back to Top, Back to Bottom, dan Reload. Kalian bisa menggantinya dengan gambar lain yang sesuai dengan kemauan kalian.
Oh iya satu lagi, ini ada pesan dari penulis
Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )
Pasang Kodenya Di Bawah ini di atas kode </head> :
<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>
Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog ini.
SELAMAT MENCOBA ^^
source : ojelhtc.blogspot.com/
credit pict: Google.com
