Cara Membuat Bingkai / Border Untuk Menghias Gambar Postingan Blog

Jika kita menambahkan border atau bingkai pada gambar blog kita, maka posting kita akan terlihat lebih rapi dan gambar blog menjadi lebih ca... thumbnail 1 summary

01.06

Jika kita menambahkan border atau bingkai pada gambar blog kita, maka posting kita akan terlihat lebih rapi dan gambar blog menjadi lebih cantik. Oleh sebab itu, saya menyiapkan sobat blogger 10 kode CSS yang digunakan untuk membuat bingkai pada gambar blog. Sobat blogger dapat mengkostumisasi kode CSS ini sesuai dengan harapan sobat. Posting yang sobat blogger baca ini berbanding terbalik dengan posting sebelumnya yaitu "Cara Menghilangkan Bingkai, Border Atau Bayang Pada Gambar Blog". Tapi sudahlah, jangan dipikirkan. Bagaimana cara menerapkan kode CSS ini pada template blogger? Gampang sekali, sobat blogger hanya meletakkan satu dari 10 kode CSS berikut di atas kode ]]></b:skin>
Atau Bisa Juga Cari Code

.post-body {

Ganti dengan code yang tinggal anda pilih dari bawah ini .

Berikut ini kode CSS beserta screenshot hasil kode setelah diterapkan :

1. Kode 1 Dari Gambar Diatas

.post-body img{
border: 1px solid #4C3C1B;
padding: 5px;
width: 300px;
background-color: #EFEECB;
}

2. Kode 2 Dari Gambar Diatas

.post-body img{
border: 1px solid #666666;
padding: 10px 10px 60px 10px;
}

3. Kode 3 Dari Gambar Diatas

.post-body img{
border-style: double;
padding: 16px;
background-color: #DCDCED;
}

4. Kode 4 Dari Gambar Diatas

.post-body img{
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #E1A60A;
border-bottom-color: #E1A60A;
padding: 8px 0px;
}

5. kode 5 Dari Gambar Diatas

.post-body img{
border: 10px dotted #29C3FF;
margin: 0;
padding: 0;
}

6. Kode 6 Dari Gambar Diatas

.post-body img{
width: 300px;
padding: 0px 6px 6px 0px;
background-color: #9FB2C1;
border-top-width: 2px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 2px;
border-style: solid;
border-color: #082F70;
}

7. Kode 7 Dari Gambar Diatas

.post-body img{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibDOXVPVDbxPgayAA8cdI18WTcBPHOMau3B26o-GFldHXmF_ovN9GBi8gOld-2THp71Pviaw7l4mt5E1HFFFh-pWxXB6qhW-JOFVU2H1pCMogtwOu3itEIqWFuHtBe_sZSJGZIrGY61zg/s400/image-background.png) repeat scroll 0 0 transparent;
padding:7px;
border:1px solid #cecece;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
}

8. Kode 8 Dari Gambar Diatas

.post-body img{
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

9. Kode 9 Dari Gambar Diatas

.post-body img{
color: #000;
font-weight: bold;
background-color: #f99;
border: 3px solid #c00;
}

10. Kode 10 Dari Gambar Diatas

.post-body img{
border-style: dotted;
}

Bagi sobat blogger yang ingin mengcopy paste tutorial ini, jangan lupa mencantumkan URL blog ini sebagai sumber artikel. Blogger yang baik adalah blogger yang saling menghargai setiap karya dari temannya. Terima kasih untuk pengertiannya!