Hour Blogger | All About Something - Cara Membuat Widget Melayang 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 :
- 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.
- Kemudian klik tombol "edit html" dan klik tombol "lanjutkan".
- 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;} - Kemudian taruh juga kode dibawah ini dia atas kode "</body>"
<div id='widget-melayang'> Isi Konten Sesukaan Anda... </div> - simpan hasil editan kalian.
Semoga bermanfaat.
Anda baru saja membaca artikel yang berkategori
Trik And Tips
dengan judul
Cara Membuat Widget Melayang
. Anda bisa bookmark halaman ini dengan URL
http://hour17.blogspot.com/2012/09/cara-membuat-widget-melayang.html
. Terima kasih!
Ditulis oleh:
dimasprayoga90
-