Cara Menambahkan Efek Gambar Pada Postingan Blog

Menambahkan efek gambar pada postingan blog dapat membuat blog makin bertambah menarik dan keren. Tentu saja tetap memperhatikan akibat yang mungkin diperoleh terhadap kecepatan (page speed) blog itu sendiri. Namun kalian tidak perlu khawatir, efek gambar yang diberikan kali ini, tidak mempunyai pengaruh yang cukup signifikan terhadap page speed blog itu sendiri.

Artikel pada blog ini hanya akan menfokuskan tuturialnya hanya penggunaan pada template VioMagz v4.7.0 buatan Mas Sugeng dengan beberapa artikel tentang VioMagz seperti Redesign VioMagz dengan menambahkan Fitur Dark Mode👀 dan lainnya. 

Namun bukan berati apa yang disampaikan hanya dapat diterapkan pada VioMagz saja seperti penggunaan efek gambar ini telah dicoba kebeberapa template buatan lokal dan dapat berfungsi dengan baik, namun karena template yang Admin gunakan adalah VioMagz maka lebih difokuskan kesana.

Ada beberapa efek gambar yang dapat diterapkan pada template VioMagz v.4.7.0 seperti yang dapat kalian lihat melalui blog ini sendiri yaitu:

A. Efek Transisi (Transition)

Efek transisi disini dapat diartikan sebagai animasi yang diberikan atas pergantian dari slide gambar sebelumnya ke slide gambar selanjutnya. Untuk memasangnya pada template VioMagz cukup ikuti langkah-langkah berikut:

1. Salin (copy) script dibawah dan pastekan diatas kode </head>.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.imgani .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.imgani .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
</style>
</b:if>

2. Selanjutnya menambahkan kode script dibawah, dan letakkan sebelum/diatas </body>.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".post-body img").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("anime")})}));
//]]>
</script>
</b:if>

B. Efek Bergoyang (Shake)

Efek shake akan menampilkan efek gambar yang bergoyang ke atas, ke bawah, ke kiri, dan ke bawah sesuai dengan pengaturan yang kita berikan. Efek bergoyang ini akan berjalan saat kursor diletakkan diatas gambar.

Langkah memasangnya yaitu letakkan scipt dibawah ini diatas kode ]]></b:skin> atau kode </style>.

/* efek shake */
.post-body a img{box-shadow: 0px 0x 6px rgba(0, 0, 0, 0, 5);}
.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)}}

C. Efek Membesar (Zoom)

Efek zoom akan menampilkan efek saat kursor mengarah/diletakkan keatas gambar dan akan memberikan efek gambar yang membesar. Efek membesar ini saya tempatkan pada gambar Thumbnail Post untuk menambah daya tarik dibagian page halaman utama.

Cara memasangnya simple, kalian copy script dibawah dan pastekan diatas atau sebelum kode ]]></b:skin>.

.img-thumbnail img{width:100%;height:auto;transform:scale(1.0);backface-visibility:hidden;padding:0;margin:0;transition:transform .5s}
.img-thumbnail:hover img {transform:scale(1.4);}

 

Cukup mudah bukan?..Beberapa efek gambar diatas sudah dapat membuat blog lebih menarik dan keren namun tidak memberikan pengaruh yang besar pada skor page speed blog kalian. Efek gambar diatas selain pada template VioMagz, juga bisa digunakan untuk template blogger lainnya, namun kalian harus meperhatikan kode yang ada pada template tersebut seperti kode .post-body, karena kode yang digunakan kadang ada sedikit perbedaan. 

Bila ingin tahu cara menambahkan efek gambar pada postingan blog dalam bentuk video, silahkan kunjungi Butta Toa Youtube Channel👀. Kalian juga dapat mengetahui cara membuat/memasang Syntax Highlighter👀 pada template VioMagz v4.7.0 dan juga dapat diterapkan pada template lainnya melalui artikel di blog ini. Semoga bermanfaat, Wasaalam.

Share :