Cara Memasang Efek Bergetar Pada Gambar Di Blog Tanpa Memberatkan Loading Blog

Cara Memasang Efek Getar Pada Gambar Di Blog Tanpa Memberatkan Loading Blog - Efek getar pada gambar diblog ini sebenarnya sudah gak asing lagi ya dikalangan blogger sekarang. Karena efek getar ini merupakan salah satu cara agar blog kita bisa mendapatkan nilai rating yang bagus di mata para pengunjung. 

Tapi asal kamu tahu aja, gak semua tutorial yang ada di Google tentang cara memasang efek getar ini efektif buat blog kamu. Karena tak jarang banyak blog tutorial yang memberikan tutorial memasang efek getar ini namun memberikan dampak yang negatif bagi blog-nya. Yaitu dapat memberatkan loading blog. Hal ini biasanya terjadi karena script yang diberikan atau yang dipasang terlalu banyak sehingga berdampak buruk untuk loading blog.

Baca Juga Cara Memasang Efek Transisi Pada Gambar Diblog

Karena banyak orang yang memberikan tutorial seperti ini malah memberikan script yang berlebihan sehingga tidak baik untuk loading blog. Padahal kalau mau pasang efek getar pada gambar tidak perlu banyak script. Cukup menggunakan beberapa baris kode CSS saja ke dalam template blog kamu. Apalagi CSS ini sudah di perkecil ukurannya menggunakan alat CSS Minifier. Jadi kamu gak usah khawatir CSS ini akan memberatkan loading blog kamu.

Di artikel kali ini Dzuhalah akan memberikan tutorial cara memasang efek bergetar pada gambar yang ada di blog tanpa memberatkan loading blog. Cara yang akan saya berikan adalah dengan cara memasukan kode CSS ke dalam template kamu. Gak usah lama-lama lagi langsung saja ke tutorial cara memasang efek getar pada gambar di blog.

Baca Juga Cara Mengunci Jaringan 4G Di Smartphone Android Dengan Mudah

Cara Memasang Efek Bergetar Pada Gambar Di Blog Tanpa Memberatkan Loading Blog

Hal pertama yang kamu lakukan adalah login dulu ke akun blogger kamu. Lalu buka menu Theme >> Edit HTML >> lalu cari kode ]]></b:skin> atau </style> pada template blog kamu (Gunakan Ctrl + F pada keyboard agar lebih mudah dalam mencari kode). Setelah itu salin semua CSS dibawah ini kemudian taruh CSS-nya tepat berada diatas kode ]]></b:skin> atau </style> tadi.

.post-body a img{box-shadow:0 0x 6px rgba(0,0,0,0,5);border-radius:10px}.post-body a img:hover{animation:ignielShake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes ignielShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@-webkit-keyframes ignielShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}

Kalau sudah langsung saja klik simpan perubahannya dan lihat hasilnya. 

Untuk hasil ilustrasi dari efek getar diatas bisa kamu lihat pada gambar yang ada dibawah ini. Arahkan kursor kamu atau klik gambar yang ada dibawah ini.

Selain memasang efek getar pada gambar yang ada di blog kamu, CSS diatas juga merubah tampilan dimensi pada gambar tersebut. Jadi gambar yang ada di blog kamu akan terlihat lebih elegan dan keren. Bagus banget deh pokoknya. Gak kalah keren sama efek getar pada blog yang lainnya.

Baca Juga Cara Membuat Sitemap Keren dan Responsive di Blog

Ouh ya, efek getar ini mirip banget sama efek getar yang digunakan di blog Igniel.com. Kalau gak percaya silahkan samakan antara efek getar di blog ini dengan efek getar yang digunakan mba Igniel.

M Syakir Al-Farisy Seorang Mahasiswa yang hampir lulus dari sekolah yang memberatkan diri. Suka berbagi ilmu pengetahuan dengan cara menuliskan artikel-artikel yang ada di Blog ini.

Share :