Cara Membuat Widget Melayang - Floating Widget

Selamat datang sahabat kualemzone. pada kesempatan ini saya akan membagikan sebuah trik blogger mengenai widget melayang. preview dari widget ini seperti pada halaman web ini. sebenarnya, inti dari trik  ini adalah adanya kode "position: fixed;" kode inilah yang membuat widget kita menjadi tampak melayang.

Ini dia cara membuatnya :


  1. Pada dasboard blogger pilih blog yang ingin di edit (jika blog lebih dari satu). kemudian klik menu untuk mengedit template. sebelum berlanjut, sebaiknya kita mendownload dulu template kita. agar jika tejadi kesalahan, kita dapat mengulanginya kembali.
  2. Kemudian klik tombol "edit html" dan klik tombol "lanjutkan".
  3. setelah itu, cari kode "</head>" dan taruh kode dibawah ini di atas kode tersebut.

    #widget-melayang{margin:10px 0 10px 10px; padding: 4px; background: #eee; background: -moz-linear-gradient(top, rgba(255, 255, 255, .10), rgba(211, 211, 211, .10)); background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .10)),to(rgba(211, 211, 211, .10))); border: 1px solid #fff;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-webkit-box-shadow: #600 0 2px 12px;-moz-box-shadow: #600 0 2px 7px; text-shadow:0 1px 0 #FFFFFF; width:100px; height:auto; position: fixed; top: 200px; left: 2px; font-family: Helvetica, arial, sans-serif; float:left;}
  4. Kemudian taruh juga kode dibawah ini dia atas kode "</body>"
    <div id='widget-melayang'> Isi Konten Sesuka Anda... </div>
  5. simpan hasil editan kalian.

Keterangan :   
  • Kode warna hijau dapat diganti dengan warna kesukaan. Klik Di Sini untuk memilih warna.
  • kode warna kuning dapat diganti dengan ukuran yang diinginkan dalam bentuk pixel.
  • kode warna orange atau yang terletak pada kode "top: 200px; left: 2px;" merupakan penempatan dari widget tersebut. kode "top:"  untuk pengukuran jarak dari atas, dan kode "left:" untuk pengukuran jarak dari kiri dalam bentuk pixel. kode "top:" dapat diganti dengan kode "bottom:" (untuk pengukuran jarak dari bawah) sedangkan kode "left:" dapat diganti dengan kode "right:" (untuk pengukuran jarak dari kanan).
  • kode warna ungu dapat diisi dengan konten yang akan diisi di blog.


Sekian dari saya, dan terima kasih telah berkunjung.

rio farizka. Diberdayakan oleh Blogger.

 
Theme by rio farizka | Ngawi
Back to Top