Cara Menambah Border Pada Image Postingan

Cara Menambah Border Pada Image Postingan. Border Image ini akan memberikan efek bingkai pada setiap gambar secara otomatis dengan border radius setiap sudutnya.Tampilan yang dihasilkan trik ini bisa anda lihat pada postingan saya atau pada gambar di dalam postingan ini. Menggunakan border image dengan efek radius menampilkan kesan yang bagus dan agar terlihat rapih.Jika Anda berminat menambahkan kode border image kedalam template anda,silahkan ikuti langkahnya di bawah ini.

Silahkan ikuti langkah-langkahnya sebagai berikut:
1. Masuk ke akun blogger.com
2. Kemudian Pilih Rancangan
3. Lalu Masuk Ke Edit Html

Kemudian Centang Expand Template Widget Terlebih dahulu.Jika sudah cari kode dibawah ini,untuk mempermudah gunakan ctrl+F

Lalu cari kode css .post img kalau di template yang saya pakai ini kodenya berbentuk seperti kode di bawah ini:

.post img, table.tr-caption-container {

  padding-top:4px;

  border:0px solid $bordercolor;

}

.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin:1em 20px;
}
.post blockquote p {
  margin:.75em 0;
}

Lalu ganti semua kode css image yang saya pakaikan bacground berwarna ungu diatas dengan semua kode dibawah ini:

 .post img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKT6qLu1KGfHBsCWTlGKyoDFG4sKpdw63-oalSfHfhenCEnqmpAdZyeq5-P5m1CiRbsguDDBeUrL_vQ0lDYTAYb6wZBxjDcLPKlBJ44Vptjfe0izds1OLp64h-srxZhBNToEmrrBSqKY17/s1600/H2.gif) repeat;padding:5px;box-shadow: 5px 5px 5px #6CBC63;-moz-box-shadow: 5px 5px 5px #848484;-webkit-box-shadow: 5px 5px 5px #A4A4A4;
border-radius:10px;-moz-border-radius:10px;}

Simpan template bila sudah yakin hasilnya,namun sebaiknya Pratinjau dahulu sebelum kejadian yang tidak diharapkan menimpa template kita.
Selamat berkreasi,semoga sukses dan bisa bermanfaat.