Saturday, November 5, 2016

Cara Mengatur Keterangan Foto/Gambar (Image Caption) di Posting Blog

Keterangan Gambar, Keterangan Foto, atau Image Caption adalah teks atau tulisan yang terdapat di bagian bawah sebuah foto atau ilustrasi gambar dalam posting blog. 

Keterangan Gambar berfungsi untuk mendeskripsikan atau sekadar melengkapi gambar tersebut dengan penjelasan atau keterangan.  

Image Caption sangat bagus buat SEO karena lebih memudahkan mesin pencari untuk menentukan hasil pencarian yang relevan, terutama pada pencarian gambar/image. Di situs-situs berita, keterangan gambar ini diindeks oleh Google setelah judul berita. 

Contoh  image caption adalah sebagai berikut: 

fdfgfd
hghg

seperti contoh tulisan di bawah gambar diatas .image caption atau keterangan gambar.
Cara membuatnya adalah, setelah gambar diupload, klik gambar tersebut sekali, lalu klik menu "Add Caption",

Cara Mengatur Keterangan Foto/Gambar (Image Caption)
Kode CSS untuk mengatur penampilan keterangan gambar biasanya sudah ada di template blog. Yang CB share di sini adalah contoh kasus di template blog yang digunakan CB NET ini.
Untuk mengatur image caption menjadi seperti di atas, caranya adalah menemukan kode css lalu mengubahnya sebagai berikut:


1. Template > Edit HTML

2. Tambahkan atau Copas kode berikut ini di atas kode ]]></b:skin> atau </style>

.tr-caption {
text-align: center;
font-size: small;
font-style: italic;
color: #777;
padding: 5px 0;
border-bottom: 1px solid #ddd;
}

3. Save Template!
Jika kode di atas tidak berfungsi, artinya kode keterangan gambarnya berbeda. Silakan:

1. Select All keterangan gambar yang ada di postingan blog Anda 

2. Klik Kanan > "Inspect Element" > akan muncul nama kodenya yang harus Anda atur. 

Demikia cara  mengatur add caption agar tampilannya seperti gambar diatas... 











Sekian Dan Terimah Kasih