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 ...


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);
}

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;
}

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.

COMMENTS

BLOGGER: 1
Loading...
Name

#BeMoreProductive,1,6th Indonesian Pearl Festival 2016,1,Abutours.com,1,Adobe Premier Pro,1,Asusintel,1,Award,1,Babasal Mombasa,1,Backsound,2,Balancing,1,Bangga di Banggai,1,Be Gravitasi,1,Bebas Bayar,1,Bengkel Mobil,1,Bika Bogor,1,Bika Bogor Talubi,1,Biznis,1,Blog Design,18,Blogger,24,Bumper,1,CC 2015,1,Citra Maja Raya,1,Co-working Space,1,Colidan,1,Competition,32,Competition DEV+,1,Corel Draw X7,1,Coreldraw,1,CV Design,1,Cyko Handbreak,1,dealoka,1,Designer,5,Digital Marketing,1,Domain,1,Dotcomforme.com,1,DUMET School,1,Education,6,Ekspresikan Dirimu,1,Elevenia,1,Excite Shop,1,FestHAM2016,1,Fintech,1,Footer,1,FSB,1,Goverment PR,1,HAnavi,1,Header,6,Himawan Putra,1,HIS Travel Indonesia,1,Hosting,1,hostinger,1,HRIS Software,1,Indramayu Kota Budaya,1,Influenzer,31,Inspirasi Astra,1,JIBB,1,Kuliner Bogor,1,Kursus Editing Video,1,Lawan Neuropati,1,LinovHR,1,Luna Smartphone,1,Main Post,3,Marketz,3,Meeting Room,1,Milkshake,1,Motion Graphic,2,Neurobion,1,Neuropati,1,Niagahoster,1,Obat maag paling ampuh,1,Office Room,1,Oleh-oleh Bogor,1,Oleh-oleh Khas Bogor,1,Paket Meeting,1,Pesona Jawa Tengah,1,Pop Ice,1,Ralali.com,2,Review,29,Ruang Kantor,1,Ruang Meeting,1,rukamen,1,Serumah.com,1,sewa apartemen,1,Shop n Drive,2,Sidebar,8,Skyscanner,1,Software,3,Sound Effect,2,Sponsor,14,Spooring,1,Storylio,1,Tempat Kursus Digital Marketing,1,Tips Blogging,3,Tips Design,3,Travel,8,Traveloka,2,Tutorial Blog,1,Tutorial Motion,1,Vector,1,Video Editor,5,Video Effect,1,Visit Tidore Island,1,XWORK,1,Youtuber,6,
ltr
item
Artadhitive | Daily Content Creator: Cara Membuat Zoom Effect Gambar Pada Postingan Blog
Cara Membuat Zoom Effect Gambar Pada Postingan Blog
https://1.bp.blogspot.com/--HIPg6zFsFU/V3KfEMW1xaI/AAAAAAAAEsI/e6Ja7Kmw3iMlCIWLX1Bd3eU1SFgANBUgwCKgB/s1600/Blog%2B10.png
https://1.bp.blogspot.com/--HIPg6zFsFU/V3KfEMW1xaI/AAAAAAAAEsI/e6Ja7Kmw3iMlCIWLX1Bd3eU1SFgANBUgwCKgB/s72-c/Blog%2B10.png
Artadhitive | Daily Content Creator
http://www.artadhitive.com/2016/06/Design-Blog-Cara-Membuat-Zoom-Effect-Gambar-Pada-Postingan-Blog.html
http://www.artadhitive.com/
http://www.artadhitive.com/
http://www.artadhitive.com/2016/06/Design-Blog-Cara-Membuat-Zoom-Effect-Gambar-Pada-Postingan-Blog.html
true
9208609652601285124
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy