Membuat frame pada blog post image

Wah, lama juga ya gak posting artikel, maklum lagi gak enak badan sama gak mood neh...

Kali ini kita akan membuat gambar gambar kita pada setiap posting menjadi semakin cantik dengan menambahkan frame termasuk juga caption-nya seperti gambar di bawah ini.

lihat..! Gambar ini ada frame-nya.

Caranya bikin?

Ini adalah kelanjutan dari posting terdahulu tentang caption apik, yang artinya cara ini akan bekerja baik jika anda telah mengikuti langkah pada pembuatan caption tadi.

Copy kode di bawah ini lalu paste pada template sebelum kode ]]></b:skin> lalu simpan template.


.imgbox {
  border: 1px solid #e8e8e8;
  text-align: center;
  background-color: #f9f9f9;
  padding: 3px 0px 0px 0px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.imgbox img {
  margin: 0 auto;
  padding: 0px;
  border: 0px;
}

Pada saat upload gambar/image, pilihlah None lalu modifikasi nilai "width" dan hapus kode "height".

Contoh:
...;width: 600px; height: 400px;"...
diubah menjadi
...;width: 98%;"...

Di ganti jadi 98% agar frame kiri dan kanan tidak tertutupi gambar nantinya

Kemudian tambahkan kode class="imgbox" pada kode <div id=...
Sehingga keseluruhan kode menjadi seperti di bawah ini.

<div id="leftimg" class="imgbox" style="width:280px;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOosVc7y3cf8mkePeufP0rteM5YVb0UdXNHCy7lKV6DTwoBH-Cqw6UGdFXiLWmQyQr5FGbDQRqz3BzSULR1ESpPfyyjrVCDGmp8ImDtAV0uBwdvI8P4Z0QjHPlTWuJ3BGlBvztHrtAOjk/s1600/tbLee.jpg"><img style="cursor:pointer; cursor:hand;width: 98%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOosVc7y3cf8mkePeufP0rteM5YVb0UdXNHCy7lKV6DTwoBH-Cqw6UGdFXiLWmQyQr5FGbDQRqz3BzSULR1ESpPfyyjrVCDGmp8ImDtAV0uBwdvI8P4Z0QjHPlTWuJ3BGlBvztHrtAOjk/s1600/tbLee.jpg" border="0" alt="" /></a>
<cite class="caption">Keterangan gambar atau caption di sini!</cite></div>


Jadi deh...kode diatas akan menjadi seperti gambar di bawah ini.

Keterangan gambar atau caption di sini!

SELAMAT MENCOBA!

Ditulis oleh Wira