Membuat Efek Zoom Otomatis Pada Semua Gambar Di Posting Blog

Sempat tidak melakukan update terhadap blog ini selama dua minggu alasannya yakni sibuk dengan acara di kampus kesudahannya kali ini saya memiliki waktu luang untuk memperbaharuinya. Dalam tutorial kali ini saya akan menyampaikan bagaimana cara membuat Zoom Effect atau dalam Bahasa Indonesianya ialah efek memperbesar pada setiap gambar maupun foto yang ada di dalam postingan blog anda.

Keuntungan yang anda mampu dengan memasang Zoom Effect ini ialah membuat blog anda terlihat lebih elok dan Pro. Dan jikalau merujuk pada trends dikala ini khususnya di dunia web design yang terus membicarakan dan meneliti ihwal kehebatan CSS3 maka tidak ada salahnya juga kita membalut design template blogger kita dengan sentuhan kode CSS didalam gambar-gambar postingan blog. Semua kodenya sendiri murni menggunakan CSS tanpa ada tambahan JavaScript atau jQuery, sehingga tidak akan terlalu berpengaruh terhadap Page Loading pada blog anda.

Efek memperbesar gambar ini akan muncul atau bekerja saat cursor dari pengunjung melakukan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu membuat markup tambahan apapun didalam postingan blog alasannya yakni Zoom Effect ini akan bekerja secara otomatis terhadap semua gambar dan foto yang ada dipostingan blog hanya saja saat pengunjung blog melakukan hover pada gambar anda tersebut, efek ini akan mengambil sedikit akselerasi tambahan dari CPU komputer maupun laptop dari pengunjung blog.

 Demo

---

Persiapan :

---

Salin semua kode yang ada dibawah ini

Klik ganda untuk menyalin

 .post 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 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; } 

---

Langkah-langkah :

---

1) Masuk ke akun blogger anda kemudian klik Template

2) Lakukan Back up kemudian klik Edit HTML

3) Cari kode ]]></b:skin> (gunakan Ctrl + F) kemudian paste semua kode yang sudah anda salin tadi tepat di atasnya

4) Klik Simpan Template

Jika dikala ini anda mengaktifkan fitur lightbox resmi dari Blogger, efek ini akan tetap berjalan dan tidak berpengaruh terhadap satu sama lainnya. Dan sekarang coba anda lihat konten dari gambar dan foto yang ada di postingan blog anda sudah memiliki Zoom Effect dan membuatnya terlihat lebih menawan. Enjoy & Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/

Cara Membuat Efek Bergoyang Pada Gambar Posting Blog

Sebelumnya anda mungkin sudah mencoba memasang efek zoom otomatis pada semua gambar posting blog. Nah kali ini saya akan membuat pengaruh shake atau pengaruh bergoyang yang di implementasikan didalam gambar kiriman blogspot tanpa ada komplemen mark up apapun dan hanya menggunakan pengaruh murni CSS3 yang tidak akan terlalu kuat terhadap beban loading blog anda.

Efek ini akan bekerja pada saat pengunjung melakukan mouse over atau melakukan hover baik itu terhadap gambar yang mempunyai anchor link maupun gambar yang tidak memilikinya. Efek shake yang membuat gambar blog anda bergoyang ini akan bekerja pada semua browser mirip IE, Firefox, Chrome, Safari, Opera bahkan saya telah mencoba melakukan hover pada browser di perangkat android dan pengaruh inipun bekerja sangat mulus tanpa ada kendala.

Demo

Langkah-langkah membuat pengaruh bergoyang pada gambarb di blog:

1) Masuk ke dashboard saya blogger anda
2) Klik Template kemudian back up
3) Klik edit tempalte kemudian cari aba-aba ]]></b:skin>
4) Salin kemudian pastekan semua css dibawah ini tepat diatas aba-aba tersebut

Klik ganda untuk menyalin

 .entry-content img {  transition-duration:0.5s;  transition-timing-function: ease;  transition-delay:0s;  -moz-transition-duration:0.5s;  -moz-transition-timing-function:ease;  -moz-transition-delay:0s;   -webkit-transition-duration:0.5s;  -webkit-transition-timing-function:ease;  -webkit-transition-delay:0s;  -o-transition-duration:0.5s;  -o-transition-timing-function:ease;  -o-transition-delay:0s;  }  .entry-content img:hover {  animation-name: goyang;  animation-duration: 0.8s;  transform-origin:50% 50%;  animation-iteration-count: infinite;  animation-timing-function: linear;  -moz-animation-name: goyang;  -moz-animation-duration: 0.8s;  -moz-transform-origin:50% 50%;  -moz-animation-iteration-count: infinite;  -moz-animation-timing-function: linear;  -webkit-animation-name: goyang;  -webkit-animation-duration: 0.8s;  -webkit-transform-origin:50% 50%;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;  }  @keyframes goyang{  0% { transform: translate(2px, 1px) rotate(0deg); }  10% { transform: translate(-1px, -2px) rotate(-1deg); }  20% { transform: translate(-3px, 0px) rotate(1deg); }  30% { transform: translate(0px, 2px) rotate(0deg); }  40% { transform: translate(1px, -1px) rotate(1deg); }  50% { transform: translate(-1px, 2px) rotate(-1deg); }  60% { transform: translate(-3px, 1px) rotate(0deg); }  70% { transform: translate(2px, 1px) rotate(-1deg); }  80% { transform: translate(-1px, -1px) rotate(1deg); }  90% { transform: translate(2px, 2px) rotate(0deg); }  100% { transform: translate(1px, -2px) rotate(-1deg); }  }  @-moz-keyframes goyang{  0% { -moz-transform: translate(2px, 1px) rotate(0deg); }  10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }  20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }  30% { -moz-transform: translate(0px, 2px) rotate(0deg); }  40% { -moz-transform: translate(1px, -1px) rotate(1deg); }  50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }  60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }  70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }  80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }  90% { -moz-transform: translate(2px, 2px) rotate(0deg); }  100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }  }  @-webkit-keyframes goyang{  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }  } 

5) Klik Simpan

Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka pengaruh bergoyang pun akan mengiringinya pada saat anda melakukan hover. Enjoy & Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/