Mempercantik Gambar Posting. Ada template bawaan blogspot yang gambar postingnya berlatang-belakang polos. Sehingga tampak kurang menarik sehingga dua demensinya tidak terlihat. Bagi Sahabat yang ingin mempercantik gambar postingan, silahkan copy-paste salah satu kode yang sesuai dengan selera dan keinginan.Dibawah ini adalah beberapa contoh kode untuk mempercantik gambar posting :
Gambar polos menjadi ada border dan bayangan.
.post-body img {Selanjutnya gambar yang ada efeknya ( hover ) jika disentuh cursor :
padding: 4px;
background: #ffffff;
border: 1px solid #ddd;
box-shadow: 3px 4px 3px #797979;
-webkit-box-shadow: 3px 4px 3px #797979;
-moz-box-shadow: 3px 4px 3px #797979;
}
Kode Pertama :
.post-body img {padding:5px; background:#848484; border: 2px solid #eea4c3;Kode Kedua :
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
.post-body img:hover {border-radius: 0% 50%; box-shadow: 0px 0px 15px #eee; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer;}
Kode Ketiga :.post-body img {padding:5px; background:#ffffff; border: 2px solid #ddd;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
.post-body img:hover {border-radius: 0% 50%; box-shadow: 0px 0px 15px #eee; -moz-transition: all 1s; -webkit-transition: all 1s; -o-
transition: all 1s; cursor:pointer;
border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-
transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate
(0deg);box-shadow:1px 1px 5px #00CCD3;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px
solid #2eb31a;border-left:2px solid #eab823;}
.post-body img {padding:5px; background:#ffffff; border: 2px solid #ddd;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
.post img:hover {
-moz-trnasform: scale(1.3) ;
-webkit-transform: scale(1.3);
-o-transform: scale(1.3) ;
-ms-transform: scale(1.2) ;
transform: scale(1.3) ;}
Langkah Cara memasangnya adalah sebagai berikut :
- Klik desain.
- Pilih Template
- Klik Edit HTML
- Letakan salah satu kode tersebut di atas ]]></b:skin> . Jika tidak berfungsi silahkan cari kode lainya yang berawalan ]]> .
- Klik Pratinjau.
- Jika sudah merasa cocok kemudian Klik Simpan.
Mudah bukan caranya mempercantik gambar posting ? Selanjutnya silahkan Sahabat untuk berkreasi dengan merubah warna dan ukuran border/padddingnya sehingga akan menciptakan suatu ciri khas yang khusus. Agar bisa tampil beda dan special ! Dan untuk template dari pihak ke tiga atau template yang sudah ada hiasan gambarnya, jika ingin mengganti, silahkan cari kode yang berawalan .post-body img dan ( kalau ada ) .post-body img:hover . Gantilah kode-kode tersebut . Selamat mencoba dan salam sukses !
♥♥DjB♥♥