Saturday 24 December 2011

Home » Tutorial Blog » Cara Membuat Tombol Back To Top Melayang (Home, Bottom, dan Refresh)

Cara Membuat Tombol Back To Top Melayang (Home, Bottom, dan Refresh)

Icon Back To Top or Cara Membuat Tombol Back To Top Pada Blog or Cara Membuat Tombol Home,Back To Top,Dan Bottom or Cara Memasang Tombol Back To Top (Kembali Ke Atas) di Blogspot Pada Tutorial Blog Kali ini saya akan membahas bagaimana Cara Pasang Tombol Ke Atas Ke Bawah atau Icon Tombol Back To Top Pada Blog Atau Blogspot or Cara Membuat Tombol Home,Back To Top,Dan Bottomdengan lengkap , Biasanya Para pengunjung blog kita, tentunya lebih senang jika diberi kemudahan dalam membaca artikel di blog kita, seperti kembali ke atas blog, menuju bagian bawah blog, dll.Kali ini kita akan mencoba membuat sebuah icon shortcut Tombol Ke Atas Ke Bawah yang akan selalu tampil di pojok layar yang berfungsi untuk menggulung scroll ke atas dan ke bawah ditambah sebuah icon untuk merefresh halaman blog.Demonya udah ada di blog ini kok, ada di pojok bawah kanan layar kamu

Masuk ke Tata Letak -> Edit HTML lalu

Copy CSS berikut dan pastekan di atas ]]></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;
}
Kode yang dicetak tebal adalah letak dari widget, "bottom" bisa kamu ganti dengan "top" dan "right" bisa kamu ganti dengan "left" (terserah kamu)Kalau sudah, cari lagi kode </body> tambahkan kode <a name='ngisor-dhewe'></a> tepat diatasnya.
Simpan templatenya!
Sekarang tinggal memasang shortcutnya...
Copy kode yang ada dibawah ini!

<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/AVvXsEingnjt-n1oZVO2cafmBUdi9sNoj5yPx43JZNF2ltOA2ou3d05qGbzQo0X9TgjOtUIqRg821vMUoMdHus8qMX8M7lZUHxPewLA1AmEK5PaJudobLDxkZWpoQW_yxsGrhdELyMzv6z5T3vw/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGDvUAJQO3v5OOc2D0tjpeOOsae2LiJY25t0UXJNsS9wo4S_w4IREfVi609S880NgXEZqGAYVdLqO6v92cbZpP61fWGI4zLjmAUOQYOsgkZrhKSFCONwAFm2jXl0BsBHmKoxkYZDz2cRE/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHpVu2g2-POeJD_JLReJlYP5Z0ZYNBhXE9Xt4gIbJ52Ihspfuqq3BHLMJs1azP2JazW-IpXAhO5bpQOaHVxoFxL3FkewU89TCzsK6GW9xt4HHpeFqU9iP6i5KxNQsdnz06B5uNcKTtkc/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/AVvXsEhVj6NapC7tBj-ZQ2eJkLI7t7zkOrg_fAaybL0-Rl_hibZOFH4xtbwHIPx9oO1bbiT5_xXGmGY6PGRRaVoKZtzIw2jzzoYIhE4dQdHyacZfI2WuaGSir888nPV4VGo7h2t3J4iPjYiis_I/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>

Kodenya bisa paste dibawah <body> atau bisa juga ke Tata Letak -> Elemen Halaman -> Tambah Gadget -> HTML/Javascript, Paste dan simpan.

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog ini

Auto Post Papua

Saturday 24 December 2011

Cara Membuat Tombol Back To Top Melayang (Home, Bottom, dan Refresh)

Related posts

0 comments:

Post a Comment