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>

Berikut ini kode CSS beserta screenshot hasil kode setelah diterapkan :


1. Kode 1

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

2. Kode 2

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

3. Kode 3

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

4. Kode 4

.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

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

6. Kode 6

.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

.post-body img{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3gETB3j3WrCm3GCrsyNXWo94z_R7PhX1sQvxnuKQGAYUG9oERN7sSh7C6Canytxs7LHdHRtO66O9MZQzZ_PfuV6NW1yX5m_ZjpgHrMx3BIduuPdbpMhjrjkY3aldGfQnSijVpXyPeDOU/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

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

9. Kode 9

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

10. Kode 10

.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!