Cara Membuat Tampilan Gambar Post Lebih Cantik

Pada kesempatan kali ini arjem akan mencoba menjelaskan bagaimana membuat tampilan gambar pada artikel/post menjadi lebih cantik dengan effect transparent sebelum di sorot kursor namun setelah kursor berada di atasnya  gambar menjadi terang  dan berlahan berubah bentuk, gimana penasan kan..?? heheheh, silahkan arahkan panah pada gambar di bawah ini:

Ok untuk menerapkannya ikuti langkah-langkah berikut ini

1. Login / sasuk ke blog sobat
2. Plih rancangan Edit HTML
3. Kemudian cari kode ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
4. Setelah ketemu copy kode di bawah ini dan pastekan tepat di atas kode ]]></:bskin>

.post img{max-width:auto;}
.post img dd{float:center;margin:0;margin-top:8px;background:none;display:block;}
.post img{border-radius:30px 0 30px 0;-moz-border-radius:30px 0 30px 0;-webkit-border-radius:30px 0 30px 0;-o-border-radius:30px 0 30px 0;float:center;opacity:0.5;filter:alpha(opacity=70);background:none;border:2px solid #000ddd;border-bottom:2px solid #444;border-right:2px solid #333;padding:3px;margin:1px;transition:all 0.5s;
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
.post img:hover{cursor:move;-moz-transform:scale(1.1) rotate(-0deg);-webkit-transform:scale(1.1) rotate(-0deg);-o-transform:scale(1.1) rotate(-0deg);-ms-transform:scale(1.1) rotate(-0deg);transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:2.2;border:2px solid #ccc;border-right:2px solid #000ddd;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);border-bottom:2px solid #0274be;box-shadow:1px 1px 5px #0274be}
.post img ul{padding:0;overflow:none;margin:0
}

1. Yang terahir save template dan klihat hasilnya ( semoga bermanfaat )