Memperbaiki Ukuran Gambar Auto ReadMore Dengan Kode CSS

Pembahasan tentang cara pembuatan readmore (pelajari: Auto readmore) sudah selesai. Namun ada sedikit masalah dalam aplikasinya, yaitu masalah gambar yang muncul. Munculnya gambar tidak seperti yang kita inginkan karena ada script yang memaksa gambar tersebut untuk diperkecil dengan dimensi yang tidak sesuai aslinya. Buktinya, coba perhatikan gambar dibawah ini:

Ini adalah gambar asli yang dimensinya (ukurannya) adalah 320px X 127px.
Jika kita lihat ketika halaman awal (ketika kondisi dalam tampilan readmore) maka tampilannya akan seperti ini:

Hasil tampilan gambarnya menjadi berkerut dan dimensinya dipaksa menjadi 137px X 137px.
Tapi jika kita biarkan gambar sesuai aslinya, sedangkan posting bergambar pasti banyak (bagi yang hoby memasukin gambar seperti saya), maka tampilan akan kacau.
Untuk memperbaikinya, kita butuh script agar tampilannya bagus, tapi tidak menghilangkan gambar itu sendiri. caranya sangat mudah, saya dapat dari blognya www.masdoyok.co.cc.

1. Seperti biasa masuk ke www.blogger.com
2. klik rancangan atau tata letak.
3. Pilih edit HTML kemudian centang Expand widget template.
4. Cari kode ]]></b:skin>
5. Simpan kode dibawah ini, tepat diatas kode ]]></b:skin>

.box {
width:120px;
height:120px;
overflow:hidden;
float:none; /* gantilah sesuai dengan posisi yang diinginkan */
}

6. Cari kode readmore seperti dibawah ini:

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

7. Ganti dengan kode dibawah:

imgtag = '<div class="box"><img src="'+img[0].src+'" width="300px;" /></div>';

8. Jangan lupa Simpan Template.
9. Selesai.

Lihat hasilnya.

Intinya...
Readmore sangat penting untuk banyak kalangan blogger. Tapi mungkin sedikit masalah diatas, harus diselesaikan dengan baik. Gunakanlah script ini untuk mendapatkan hasil tampilan yang lebih baik. Saya tidak menggunakan cara ini, karena setiap gambar pertama, sudah dibuat agar persegi empat. Kecuali mungkin sebagian, termasuk posting ini, untuk sekedar contoh saja.

Silahkan tinggalkan jejak kunjungan anda dengan berkomentar. Komentar juga berguna sebagai motivasi dan koreksi jika ada kesalahan dalam pembuatan posting. Terima kasih.