form#searchform2{display: block;float:right;margin: 30px 14px 10px 5px;}input.searchinput{background:#fff;border: 1px solid#006699;color:#006699;height:30px;}.searchsubmit{background:#006699;border:1px solid#006699;color:#fff;height: 32px;} .post {-moz-border-radius: 20px ; -webkit-border-radius: 2; border-radius: 20px ; padding:20px; border: 5px solid #ff0000; } #navbar-iframe { height:0px; visibility:hidden; display:none } #Label1 li { float:left; width: 48%; } -->

Lencana Facebook

Selasa, 08 Januari 2013

Membuat Gambar Pada Posting Bergerak Saat di Sentuh Kursor


Hai sob,  kembali membawa trik buat blogger, yang merasa udah master blogger boleh lewatin artikel ini sob, ini cuma trik newbie sob. Membuat Gambar Pada Posting Bergerak Saat di Sentuh Kursor, gimana tuh maksudnya? coba sobat arahkan kursor sobat ke gambar dibawah ini:
nah gambarnya gerak kan sob saat disentuh kursor mouse, mau tau cara membuatnya?
check this on:

1. Masuk ke Blogger (saya masih memakai tampilan blogger lama saat artikel ini ditulis) > Klik Rancangan > Klik edit HTML
2. Cari kode ]]></b:skin> dengan bantuan CTRL+F agar lebih mudah, lalu letakkan atau paste kode dibawah ini setelah / dibawahnya kode ]]></b:skin> tadi.
kode:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
.post img {border:3px solid #1e1e1e;-webkit-transition: all 0.4s ease-in-out;}.post img:hover{margin-left:20px}</style> </b:if>
3. Klik simpan template.

sekarang coba lihat salah satu artikel sobat yang ada gambarnya dan arahkan kursor ke gambar tersebut.

semoga berguna :D baca juga: Membuat Menu Navigasi Vertikal Keren di Blog dengan Efek Transisi

keyword: gambar bergerak saat disentuh mouse, membuat gambar keren pada artikel blog, trik blogger, bagaimana cara membuat gambar yang bergerak saat disentuh kursor mouse

Tidak ada komentar:

Posting Komentar

Ainan Tasneem

http://picasion.com
create an animated gif here at http://picasion.com gif maker