26 November 2011

Cara membuat tombol "Home", "Back to top", dan "Back to bottom" pada blog

Helo sobat blogger!
Kali ini saya bakal memberi tutorial singkat bagaimana cara membuat tombol "Home", "Back to top", dan "Back to bottom" seperti pada blog saya ini. Mungkin ada yang belum tau tombol seperti apa yang saya maksudkan? Biar saya kasih screenshotnya dulu..


Baiklah, sudah paham bukan? Marilah kita mulai tutorialnya.
1. Login ke blogger.com
2. Setelah masuk ke Dasbor pilih Rancangan lalu Edit HTML. Jangan lupa centang "Expand template widget"
3. Lalu cari kode ]]></b:skin> menggunakan Ctrl + F
4. Pastekan kode dibawah ini, tepat diatas kode  ]]></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;
}
5. Selanjutnya,   cari kode </body> menggunakan Ctrl + F dan pastekan kode berikut ini diatasnya.
<a name='ngisor-dhewe'></a>
6.  Lalu untuk finalnya, pastekan kode dibawah ini, tepat dibawah kode <body>


<div id='mangetsu'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='http://1.bp.blogspot.com/_rJyl7MtUcdY/S9QFyGDOdHI/AAAAAAAAAe4/Uz2_Cn7MQrU/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='http://2.bp.blogspot.com/_rJyl7MtUcdY/S9QFtGirgKI/AAAAAAAAAew/8djXsedR4wg/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='http://4.bp.blogspot.com/_rJyl7MtUcdY/S9QFncHAkrI/AAAAAAAAAeo/dklrey4DVTk/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
7. Selesai


Recommendation :
1. Saya saranin  di "Pratinjau" dulu sebelum di save. Takutnya template anda jadi rusak.
2. Apabila gagal, maka pilih "Bersihkan edit" dan ulangi lagi rposes editing code dari awal.





2 comments:

Jangan nge-SPAM! Komen SPAM akan langsung dihapus tanpa ba-bi-bu