Selamat datang pengujung blog setiaku :)
Kembali lagi dengan saya Handosomeware. Kali artikel saya mengenai Cara buat widget melayang.
Kembali lagi dengan saya Handosomeware. Kali artikel saya mengenai Cara buat widget 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 Sesuka Anda... </div>
- 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.
ConversionConversion EmoticonEmoticon