Cara Membuat Gambar Berputar Dan Membesar Di Blog ( Tutor Gabungan )

Albarnation | Membuat Gambar Berputar Dan Membesar Di Blog Saat Di Sorot Mouse. Berhubungan adanya  pertanyaan dari Kharisma Adzana . " Sob. saya mau tanya cara membuat gambar agar berputar itu bagaimana yaa ??.

Ya kalau sobat arahkan kursor ke gambar di atasni atau di mana saja di blog saya sobat akan melihat gambar berputar dan membesar. Maka saya mencoba mengulas tentang Tutorial ini dan Di lengkapi dengan Tutorial lainnya yang berkaitan dengan gambar. Nah Sobat mau tau Bagaimana caranya ? silahkan ikuti caranya dibawah ini.

Cara Ke 1 ( Satu )

• Login dulu ke akun blogger anda. 
• Kemudian dari Dasbor, cari Template --> Edit HTML. 
• Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>. 
• Kemudian copas kode di bawah tepat di ATAS Code ]]></b:skin>.

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s 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}

Dah Silahkan Di Save.

Atau Sobat bisa meletakkannya pada kode a img, cari kode a img pada edit HTML, kode a img pada umumnya seperti kode berikut.

a img{border-width:0}

karna sebagian template berbeda, carilah kode yang mirip dengan kode diatas kemudian hapus kode tersebut dan gantikan dengan kode dibawah ini.

a img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}a 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}

Cara Ke 2 ( Dua ) ( Alternatif Sob ) 

Cara Membuat Gambar Membesar dan berputar di Postingan

Jika Sobat Berkenan Untuk Memasangnya di blog sobat Silakan Ikuti Langkah-langkah berikut : 

1. Login Ke Akun Blog sobat
2. Pilih Rancangan/design Lalu Pilih EDIT HTML (dan jangan lupa untuk mencentang kolom expand template widget )
3. Copas/Letakan kode berikut tepat diatas kode </head>

<style>#albarnation{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#albarnation:hover{ -o-transform: scale(1.5) rotate(720deg) translate(0px);

-moz-transform: scale(1.5) rotate(720deg) translate(0px);

-webkit-transform: scale(1.5) rotate(720deg) translate(0px);}#ganteng a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>

 Atau Copas di dalam gadget HTML/Javascript

   4 . SimpanTemplatenya

CARA PEMAKAIANNYA

tambahkan <div id='tejahtcganteng'> sebelum kode/ script dari Gambar sobat dan penutu </div> diakhir script gambar

Contoh

<div id="albarnation">

<a href="http://id-id.facebook.com/albarnation" target="_blank" title="Cara Membuat foto/gambar efek memutar-mutar dan membesar saat disorot mouse"><img height="203" src=http://i1067.photobucket.com/albums/u439/albarnation/420164_504076036285200_650072576_n.jpg" style="border: 0px;" width="325" /></a></div>

Cara 3 ( Tiga ) Persi Lain Sobat

Nah yang Ke 4 ini agak lain sobat. tapi seperti yang saya katakan di atas saya akan memjabarkan beberapa Tutor yang berkaitan dengan gambar. Sudah Lihat Ada foto saya yang lagi inupil itu. nah ini dia cara berikut ini membuat gambar seperti  yang di atas, Ini dia carnya ? Tak simak Yooo

1. Klik situs  http://www.satisfaction.com/photo-cube-generator/ . Tidak perlu login atau konfirmasi email.
2. Setelah halaman terbuka, arahkan perhatian pada kotak dialog yang muncul dengan gambar berputar. Di bawah gambar tadi tertulis "PUT YOUR IMAGE ON A CUBE",
3. Klik tombol "BROWSE" yang terdapat di bawah tulisan yang berwarna merah, setelah muncul kotak dialog, cari file gambar yang telah tersimpan, setelah ketemu klik tombol "Open". Kotal 'File' akan terbaca.
4. Setelah selesai, klik tombol "UPLOAD". Pada tahap ini, gambar yang telah di-upload tersebut akan muncul dengan berputar-putar.
5. Kemudian langkah terakhir klik tombol "Copy HTML code" yang berlatar warna kuning dan selesai.

Proses selanjutnya Anda tinggal mem-paste kode html tadi ke dalam blog dengan Format Edit HTML Bukan Compose yoo. Gampang Bukan ? Selamat Mencoba.

Happy Blogging :D 

Membuat Gambar Berputar Dan Membesar Di Blog.
Cara Membuat Gambar Berputar Dan Membesar Di Postingan