Minggu, 24 Juni 2012

Cara Pasang Shortcut Icon Back To Top

Kali ini saya akan mencoba menjelaskan cara membuat shortcut icon yang akan selalu tampil di pojok layar yang berfungsi untuk menggulung scroll ke atas dan ke bawah ditambah sebuah icon untuk merefresh halaman blog.
Jika ada yang tertarik berikut cara memasangnya :

Seperti biasa anda harus login ke Blogger klik Rancangan klik Edit HTML.
Kemudian cari kode ]]></b:skin> jika sudah ketemu copy kode CSS berikut dan pastekan di atasnya

#ngisor-nduwur {
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);
}

#ngisor-nduwur a{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}

#ngisor-nduwur img{
border:0;
}

#ngisor-nduwur a:hover{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

Keterangan : Kode yang berwarna biru adalah letak dari widget, "bottom" bisa anda ganti dengan "top" dan "right" bisa anda ganti dengan "left".

Kemudian cari kode </body> dan tambahkan kode <a name='ngisor-dhewe'></a>tepat diatasnya.

Selanjutnya cari kode <body> copy paste kode berikut dan letakkan dibawahnya

<div id='ngisor-nduwur'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwCnrtDW7ewdsCCL34rcjg9VMZxcvbap2kDp-HCRGdlpO5SBqFaXFhlKQYcAxLxkf9rELCFbY0hCAd0xeI_4BrdgXKvfTZf_VzZTs0rJAbimro4sKzLxHVBe697ZoS0-Iz_PdGrcYH5Fg/s1600/ngarepan.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFokLIcX8wv9eIApVbEWr-AKQeO8XJiCRomXytBjmWFBznqvRoWYDFwYPU3R0mUSzGUj2HsxQ4Ox8yWIut-32LVHiXYE5tYGFcFbla1XLmIY9PnlX2p7A5NWMgFhUj1Ce9qOHQydXuQuQ/s1600/nduwur.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKuUzpX-6esyZ64cMALjcPsNU_CJIwC7S4FeyaD80_l6JbG0ydxzMOIqsuXVpaWb6ro5GHV6XSm4b79Y54VLqJjJI0lZ8L5f-dn9oXcIlbG3PGGIYjfK1EWRPmXuTeS2A-p61gWS-IPg/s1600/ngisor.png'/></a></td>
<td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuPzQ0DVBcOuUzaxmxPLx0bmVgTLmJJbhT2HqZW1-Ka7aWCZLtoZ9RhGJqcth3tIGU8fCDu9NvSFl1Hd2aqgML4mVlyqi2H8nQaUQtRAj_TgO3oaK1z_k9Tq_E7-Zy2DQe4L_TpHLEQyY/s1600/segerke.png'/></a></td>
</tr>
</table>
</div>

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)