Cara Membuat Effect Berputar Dan Zoom Pada Setiap Gambar Di Postingan

Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Effect Zoom Pada Gambar Di Blog", dan "Cara Membuat Effect Terang dan Gelap Pada Gambar" dan sesuai permitan salah satu Sobat Blogger, Saya Posting Tips ini. Sebagai contoh Kalian bisa melihat pada Gambar di atas, atau pada setiap Postingan Gambar di blog ini, dan lorot kursor Kalian ke arah gambar. OK, ditak usah berlama-lama, kita langsung ke langkah-langkahnya.

[1]. Pertama, pastinya LogIn dulu ke BLOG Kalian.
[2]. Kemudian dari Dasbor, cari Template --> Edit HTML.
[3]. Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>.
[4]. Kemudian CoPas Code 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}}
[5]. Terakhir tinggal di SIMPAN dan lihat hasilnya.

OK,sekian Tips Blogger kali ini, semoga Tips ini bermanfaat buat Sobat Blogger semuanya, dan buat Sobat Blogger yg sudah Request, semoga  sudah terjawah pertanyannya.


membuat terang gelap pada blog

Setelah sebelunya Saya sudah pernah bahas tentang Cara Membuat Effect Zoom Pada Gambar Di Blog, maka kali ini Saya akan bahas tentang Cara Membuat Effect Terang dan Gelap Pada Gambar. OK kita masuk ke langkah-langkahnya. 

[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Cari Code ]]></b:skin>.
[4]. Kalo sudah ketemu, Copy dan Paste-kan Code di bawah, tepat di atas Code tadi.

A. Dari Gelap Menjadi Terang.
.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
B. Dari Terang Menjadi Gelap.
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga Bermanfaat...!!! Jangan lupa tinggalkan Komentar Kalian Ya...!!!

zoom efect gambar pada blog

Selamat malam sobat blogger, pada malam ini saya akan posting cara zoom pada gambar bila disorot link ok chekidot.

[1]. Login dulu ke Blog Kalian,
[2]. Cari Rancangan --> Edit HTML,
[3]. Trus cari Code ]]></b:skin>,
[4]. Kalo sudah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di atas Code tadi.
.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-
transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-
duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 
0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-
transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px 
gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px 
gray;opacity:1}


[5]. Kalo sudah, tinggal di SAVE.

Cara Memeberikan Effectnya :
Kalian hanya perlu menambahkan Code di bawah ke dalam Code Gambar Kalian.
<div class="hovergallery">URL Gambar Kalian</div>
Sebagai Contoh :
<div class="hovergallery">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcJFoFEXLGrG-07UmtSQ-hZA0QeYDvZHLn3CZ5PZNBGnOnYSX_15IZ_Li0VIAnhdbZHmd3dwgIJd-PsRvEo8rP2DHUqMpjIVCMdkqBPk-EXNfIBI-3b5RFCD7SgKJ5EaYBlrU4bZkJFXd/s1600/Fb-IB-JmK-%25E2%2584%25A24.png</div>
NB :
- Kalo ada pertanyaan silahkan tuliskan pertanyaan Kalian di Kotak Komentar.

Semoga Berhasil...!!!

 

Tutorial Blogspot Copyright © 2011-2012 | Edited By : Love Jenny