Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on Feb 4, 2013 in Blogging | 0 comments

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:

cara merubah gaya image dan caption

Sumber gambar: http://www.kilasdara.com

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.

Dapatkan Artikel-artikel Menarik Infodari.com ke Inbox-mu!

Enter your email address:

Delivered by FeedBurner

Post a Reply

Your email address will not be published. Required fields are marked *


one × 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>