Cara Membuat Tombol Home,Back To Top, Bottom Dan forward,

[+] Post Title :

Cara Membuat Tombol Home,Back To Top, Bottom Dan forward,

[+] Date : 4/17/2011
[+] Author : Oktri darmadi
[+] Link : http://tipsbelajar-blog.blogspot.com/2011/04/cara-membuat-tombol-homeback-to-top.html
[+] Type : Tips Blogger

Hello Blogger ,Maaf sebelumnya telat saya Postig tutorial ini untuk teman yang menyempatkan bertanya tentang Cara Membuat Tombol Home,Back To Top,Bottom,dan forward,
Untuk lebih jelas nya coba sobat klik Home,Back To Top,Bottom,dan forward yang ada pada blog saya,.
sudah sobat klik,nah itu dia maksud nya dari Home,Back To Top,Bottom,dan forward
Sobat tertarik untuk membuat nya di blog sobat..?
jika tertarik,mari kita mulai cara pembuatan nya..

1.Masuk Ke akun Blog Sobat
2.Pada Dasbor Pilih Rancangan-->Edit HTML Dan jangan Lupa Centang Kolo Expand Template Widget
3.Kemudian Cari Kode ]]></b:skin>; ( gunakan CTRL F atau F3 untuk memudahkan pencarian )
4.Copy Paste Kode Dibawah Ini Tepat Diatas 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;
}

keterangan:

bottom letak gambar di bawah
top letak gambar di atas
right letak gambar di kanan
left letak gambar di kiri

5.Selanjutnya cari kode </body> selanjutnya letakkan kode di bawah ini tepat di atas code </body>

<a name='ngisor-dhewe'></a>

6. 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. jadi terserah sobat mau masang dimana.

<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/AVvXsEgsO8jE9JupdXAazWGSScmCtmrgeo4PsumPMkTH3SnKYuvYW0KtB5fmriQUEwiTGhRUw5qSTXhC9q42IAvLRz3O0sidm7NxGhqXtKgy5FXjd6B3wTbv2Ec-UfCJXx2RLXXI8r6vx8R5NUY/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSgC41eMZ2skNN84dD-SqVN1n2zVNFabWh684PeyybOBPYJydcZUbviK_5A0JMqQ18nYlwh5-i0_JxVpdkRFPFkXL4dsBLWRmDLZo-vz-PHvkT3Z-IRfteVC7lLXG8AeJL7OZBhFcMh4A/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtrsJrYgvR8WtDXrITjqtS8bMNq2L90iEzjIKxIjDG1lYpbHIBjaWu-tmRalyDVFcnsKY-NRsgBZBrjvLPfFd_pLcF14OQBN-g9HUNKTThvJHvIeLH4tPDe4pXAZ1VqGS6Y_cb6IXzCI/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/AVvXsEjGuF5c3rTeV8uDZoAre9AylDXd5Tjd0bLFh9Ih1XyHdMeiSUA5tbie1RnCesCP-a05l5Wa6391p8jWq3tQAVpOh8cUKyHp9UXqictVpdmY42BAT1Dd_fXcR5zkGVwfqXGv0hgi6z0md2M/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>

Setelah itu simpan. dan lihat hasilnya.
Bagaimana sobat, mudah kan? Okey selamat mencoba dan berkreasi

4 komentar:

Firrizqi Pratama mengatakan...: kode untuk nomor 5 nya mana gan???; 17 April 2011 pukul 02.33
Oktri darmadi mengatakan...: sory bro ga muncul...!! ane edit gi...skrg udah ad thu; 17 April 2011 pukul 03.16
HEBBY ZAKKIYA mengatakan...: bagaimana caranya menambahkan musik pada blogger bg; 18 Mei 2011 pukul 23.14
hasan mengatakan...: g bsa bosss; 17 Juni 2011 pukul 23.17

Cara Membuat Tombol Home,Back To Top, Bottom Dan forward,

Ditulis Oleh : Oktri darmadi ~ Tips Belajar Blog

4 komentar:

Posting Komentar