Cara Merubah Gaya Image dan Caption Dalam Postingan

Image dan caption dalam postingan bisa dimodifikasi sesuai kebutuhan. Beberapa theme atau template wordpress ada yang menampilkan image dan caption standar. Bermula dari rasa penasaran saya, yang belum mengetahui bagaimana cara merubah gaya tampilan image dan caption dalam setiap postingan di blog wordpress, saya pun kemudian mencari tahu jawabannya.

Pada saat saya menggunakan gambar dalam posting, tampilan gambar dan caption saya polos, tidak memiliki border, bahkan tidak ada perbedaan warna. Caption yang tertulis di bawah gambar image yang saya gunakan, sama posisi dan ukuran dengan tulisan dalam artikel utama. Rasanya kurang rapi dan belum enak dilihat. Saya kurang mahir mengotak-atik CSS. Namun saya mencoba memberanikan diri untuk mencobanya. Dalam blog saya yang lain, saya menggunakan template wordpress, yang ternyata tampilan image dan caption dalam posting nya sangat polos.

Ternyata cara merubah tampilan gambar dan caption dalam posting tidak sulit. Hanya menambahkan sedikit code css yang dituliskan dalam file custom.css atau style.css, maka image atau gambar dalam artikel saya pun kini menjadi lebih rapi.

Cara Merubah Penampilan Gambar dan Caption dalam Postingan WordPress:

Contoh gambar yang digunakan:

1. Buka file custom.css atau style css theme wordpress.

2. Tuliskan kode berikut. Saya biasanya meletakkan kode tambahan CSS di bagian paling bawah.

Gaya I : Caption berada dalam box dibawah gambar.

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;

Gaya II: Caption berada di luar box dibawah gambar.

.wp-caption {
 border: 1px solid #B1A79B;
 text-align: center;
 padding-top: 10px;
 margin: 10px;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 background-image: url(../../../images/captionbg.jpg);
 background-repeat: no-repeat;
 background-position: center bottom;
 }
 .wp-caption img {
 margin: 0;
 padding: 0;
 border: 0 none;
 }
 .wp-caption p.wp-caption-text {
 font-size: 1em;
 line-height: 17px;
 font-weight: bold;
 padding: 8px;
 margin: 0;
 }

3. Masukkan kode css gaya yang anda pilih ke dalam file style.css atau custom css template wordpress anda. Kemudian simpan atau save. Lihat hasilnya.

4. anda dapat merubah setiap hal yang anda inginkan sesuai kebutuhan, seperti misalnya gambar background, jenis text, ukuran text, gaya border, warna border, warna text dan background dan yang lainnya.

Jika anda punya pertanyaan yang sama dengan saya sebelumnya, tentang bagaimana merubah gaya tampilan image dan caption dalam postingan, semoga artikel ini juga dapat membantu menjawab pertanyaan anda.

One Response to “Cara Merubah Gaya Image dan Caption Dalam Postingan”

1. Nakusan Bali says:

   February 13, 2013 at 4:33 pm

   saya masih pakai blogger mbak. jadi saya nyimak aja dan baca-baca disini. soalnya lama banget saya tidak ngunjungi blog ini..hehehe

   Reply