berbagi pengertian setting lebar body
Pasang file flash di header blogdetik
Peran
adobe flash dalam perjalanan perkembangan blog tak mungkin terpisahkan
lagi. Keduanya saling menjadi sebuah paduan yang mengalir begitu saja
bagaikan sebuah perangkat musik dengan lagunya. Saling melengkapi hingga
sebuah keindahan yang lebih eksotis tercipta. Jika sebelumnya berbagai
gambar animasi hanya berupa gambar animasi gif semata, dengan beban
gambar yang bisa mencapai ratusan hingga ribuan kbyte dan membuat
loading blog terhuyung-huyung, dengan animasi flash beban itu sangat
jauh terminimalisir. Tentu saja blog menjadi lebih enteng dan loading
tak perlu terlalu terseok-seok seperti halnya ketika animasi gif yang
komplex digunakan.
Jika memasang gambar animasi gif segampang ketika blogger memasang atau mempostiong berbagai gambar/image lain yang berekstensi .jpg atau .png,
maka untuk file gambar flash cara yang kita gunakan berbeda. File ini
tak ubahnya sebuah iframe, sehingga untuk memasangnya harus menggunakan
tag tersendiri. Untuk blogdetik file flash yang berekstensi .swf ini bisa dipasang di blog melalui Widgetize Any HTML. Anda bisa memmulai dengan Login dan setelah masuk halaman Dasbor arahkan cursor ke menu Appearance kemudian KLIK Widget. Lanjutkan dengan KLIK Widgetize Any HTML. Simpan Kode HTML ke dalam box Widgetize Any HTML kemudian KLIK SAVE Changes.
Menampilkan atau memasang file flash di header blog
Berbagai jenis file flash bisa anda tampilkan di bagian header blog, seperti misalnya animasi flash ataupun sebuah widget jam dan widget-widget yang lain. Untuk memasangnya anda perlu kode CSS dan xHTML yang nantinya disimpan melalui Widgetize Any HTMLKode CSS
<style type="text/css"> body #flash_header{ position:absolute; display:block; top:10px; right:30px; } body #flash_header:hover{ z-index:9999; } </style>
xHTML
<div id="flash_header"> <embed src="http://flash-clocks.com/blog/flash-animation/flash-animation-black-cat.swf" width="100" height="150" wmode="transparent" type="application/x-shockwave-flash"> </embed> </div>
Dengan kode di atas maka sebuah file flash yang beralamat :
http://flash-clocks.com/blog/flash-animation/flash-animation-black-cat.swf
akan ditampilkan di header blog sebelah kanan. Ukuran file flash terlihat pada nilai width dan height.
http://flash-clocks.com/blog/flash-animation/flash-animation-black-cat.swf
akan ditampilkan di header blog sebelah kanan. Ukuran file flash terlihat pada nilai width dan height.
Keterangan
- D E M O dapat dilihat di header blog sebelah kanan (gambar si puzz meong!)
- Simpan Kode CSS dan xHTML melalui Widgetize Any HTML.
- File flash yang hendak diipasang di header blog bisa disesuaikan ukurannya dengan tinggi dan lebarkolom header yang masih tersisa.
- Gunakan file flash dengan ukuran secukupnya agar loading blog tak terbebani secara berlebihan.
- Posisi gambar diatur dengan merubah nilai pada top dan right.
- Pengatturan besar dan kecilnya ukuran file flash dapat dilakukan dengan merubah nilai width dan height.
- Jika file flash akan dipasang di header sebelah kiri, silahkan ganti right dengan left. Semakin besar nilai left maka gambar/file akan semakin ke kanan.
- Anda bisa menambah kode CSS yang lain pada syntax body #flash_header{ …. } seperti misalnya background, border atau padding!
Setting Lebar body 1024px menggunakan Kode CSS
Selama ini semua desain blogdetik yang aku modifikasi selalu aku buka
hanya dengan monitor PC satu-satunya yang aku miliki dengan
perbandingan ukuran layar sebesar 4:3. Setelah selesai melakukan
beberapa modifikasi dengan merubah kode CSS atau menambah javascript aku
hanya biasa berucap dalam hati, “Siiip! Aduh… Oke banget, nich! Beres,
dah…!” Ya …, Semua terlihat manis dan sempurna. Dan ouwww …., tunggu
dulu! Ternyata …. ahaaaa …. begitu dibuka di monitor PC atau laptop
dengan layar berukuran 16:9 …. aduhhhhh …. lunglai tubuh ku!!!!! Hancur
…cur …cur ….cur …! Blog ternyata kacau-balau … amburadul nggak karuan
bentuknya. Background body melebar memenuhi seluruh layar monitor
hingga posisi background terhadap halaman blog jauh dari posisi yang
direncanakan, menu horizontal terlihat melarikan diri hingga di pojok
sebelah kiri layar monitor…. Melesat jauh dari tempatnya semula yang
tepat berada di bawah header blog sebelah kiri, wp-admin bar seperti
orang terasingkan menepi di pojok kiri dan kanan layar monitor serta
background header … si cantik animasi flash “puss meong” juga
terkantuk-kantuk di ujung kanan atas monitor jauh dari kandangnya
semula. Yah … Sekalipun “hancur-hancur hatiku … (lagunya Olga!) tetapi
sangat beruntung tentunya ketika secara tak sengaja blogdetikku aku
buka di laptop teman aku yang layar monitornya berukuran 16:9. Semua
kekurangan modifikasi jadi jelas terlihat dan ini menjadi wawasan baru
betapa tag body perlu satu perhatian khusus hingga dapat terlihat sama
baik di layar 4:3 ataupun 16:9. Kini semua telah aku perbaiki hingga aku
tak perlu kuatir dilayar PC atau laptop yang seperti apapun blogdetik
ku dibuka. Jika diantara sobat-sobat d’blogger atau bogger blogdetik ada
yang mengalami kejadian seperti di atas, atau bahkan mungkin hingga
detik ini belum menyadari bahwa blogdetik anda juga perlu dibuka di dua
ukuran layar yang berbeda untuk mengetahui kesempurnaan desainnya,
semoga pengalaman yang akan aku bagi ini memberi manfaat. O… ya …, tentu
saja jika ada kekurangan dari apa yang akan aku bagikan ini, aku mohon
kritik dan sarannya. Perlu sobat ketahui bahwa dalam perbaikan desain
melalui kode CSS yang aku sertakan, telah aku tambahkan juga kode
antisipasi (position:relative;) agar ketika sebuah
desain dengan posisi absolute dan fixed digunakan, maka akan dengan
sempurna tertampilkan di layar monitor. Apabila anda ingin menggunakan
background image sebagai background body, kode CSS ini juga telah
dilengkapi dengan kode css3 background-size untuk setting lebar
background body sebesar 1024px.