Sabtu, 23 November 2013

Bingkai / Border Untuk Menghias Gambar Blog

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

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

2

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

3

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

4

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

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

6

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

7. Kode 7
.post-body img{
background:url(http://2.bp.blogspot.com/-P7KYQue9ZLg/UDdjOnyGMTI/AAAAAAAAD_s/3SaSOjrL9pI/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

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

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

10

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

NOTE : 
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!

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Ditulis Oleh : Alfrandhy dharwisi // 17.39
Kategori:

Comments
0 Comments

0 komentar:

Poskan Komentar

umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin

1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan untuk klik "Berlangganan Lewat Email" untuk membangun kreatifitas blog ini
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana
4. Bila menyebarluaskan artikel ini harap cantumkan baclink nya

Bila anda senang dengan artikel ini silahkan Klick Disini atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas.

 

Maaf Kenyamanan Anda Terganngu Website Sedang Direnobvasi

×

Powered By Facebook and Get This Widget

Site info

My Friend

lingkaran google plus