Cara Membuat Zoom Effect Gambar Pada Postingan Blog
Gambar merupakan hal yang paling penting untuk mendeskripsikan segala sesuatunya pada orang lain, begitu juga dengan blog sebagian orang memanfaatkan gambar untuk menyampaikan secara jelas informasi yang terdapat pada postingan blog. Orang akan dengan mudahnya paham dan mengetahui informasi melalui gambar yang kita sisipkan pada blog kita.
Untuk menyisipkan gambar pada postingan blog bukanlah hal yang sulit untuk pemula blogging, tapi bagaimana dengan menambahkan zoom effect pada gambar yang ada pada postingan blog kita. Kali ini sahabat blogy akan share bagimana cara menambahkan zoom effect gambar pada postingan blog, untuk lebih jelasnya silahkan arahkan mouse anda ke gambar dibawah ini.
Tampilan gambar terlihat lebih menarik dan unik untuk effect gambar pada blog kalian. Gimana tertarik untuk mencobanya ?, ayo kita simak caranya.
Bagi kalian yang ingin menambah zoom effect gambar pada seluruh postingan blog sobat bisa menggunakan cara dibawah ini :
Cara yang pertama :
Step 1. Login pada blog anda
Step 2. Masuk pada menu Tamplate kemudian klik Edit HTML
Step 3. Kemudian anda cari kode ]]></b:skin> (gunakan ctrl+f untuk mempermudah pencarian)
Step 4. Letakan Code Script dibawah ini (Copy-Paste) tepat diatas kode ]]></b:skin>
.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}
Step 5. Simpan Tamplate dan lihat hasilnya
Bagi kalian yang ingin menambah zoom effect gambar pada postingan blog yang diinginkan sobat bisa menggunakan cara dibawah ini :
Cara yang Kedua :
Step 1. Login pada blog anda
Step 2. Masuk pada menu Tamplate kemudian klik Edit HTML
Step 3. Kemudian anda cari kode ]]></b:skin> (gunakan ctrl+f untuk mempermudah pencarian)
Step 4. Letakan Code Script dibawah ini (Copy-Paste) tepat diatas kode ]]></b:skin>
.art 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;
}
.art img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
-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;
}
.art img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
Step 5. Simpan Tamplate Jika sudah selesai
Step 6. Kemudian untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="art" pada kode HTML gambar, contohnya seperti ini:
<a class="art" href="http://twitter.com/artadhitive" ><img border="0" height="95" src="https://4.bp.blogspot.com/-i3fGR4AZ8V8/V3KyvpSTx8I/AAAAAAAAEsQ/MvapScUiXZQgL2KqDPZx6OS70zYtg6jKgCLcB/s1600/logo1.png" width="350" /></a>
Step 7. Untuk tulisan yang berwarna merah silahkan anda ganti dengan alamat url gambar dan url gambar, untuk yang berwarna biru silahkan disesuikan dengan ukuran gambar.
Silahkan mencoba, semoga berhasil dan tetap semangat.
1 comment
salam Aqiqah Jogja