Archive for Maret 2014

Tips-Trik dan Tutorial Blogger Blogdetik

berbagi pengertian setting lebar body

Pasang file flash di header blogdetik

adobe-flash_tantytmPeran 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 HTML

Kode 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.

Keterangan

  1. D E M O dapat dilihat di header blog sebelah kanan (gambar si puzz meong!)
  2. Simpan Kode CSS dan xHTML melalui Widgetize Any HTML.
  3. File flash yang hendak diipasang di header blog bisa disesuaikan ukurannya dengan tinggi dan lebarkolom header yang masih tersisa.
  4. Gunakan file flash dengan ukuran secukupnya agar loading blog tak terbebani secara berlebihan.
  5. Posisi gambar diatur dengan merubah nilai pada top dan right.
  6. Pengatturan besar dan kecilnya ukuran file flash dapat dilakukan dengan merubah nilai width dan height.
  7. 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.
  8. 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.

Kondisi header blog sebelum dan sesudah setting lebar body

Silahkan klik pada masing-masing gambar untuk membandingkan bentuk header blog sebelum dan sesudah dilakukan setting ulang terhadap lebar body melalui kode CSS!

cara buat video dari photodex ProShow Gold 5.0.3222