Serba Tutorial | Internet Marketing | Blogging | Komputer | Smartphone

Cara Membuat Efek Gambar Bergerak Pada Blog



Cara Membuat Efek Gambar Bergerak Pada Blog - Membuat efek gambar pada postingan blog bergerak ketika kursor sedang mendekat, tentunya akan membuat lebih menarik perhatian visitor dan layak untuk anda coba. Apalagi bagi anda yang mungkin sedang baru belajar ngeblog, sepertinya anda harus mencoba tutorial efek gambar bergerak yang satu ini.

Untuk membuat efek gambar bergerak semacam ini tentunya anda membutuhkan code script tambahan sehingga gambar pada postingan terdapat efek bergeraknya. Gambar akan mulai bergerak ketika cursor mendekat dan menyentuh gambar, ketika cursor menyentuh gambar maka efek animasi pada code script tambahan tersebut baru bisa bekerja.

Selain itu, anda dapat meletakan efek gambar ini dimana saja, seperti pada artikel, widged blog dan bagian lainnya. Namun jangan terlalu berlebihan untuk menambahkan efek bergerak ini pada gambar agar tidak terkesan alay.


Cara Membuat Efek Gambar Bergerak Pada Blog

Membuat efek gambar bergerak kekiri dan kekanan sebenarnya sangat mudah untuk dilakukan, nah bagi yang masih belum tau tutorialnya silahkan bisa simak saja langkah-langkahnya berikut ini:

1. Pertama silahkan login terlebih dahulu ke akun blogger anda.

2. Jika anda ingin menambahkan efek gambar bergerak ini pada artikel, silahkan bisa pilih menu Postingan => Entri Baru.

3. Copas code script di bawah ini.
<style type="text/css">#timings_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.abstrak_box{width:280px;height:200px;margin-bottom:10px;background:url(https://1.bp.blogspot.com/-d7B_eUVXER8/WXYFHv5jurI/AAAAAAAAEmE/x7l-rKy5Hv8cXvds3s-diP9tV0lkKwndgCLcBGAs/s320/2.PNG)}#ease.abstrak_box{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;}#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box{margin-left:440px;-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background-color:#fff;</style><div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>
4. Yang perlu anda lakukan hanyalah mengganti url gambarnya saja https://1.bp.blogspot.com/-d7B_eUVXER8/WXYFHv5jurI/AAAAAAAAEmE/x7l-rKy5Hv8cXvds3s-diP9tV0lkKwndgCLcBGAs/s320/2.PNG

5. Kemudian silahkan pastekan pada mode HTML atau pada widget blog.

Untuk contohnya silahkan bisa dilihat di bawah ini:





Share on Facebook
Share on Twitter
Share on Google+
Berlangganan Artikel Gratis Via Email



Copyright © 2016 - 2017 TWD.WEB.ID All Rights Reserved | About me | Contact us | Privacy Policy | Disclaimer | Sitemap | Link Partner