Efek Hover Ketupat Pada Gambar disetiap Postingan

Karena banyak pertanyaan mengenai postingan Membuat Gallery Menarik di Blog tentang bagaimana menambahkan efek ketupat seperti pada blog ini, maka langsung saja saya posting bagaimana cara membuatnya.

 Silahkan Copy Kode Berikut :

/*--Hover--*/
.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;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

Buka Rancangan Template Blog sobat, kemudian letakan kode tersebut tepat diatas kode  ]]></b:skin>

Sebagai contoh, bisa lihat penempatannya seperti berikut:

/*--Hover--*/
.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;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}


]]></b:skin>

Setelah itu, disimpan.. Maka secara terotomatisasi setiap gambar yang ada didalam postingan sobat akan ditampilkan dengan efek tersebut.