Efek Hover Ketupat Pada Gambar disetiap Postingan | BHIBIT ARIANTO
Change Background of This Blog!


Lihat

 

Selasa, 09 April 2013

Efek Hover Ketupat Pada Gambar disetiap Postingan

0 komentar

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.

Fs CaLm

 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.

0 komentar: