Follow Google+

Part Of Blogger

Photobucket

Statistic

DMCA.com Protection Status

Popular Posts


Art dan Adhi adalah dua kata yang tidak akan pernah terpisahkan, dengan adanya dua kata tersebut terciptalah karya creative itulah awal mulanya artadhitive dilahirkan. Art Design memang luas kaitanya, tapi segala sesuatu itu bermula dari Art Design, Art Design bukan hanya coretan tinta, bukan hanya goresan garis dan bukan hanya gesturan mouse melainkan adalah kehidupan seni yang setiap orang memilikinya. Art Design adalah Seni yang berhak dimiliki setiap manusia karena goresan tangan yang bodoh sekalipun bisa menghasilkan karya seni yang luar biasa.
Art of Adhi Creative ...

Instagram

Instagram

Advertise 970x90

Panduan Design

Follow This Site

Google+ Followers

Butuh Apartment ?

Wednesday, 29 June 2016

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

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.

No comments:
Write comments

Interested for our works and services?
Get more of our update !