Sabtu, 15 September 2012

Membuat Gambar Berputar Di Postingan Blog

Membuat Gambar Berputar Di Postingan Blog ini lagi-lagi harus bermain HTML lagi sobat. :ngakak
Tapi jangan menyerah dulu sebelum mencoba.
Nah, untuk Membuat Gambar Berputar Di Postingan Blog ini ada dua pilihan.
Yang pertama, Membuat Gambar Berputar Di Setiap Postingan Blog secara otomatis.
Dan yang ke dua, Membuat Gambar Bergerak Hanya Di Beberapa Postingan Tertentu saja.

nah selanjutnya saya akan membahas Membuat Gambar Berputar Di Setiap Postingan Blog terlebih dahulu.
berikut tutorial Membuat Gambar Berputar Di Setiap Postingan Blog:

1. Masuk akun blog sobat.
2. Pilih Rancangan, pilih Edit HTML
3. Cari kode seperti ini "  ]]></b:skin> "
4. Untuk mempercepat pencarian gunakan CTRL + F
5. Jika sudah ketemu, kemudian Paste-kan script berikut, tepat di atas kode yang di atas.


<!-- efek gambar berputar -->
.post img { background:#aaa; border-radius:px; -moz-border-radius:px; -webkit-border-radius:px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-out; -webkit-transition:all 1.2s ease-out; } .post img:hover { z-index:99; background:#993300; border-color:#00000; -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px); -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px); }
<!--sampai disini-->


6. Kemudian Simpan / Save. maka otomatis gambar pada blog anda akan berputar.

7. Jika sobat menggunakan cara yang pertama ini, walapun kita menggunakan read more, pada halaman depan blog gambar akan tetap ngezoom dan berputar.

Okey, lanjut yg kedua.

Berikut tutorial Membuat Gambar Bergerak Hanya Di Beberapa Postingan Tertentu:

1. Ketika anda memposting suatu artikel di blog, anda masuk ke HTML bukan Compose postingan
2. Copy Dan Pastekan Script berikut di paling bawah HTML pada postingan blog anda.
3. Ingat pastekan di bagian paling bawah HTML bukan Compose.


<style type="text/css">

.post img { background:#aaa; border-radius:px; -moz-border-radius:px; -webkit-border-radius:px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-out; -webkit-transition:all 1.2s ease-out; } .post img:hover { z-index:99; background:#993300; border-color:#00000; -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px); -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px); }
</style>   

4. Kemudian simpan atau terbitkan postingan sobat.. daaaannn... pastinya akan sama seperti gambar saya dibawah ini.




Okey, selamat mencoba Membuat Gambar Berputar Di Postingan Blog.

Tidak ada komentar:

Posting Komentar