Join The Community

Premium WordPress Themes

Senin, 22 Agustus 2011

Membuat Tombol Home, Bact to Top and Bottom

Assalamu Alaikum Wr. Wb.

Wah bentar lagi lebaran ni sob... uda pada beli perlengkapan lebaran belum??? hehehehe 
Kesempatan kali ini ane mau sharing tutorial tentang bagaimana Cara Membuat Tombol Home, Back To Top and Bottom di blog sobat. Sudah tahu kan maksudnya??? Lebih jelasnya liat gambar berikut :


Nah, kira-kira seperti itulah gambar dari Tombol Home, Top dan Bottomnya. Oyah hampir lupa, tutorial ini ane dapatnya dari sobat TB kalau sobat tertarik silahkan dipraktekin langsung :

1. Login ke Blogger
2. Setelah masuk ke Dasbor, Klik tab Template (ini untuk tampilan blog yang baru)
3. Klik Edit Template HTML
4. Centang pada Expand Widget Templates
5. Temukan kode berikut ]]></b:skin> (gunakan Ctrl+F atau F3)
6. Copy lalu Pastekan kode berikut 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;
}
7. Setelah itu cari lagi kode </body> lalu copy dan pastekan kode berikut diatas </body>
<a name='ngisor-dhewe'></a>
8. Terakhir masukan kode berikut dibawah kode </body>
<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/AVvXsEh6r9IBN4eoKfeDzptlpvgLfbhNc7DeRyeph5cI02068sb_exXZZppLYpK0lK1fH29xBhbxM2n5KMzbWDnCaZAEIvYnfQIVTxhSBUmXZvRFPZdHHx-6gLnlHJ-8uh8rkP643Ufkzpe-eA0/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKkmHKZiDdpap47rQqFW77abs1Mlc355p11DMCRN2gR1ZcTyJDEsueYOagYnAKZf-c7SazNmdHyAKXbOrGh0kTyk7rH3vq_Rj0BBNeygza8PYUGJ_8Ly1R-zeEQmEoxrHccDFnbInQXs/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUg0EKgAvRp_z56R-g6q4aKMB_fsSM_1nxEApcXIwd1SB3O8rtIR83P9A_7ahhkCJ2OKsFiGGrgUqHDAwzR2HZXZIWiiwUFKEWaMQgL22bbV5RGaZoU-Sv5v02UAUUDElx4XoD8kXFXMk/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
9. Simpan.

Itulah sedikit banyak penjelasan bagaimana cara membuat Tombol Home, Top dan Bottom di Blog. Semoga dalam penerapannya tidak terjadi masalah alias mulus-mulus saja...... heheheh

Salam,


0 komentar:

Posting Komentar