Trick Mengatur Lebar Image (gambar) Posting Otomatis

Contoh kasus ! Silahkan
klik untuk perbesar!

Tips & Trick Blogger ini berlaku bagi semua blog, terlebih yang ukuran lebar halaman postingnya sebesar 400px atau kurang dari ukuran tersebut. Trick yang sebenarnya terinspirasi ketika melihat beberapa blog terlihat kacau karena image yang ditampilkan di halaman posting terlihat melebar hingga melewati batas box posting hingga "memasuki area sidebar blog". Tentu saja kejadian seperti ini membuat siapapun yang datang berkunjung sama sekali tak nyaman. "Ah...., payah, nich, blog! Bikin perut mual saja!", dan tanpa ba...bi..bu... si pengunjung dipastikan segera lari tunggang langgang untuk segera membuang seluruh isi perutnya yang mendadak "berebutan cari jalan keluar" akibat mual yang semakin menjadi. He... he.... he... hua...hua...haaa!!!! Masya iya, kaya' gitu, ya? Pasti ngawur gubhugreyot-nya!

Di blogger sendiri sebenarnya telah ada sebuah tindakan preventif untuk menjaga kemungkinan seperti di atas, namun sayangnya pembatasan lebar ukuran image di posting ini tidak bersifat fleksibel. Blogger menggunakan batasan lebar (width) maksimal sebesar 400px (patent). Anda dapat melihat batasan ukuran lebar ini ketika melakukan upload image di halaman posting. Seberapapun besarnya image yang anda upload maka hanya akan ditampilkan selebar 400px. Ini bisa terjadi karena di blogger telah digunakan lightbox plugin yang langsung terinstal dan terintegrasi bersama template sehingga image berukuran besar "jumbo" langsung ditampilkan melalui lightbox.

Setelah kita memahami masalah image, posting dan kaitannya dengan lebar box posting, mari kita coba buat sendiri pengatur lebar image/gambar posting yang dapat bekerja secara fleksibel/otomatis hingga lebarnya tak akan pernah sekalipun melebihi box posting.

Kode yang digunakan sebagai auto max-width

Tak banyak kode yang diperlukan dan hanya berupa kode css. Kode ini bisa disimpan pada template dengan meletakkannya di atas kode ]]></b:skin>

Kode CSS-1:

.post-body img{
       max-width:95%;
       height:auto; /* code by: gubhugreyot */ 
}

Atau bisa juga dalam benkuk kode seperti ini:

Kode CSS-2

.post-body img{
       max-width:95% !important;
       height:auto !important;
}

Cara Menyimpanan kode CSS

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke konsisi sebelum modifikasi lakukan klik Browse kemudian Upload.
6. Cari kode ]]></b:skin>
7. Copy dan pastekan kode CSS-1 atau kode CSS-2 tepat di atas kode ]]></b:skin>.
8. Klik Simpan Template *(Save Template).

Catatan/Keterangan:

1. Kode CSS-2 hanya digunakan apabila kode CSS-1 tidak mampu bekerja sesuai harapan.
2. Kode !important berfungsi sebagai "pengutamaan". Jadi jika sebuah kode mengikutsertakan !important, maka browser akan mendahulukan dan mengutamakan fungsi yang ditandai secara khusus ini (prioritas).
3. Angka 95% bukanlah nilai yang mutlak. Angka ini dapat diperbesar atau diperkecil hingga ukuran lebar benar-benar tepat selebar box posting.