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

Diposting oleh ------------Vlaxible

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/AVvXsEj1UShEyNMXLS0ymXRRVF-8Y4GxZZhnhJmITYIbWehRccOBqo32ogJzzx0jNuCPCVSu9uB5djpvr245Wrk3AB8Nr2LcIgpyxKT8f_8nN8oL-PkpSiBPgtN9pCGPFLq32LPtINiR2Xf5ngo/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3F2rWBUohz7TFLYjPKf5BB3Vh0AUe1rzd6nsPh2sn0QOq4RIS91Wp9ModUOIH-KdigJW0c_I0roKGPeepyY7rLFvSrnA6cS-2m5SzunFkKTz0rmAyxA9ER8jPrpVmrEth-h4gwPCxdwo/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmRXGIDUsQ8BRfn9xZjH19Gc7TEORcr3w2TvmD_cMErTtLLc4AZRZ1LGuTJPg4n0V3pCeWZQUlGeYP9cX1M6BvklVQzC4zSeuCDSzH-s5d2De6OhlI6O9bIKs1yWTYnOrIUo5Uc3V02yo/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/AVvXsEjkgTfk07L2ZjQK-Gug8sXNJJ81u4xoa61qjlbXyDKYOG_FDap55XILPeUBirUtrHsxErvkjaobx8Ox-MCYa39G3hwsksqufcuMZ59n4Zn0mAxsOW4CzJtpi3iv8UkH5FN_zie36Gv-g_c/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>



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

This entry was posted on 07.49 . You can leave a response and follow any responses to this entry through the Langganan: Posting Komentar (Atom) .

0 komentar