2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog

2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog merupakan panduan dasar yang sudah banyak diketahui oleh teman-teman blogger, bahkan mungkin sebelum saya lahir garis border sudah ada heheee.. Menambahkan garis border (baca: bingkai) kadang perlu di lakukan untuk memberikan keindahan tersendiri pada tampilan gambar atau mungkin akan membuat keunikan tersendiri jika dilakukan dengan beberapa trik khusus ketika menambahkan garis border ini atau menggunakan bermacam garis border untuk membingkainya

Cara menambahkan garis border gambar blog ini ada dua cara yang bisa kita lakukan yaitu dengan cara manual dan otomatis.

1. Cara Manual
   Yaitu memberikan garis border pada gambar dengan cara menambahkan kode-kode css secara langsung kedalam artikel gambar didalam area postingan. Sehingga setiap memasang gambar didalam artikel dan ingin menambahkan bingkai untuk gambar tersebut maka kita harus menyertakan kode css untuk bingkai gambar ini.
   
   Berikut contoh sekaligus demonya..
   
   

   Gambar tanpa garis border			Gambar dengan garis border

   
   Untuk memberikan garis border secara manual untuk artikel gambar, silahkan masukkan kode berikut ini
   
   

   <div style="border: 5px solid blue;">
   <img alt="Judul" height="125" src="Link Gambar" title="Judul" width="200" /></div>

2. Cara Otomatis
   Yaitu menambahkan kode-kode css untuk garis border gambar didalam kode template sehingga jika ketika kita membuatnya secara otomatis maka seluruh tampilan gambar di artikel akan memiliki garis border yang sama antara tampilan gambar yang satu dengan yang lainnya.
   
   Untuk membuat garis border gambar blog secara otomatis ini, cukup menambahkan kode berikut kedalam halaman pengeditan template blog sobat namun jika didalam template sudah tersedia kode berikut, kita cukup memodifikasinya sesuai dengan keinginan dan tidak perlu ditambahkan lagi
   
   Berikut cara menambahkan garis border gambar blog secara otomatis
   
   • Masuk ke menu Template >> Edit Html >> tekan Ctrl+F
   • Silahkan cari kode post .img atau post-body img didalam template blog. Jika sudah ada maka cukup memodifikasinya sesuai dengan keinginan
   • Jika tidak kode post .img, tambahkan kode berikut sebelum atas diatas ]]></b:skin>
     

     .post-body img {padding:15px; background:#FFF; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;}
     .post-body img:hover {border-radius: 0% 50%; box-shadow: 0px 0px 15px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer;}

   • Lihat hasilnya disetiap tampilan gambar yang ada didalam artikel

Selanjutnya, untuk menampilkan gambar menggunakan border atau bingkai silahkan pilih sesuai keinginan sobat. Apakah menggunakan cara manual atau otomatis
Dan, terimakasih telah berkunjung, silahkan tinggalkan komentar sobat untuk artikel ini, 2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog