Belajar NgeBLOG : Membuat Gambar Berputar Dan Membesar Saat Disentuh Mouse

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

1. Pertama, pastinya Login dulu ke akun BLOG kamu

2. Kemudian dari Dasbor, pilih Template
3. Kemudian pilih Kode HTML

4. Cari Code ]]></b:skin> (Untuk memudahkan pencarian maka tekan Tombol CTRL + F atau F3 pada Keyboard )

5. Kemudian Copas code di bawah tepat diatas code ]]></b:skin>

Gambar berputar di postingan blog

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar dan membesar di postingan blog

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

Gambar berputar post dan komentar

.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
.img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar hanya di komentar

.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.comment img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar di header

.header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.header img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

6. Terakhir tinggal di SIMPAN dan lihat hasilnya.

Disini
Share On Facebook

Terjemahkan Halaman Ini