Print this page
Disini saya akan membagikan sedikit ilmu yang saya dapat lagi hasil blogwalking, yaitu membuat tombol home, back to top, bottom, dan refresh pada blog kita. Adapun fungsi tombol tersebut adalah sebagai navigasi untuk memudahkan pengunjung blog kita dalam membaca halaman postingan kita.
Adapun tampilan sebagai berikut:
Atau sobat bisa lihat pada blog saya disudut kanan bawah. Gimana sobat????? Bila tertarik ingin membuat tombol navigasi tersebut ikuti saja langkah2 di bawah ini:
1. Login ke blog sobat
2. Masuk ke Rancangan ----> Edit HTML
3. Cari kode ]]></b:skin> ( gunakan CTRL F atau F3 untuk memudahkan pencarian ), setelah dapat selanjutnya copy kode di bawah ini dan letakkan di atas kode tadi.
#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;
}
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;
}
4. Kalau sudah selanjutnya cari kode </body> ,selanjutnya letakkan kode berikut ini tepat di atasnya.
<a name='ngisor-dhewe'></a>
5. Simpan templatenya.
Langkah selanjutnya tinggal memasang shortcutnya.
Copy kode dibawah ini dan bisa sobat letakkan di bawah kode <body> atau bisa juga sobat letakkan di sidebar dengan cara masuk ke Rancangan ----> Tambah Gadget ----> HTML/Javascript.
<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/AVvXsEhbM6Ox4MAc2tWrNm9IJz6N7IxQ4S0xIF8tvSN0Ut31zx1bs2alDICut7OE53ETj01SM7A0UmuI5_Lb-vBmEjCfbUnFjux5bv31Ul-SYH8c8akr3brFvNHE5KGEa6oZh7OeU95C_rnbZuc/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiItBjXF-YbWe7OXl_lDGkdE3nmpidvoR_A10Ff09_mtOwxexv_s7NjatqXnYyywKuAsr8bDh50cQxP0_B6o98mXPbNrxtsLEKfVT4g6AkmSlHipI6q3F2p5z21hkugS8UdpX0heznQsjk/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmCrovKXbyKgcltDm55ycEHaqBXgo6lI3djPutbzccH3-ArJHv-UChifTsQenm4sj5R2jlcjUZEgcgEPBXtniG6wJN_QC2PH9Kg6p4sUyiQ__dKUGCyVgaFYHXoSUjwD7Ew6IPNeukSOY/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/AVvXsEj4yh-RezoRGBQVdnp-uGQa79B1iLa_cO48SMnW9_P7ff8hhohnkE4ibjNhl5ZxksMPrZSSxzBN0eYcRZoz-cBsA_VHb2QjzT-p4xJ27sjLdNOd_6boImpgfUZ8ZzNTDUxEPwe9vIYnCXE/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbM6Ox4MAc2tWrNm9IJz6N7IxQ4S0xIF8tvSN0Ut31zx1bs2alDICut7OE53ETj01SM7A0UmuI5_Lb-vBmEjCfbUnFjux5bv31Ul-SYH8c8akr3brFvNHE5KGEa6oZh7OeU95C_rnbZuc/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiItBjXF-YbWe7OXl_lDGkdE3nmpidvoR_A10Ff09_mtOwxexv_s7NjatqXnYyywKuAsr8bDh50cQxP0_B6o98mXPbNrxtsLEKfVT4g6AkmSlHipI6q3F2p5z21hkugS8UdpX0heznQsjk/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmCrovKXbyKgcltDm55ycEHaqBXgo6lI3djPutbzccH3-ArJHv-UChifTsQenm4sj5R2jlcjUZEgcgEPBXtniG6wJN_QC2PH9Kg6p4sUyiQ__dKUGCyVgaFYHXoSUjwD7Ew6IPNeukSOY/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/AVvXsEj4yh-RezoRGBQVdnp-uGQa79B1iLa_cO48SMnW9_P7ff8hhohnkE4ibjNhl5ZxksMPrZSSxzBN0eYcRZoz-cBsA_VHb2QjzT-p4xJ27sjLdNOd_6boImpgfUZ8ZzNTDUxEPwe9vIYnCXE/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>
Setelah itu simpan template.
Bagaimana sobat, mudah kan? Okey selamat mencoba dan berkreasi.
No comments:
Post a Comment