Integrasi Image Caption Pada Template
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 3:
/* Image Caption */Langkah 5
.keterangan {border: 1px solid #ddd;text-align: center;background-color: #eee;padding: 10px 0 10px 0;-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.keterangan img {margin: 0px 0px 10px 0px;padding: 0px;border: 1px solid #ddd;}
.keterangan p.keterangan-text {margin: 0px;padding: 0px 0px 0px 0px;font-size: 12px;font-weight: bold;line-height: 12px;font-family: Arial, Helvetica, sans-serif;font-style: normal;color: #333333;}
Simpan template...
Modifikasi Kode Gambar
Langkah AUpload gambar pada artikel
Langkah B
Edit kode gambar melalui mode Edit HTML
Langkah C
Cari dan perhatikan kode dibawah ini (utamakan kode dengan warna biru):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg"> <img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 220px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/></a>Langkah D
Tambahkan kode Image Caption seperti dibawah ini (kode warna biru untuk image caption):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg"> <div class="keterangan" style="width:240px"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 220px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/><p class="keterangan-text">Contoh Keterangan Gambar</p></div></a>Langkah E
Terbitkan artikel
Keterangan:
- Perhatikan langkah D, lebar gambar adalah 220px maka lebar image caption harus 240px. Nilai ini diperoleh dari penambahan 20px dari lebar gambar, sederhananya 220px + 20px = 240px. Hal ini agar diperoleh bingkai image caption yang simetris antara sisi kiri dan sisi kanan.
- Kode <p class="keterangan-text">Contoh Keterangan Gambar</p> ini adalah teks yang digunakan untuk keterangan gambar, ubahlah "Contoh Keterangan Gambar" sesuai keterangan gambar yang anda inginkan.
- Kode <div class="keterangan" style="width:240px"> ini adalah kode untuk membuat image caption, nilai 240px disesuaikan dengan lebar gambar dengan penambahan 20px seperti yang sudah dijelaskan diatas.
Selamat mencoba dan semoga berhasil. Tinggalkan pesan pada komentar jika mengalami kesulitan dan Happy Blogging... :)