Friday 1 November 2013

Cara Membuat Kotak Widget Melayang Di Blog

Cara membuat kotak widget gadget melayang di blog, maksudnya adalah buat kolom box widget yang bisa terbang mengambang melayang floating tanpa tombol button tutup close di blog, bisa diletakkan di header, sidebar, footer.

Pada bahasan kali ini membahas bagaimana caranya membikin kotak widget melayang float di blogspot / web. Widget ini sendiri bisa berfungsi untuk tempat kode like box fanspage blog misalnya, atau kode iklan anda, dan sebagainya.

Kotak box widget melayang float tanpa tombol button close tutup, itulah yang akan dibahas kali ini, sebelumnya sudah ada postingan tentang cara membuat widget floating ada tombol close nya.

Langsung saja perhatikan gambar widget melayang dibawah ini.
Cara buat Widget Melayang Di Blog Tanpa Tombol Close Tutup
Gambar 1. Klik gambar untuk perbesar tampilan.
Dari contoh gambar diatas pastinya anda sudah tahu bentuk widget yang akan kita bahas, langsung saja perhatikan langkah-langkah nya dibawah ini.

Langkah - Langkahnya:
  • Log in akun blog anda
  • ke menu layout / tampilan >>> add a gadget >>> html/javascript
  • copy dan paste kan kode dibawah ini
<div style="position: fixed; bottom: 1px; right: 10px;width:auto;height:auto;">
<div style="-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; background-color: #f3f3f3; border-radius: 8px; border: 1px solid black; width: 250px; height: 150px; color: black; font-family: Arial; padding: 1px;">

CONTOH WIDGET FLOATING MELAYANG GUSTI OI..OI CONTOH WIDGET FLOATING MELAYANG GUSTI OI..OI 
</div>
</div>

Note: Ganti teks yang warna orange diatas dengan teks atau kode anda sendiri. Widget ini berada pada sebelah kanan bawah, dan bisa anda rubah ke kiri, atas, dll. Lihat saja kode yang warna hijau dan kuning diatas bisa anda rubah sesuai selera anda.
  • Simpan dan lihat hasilnya.
Selain dari contoh kode diatas, ada juga kode lain nya yang bisa buat widget melayang. Lihat kode nya dibawah ini.

<div style="position: fixed; top: 0px; right: 10px;width:150px;height:130px;">CONTOH TEKS ATAU KODE ANDA DISINI</div>

Note: ganti teks warna orange diatas dengan teks atau kode anda sendiri.
  • Simpan dan lihat hasilnya.
Artikel Rekomendasi:
Cara buat widget melayang beserta tombol close nya.

Terima Kasih.
Cara Membuat Kotak Widget Melayang Di Blog.

2 comments:

  1. Ternyata mudah sekali ya membuat widget melayang, Tapi kasihan sama pengunjung nantinya terganggu dengan widget tersebut :)

    ReplyDelete