Memunculkan Shadow Gambar Pada Area postingan di Blog | KNOWPLUS +

Tujuan membuat shadow gambar pada area postingan yakni untuk mempercantik postingan blog dan juga agar postingan terlihat rapih. Dalam membuat efek shadow pada gambar pun ada dua cara yakni dengan menambahkan kode script pada HTML blog kita atupun dengan menimpa gaya menggunakan bantuan CSS.

Yang pertama yaitu menambahkan kode script di HTML.

Masuk ke Tema => Edit HTML dan pastekan kode script dibawah ini tepat di atas kode ]]></b:skin>

.post-body img{background:#fff;height:auto;max-width:98%;margin-bottom:2px;padding:10px!important;box-shadow:0 0 0 1px rgba(0,0,0,0.030),0 7px 20px 1px rgba(0,0,0,0.10)}
.post-body img:hover {opacity:0.95;}
.post-body a.img,.post-body .separator a {margin-left:0!important;margin-right:0!important;}

Setealah itu simpan tema.

Yang kedua yaitu menggunakan bantuan CSS.

.post img {
    margin: 30px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.post img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Setelah anda menyalin kode CSS di atas, masuk ke Tema pilih Sesuaikan.


Setelah itu pilih lanjutkan dan pilih Tanbahkan CSS seperti gambar di bawah ini.


Setelah selesai klik pada pojok kanan atas Terapkan ke Blog.

Jika anda merasa artikel ini bermanfaat, jangan lupa di share ya :)

Share It