Cara membuat gambar berputar di postingan blog

Banyak cara membuat blog kita tampil cantik dan menarik, Setelah kemarin kita sudah  mencoba bagaimana cara membuat tombol share melayang, selanjutnya bahasan kali ini kita akan mencoba bagaimana cara membuat gambar berputar ketika di sentuh oleh mouse. Teknik ini biasanya disebut dengan Image hover.

Tehnik membuat gambar berputar ini menggunakan kode css yang akan kita letakkan di source html template kita. Tidak sulit untuk menerapkan tutorial ini, hanya dibutuhkan kehati-hatian dan ketelitian ketika meletakkan beberapa kode ke dalam template. Untuk berjaga-jaga jika terjadi kesalahan, ada baiknya sobat melakukan backup terlebih dahulu seluruh isi html template sobat.

Berikut langkah-langkah cara membuat gambar berputar di blog kita.

1. Pertama-tama sobat masuk ke bagian edit html dengan menuju bagian template kemudian pilih edit html.
2. Cari kode seperti ini ]]></b:skin> Gunakan ctrl find untuk memudahkan pencarian
3. Copy kode CSS dibawah ini :

 #gambar {  
 float: left;  
 margin: 10px;  
 overflow: hidden;  
 position: relative;  
  -webkit-transition-duration: 0.8s;  
   -moz-transition-duration: 0.8s;  
   -o-transition-duration: 0.8s;  
   transition-duration: 0.8s;  
   -webkit-transition-property: -webkit-transform;  
   -moz-transition-property: -moz-transform;  
   -o-transition-property: -o-transform;  
   transition-property: transform;  
   overflow:hidden;  
 }  
 #gambar:hover {  
  -webkit-transform:rotate(360deg);  
   -moz-transform:rotate(360deg);  
   -o-transform:rotate(360deg);  
 }  

Kemudian paste tepat diatas  kode ]]></b:skin> yang sobat cari tadi. Simpan perubahan template sobat.

4. Buatlah postingan baru dengan judul Cara membuat gambar berputar. masukkan kode dibawah ini kedalam postingan melalui mode html, ingat memasukkannya harus dalam mode html bukan dalam mode Compose.

 <div id="gambar">  
 <img src="url Gambar" />  
 </div>  

Ganti url gambar yang berwarna biru dengan url gambar yang ingin sobat tampilkan agar berputar.
Sampai disini tutorial selesai, silahkan sobat semua mencobanya pada blog sobat.  Untuk posisi gambar bisa langsung di atur melalui pengaturan yang ada di dashboard blog sobat.

Referensi mengenai CSS hover dapat di lihat di w3schools.com.

Artikel Menarik Lainnya

10 comments :

Hosting Murah said...

maksudnya berputar gi mana yah mas ??


http://fhirman-ilham.blogspot.com/2013/06/anekahostingcom-web-hosting-murah.html

https://galerycatatan.blogspot.com/ said...

bermanfaat gan bagi kami....!!!!
di tunggu : http://galerycatatan.blogspot.com

Unknown said...

This comment has been removed by the author.

Unknown said...

thanks udah berkunjung gan, maksud nya berputar begini, kalo agan punya postingan nah di postingan agan ada gambarnya. biasanya gambar itu kalo di sorot atau ditempel pake mouse tuh gambar diem aja.

nah dengan teknik css seperti ini tuh gambar bakal jungkir balik kayak pemain sirkus kalo mouse agan di tempelin ke gambar. :)

Ade Putra Blog said...

wah, bermanfaat banger artikelnya gan..
nice post gan..
jangan lupa komen backnya di www.adeputra-pkp.blogspot.com

Anonymous said...

ada demo nya gak mas..

Unknown said...

kalo unyuk permanen bisa gak gan?
maksudnya setiap hal totarial yang kita posting yang ad gambarnya
semua gambar pas di sentuh mouse akan berputar,,
jadi gak perlu ribet mengganti url gambar yang ingin berputar
di blogg kita,,

muhon petunjuknya ya gan?"

saslam blogger

rasyid said...

untuk permanen bisa gak gan'
intinya smua gambar pada blogg kita bila disentuh mouse akan berputar
jd gk perlu ribet mengganti url gambarya,,

mohon penjelasannya ya gan,,

salam blogger,,

hit-hat said...

mksd berputar gimana gan, klo boleh kasih gambar atau videonya,,,,

merhaba said...

bitlis
tunceli
ardahan
bingöl
muş
GXNJİF

Post a Comment

Tinggalkan jejak Anda dikomentar ini.
Kami membutuhkan kritik dan saran Anda untuk kemajuan Blog ini.
Terima kasih sudah berminat untuk meluangkan waktu berkomentar disini, semua kritik dan saran Anda akan saya dengarkan untuk memajukan Blog ini.
Gunakan name/url untuk berkomentar.
Anonymous = Spam

.
.
.
.
.

---->>Alexa<-----

---->Histats<----

Link Sobat