Membuat Zoom Effect pada Gambar di Blog
Masih ingat dengan tutorila cara membuat zoom effect yang juga ditulis di blog ini? Kali ini kita akan belajar membuat zoom effect yang lebih mudah. Zoom effect adalah membuat efek perbesar pada gambar yang tersentuh oleh cursor.
Jika dulu harus mengedit template untuk membuat zoom effect, yang ini tidak usah mengubah template. Karena kode CSS-nya digabung langsung dengan HTML kode gambar. Tentu ini selain mempermudah juga bisa membuat blog tidak banyak kode CSS atau membuat blog tidak berat, sehingga loading blog tidak lemot.
Zoom effect yang membuat gambar jadi lebih besar ini bisa dipasang di post atau sidebar blog. Saat punya banner gambar di sidebar bisa memberikan efek zoom ini. Bisa jadi pilihan membuat tampilan gambar banner atau foto jadi lebih menarik, selain memakai mouseover. Berikut adalah kode untuk membuat effect zoom;
Ganti kode yang berwarna merah dengan URL yang dituju dan URL gambar. Kamu bisa menambahkan kode diatas di post dengan memilih HTML saat menulisnya. Atau juga bisa ditambahkan di sidebar dengan memanfaatkan gadget HTML/Java Script di blogger. Hasilnya akan seperti ini:

Bagaimana? Mudahkan? gambar, banner atau foto akan terlihat jadi lebih menarik. Akan membuat pengunjung tertarik untuk melihat dan mengklik.
Jika dulu harus mengedit template untuk membuat zoom effect, yang ini tidak usah mengubah template. Karena kode CSS-nya digabung langsung dengan HTML kode gambar. Tentu ini selain mempermudah juga bisa membuat blog tidak banyak kode CSS atau membuat blog tidak berat, sehingga loading blog tidak lemot.
Zoom effect yang membuat gambar jadi lebih besar ini bisa dipasang di post atau sidebar blog. Saat punya banner gambar di sidebar bisa memberikan efek zoom ini. Bisa jadi pilihan membuat tampilan gambar banner atau foto jadi lebih menarik, selain memakai mouseover. Berikut adalah kode untuk membuat effect zoom;
<style type="text/css">
.ow 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;
}
.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>
<a class="ow" href="http://twitter.com/kurniasepta" target="blank"><img src="http://2.bp.blogspot.com/-w0baJeovlEs/UHo3BGoZ2aI/AAAAAAAAEoU/jdCO_uGvFSc/s320/follow.jpg" /></a>
.ow 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;
}
.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>
<a class="ow" href="http://twitter.com/kurniasepta" target="blank"><img src="http://2.bp.blogspot.com/-w0baJeovlEs/UHo3BGoZ2aI/AAAAAAAAEoU/jdCO_uGvFSc/s320/follow.jpg" /></a>
Ganti kode yang berwarna merah dengan URL yang dituju dan URL gambar. Kamu bisa menambahkan kode diatas di post dengan memilih HTML saat menulisnya. Atau juga bisa ditambahkan di sidebar dengan memanfaatkan gadget HTML/Java Script di blogger. Hasilnya akan seperti ini:

Bagaimana? Mudahkan? gambar, banner atau foto akan terlihat jadi lebih menarik. Akan membuat pengunjung tertarik untuk melihat dan mengklik.
mantap gan...yang pertama komentar nih.
BalasHapuskunjungi balik blog aku mas kurnia..
Mantap Gan... Tambah ilmu lg ni saya, bermanfaat banget buat saya yang msh newbie ini... Makasih banyak Gan.. Ditunggu kunbalnya....
BalasHapusscriptnya kalau saya pasang ke dalam blog berplatform wordpress kira2 apa bisa juga ya ?
BalasHapusterima kasih
okok deh .... makasih yah gan atas infonya ,,
BalasHapuswidih ... mantep nih tutornya... makasih yo ..
BalasHapusmakasih bnyak ilmunya..sangat membantu sekali..
BalasHapusnambah ilmu baru lagi nih .. tks gan ..
BalasHapusmakasih bnyak infonya..
BalasHapusterima kasih sudah berbagi infonya,,
BalasHapusterima kasih sudah berbagi ilmunya
BalasHapusartikel yang bermanfaat sekali,,terima kasih infonya
BalasHapuslangsung di coba aj gan..
BalasHapusnice post,,,terima kasih sudah berbagi informasinya
BalasHapusmakasih bnyak untuk tutorialnya..sangat membantu sekali..
BalasHapusterimakasih bnyak atas informasinya..saya langsung dicoba gan..
BalasHapusuntuk menjawab rasa penasaran saya langsung coba gan..
BalasHapussangat membatnu sekali gan..makash bnyak infonya..
BalasHapusKalo gambar diklik jadi fullscreen tapi tetep dihalaman blog gimana ya caranya?
BalasHapuspatut dicoba nih om
BalasHapusoiya kalau mau menghilangkan backgroud bisa ga om
ijin Praktekin Gan :D
BalasHapusmanteebb nih
thankss infonya Sob :)
BalasHapuswah . .mantap nie. .ntar lngsung praktek ah. .
BalasHapusMalem sobat..
BalasHapusWaw nice post..
Yang post sebelum nya juga bagus tapi ini lebih baik dari yang lalu..:)
terus berkarya ya..
Haha..:D
oh ya mampir juga ya ke my blog..:)
ikutan juga ah gan
BalasHapusmain-main ya gan ke blog aku
http://www.googlefacebookyoutubeyahoobaiduwikipedialivetwitteramazontaobao.com/
Mantaabbsss Gan tipsnya....
BalasHapusboleh deh nih dicoba.........
BalasHapusmakasih Sob yaaa infonya......................
BalasHapussipppp,, maknyoosss. ijin nyoba yaaa..!!
BalasHapusmudah sekaliii yaa ternyata....... makasih tipsnya...
BalasHapus»»»
BalasHapusBuat Yang Mau Download Gratis Film Dewasa Sepuasnya & MP3 Brainwave Synchronization Audio Therapy Technology Yang Dapat Merangsang Pembentukan Gelombang Alfa Pada Bagian Otak, Sehingga Otak Akan Menghasilkan Hormon Yang Mampu Meningkatkan Kinerja Mental, Kekuatan Otak, Kreativitas, Daya Ingat, Konsentrasi, Kecerdasan, Kualitas Tidur, Kesehatan Otak, Kualitas Kesehatan, Kesejahteraan, Keberhasilan, Kemakmuran, Kebugaran, Tenaga Dalam, Hubungan Spiritualitas, Energi Supranatural, Penyembuhan Gangguan Perkembangan Dalam Peningkatan Aktifitas Motorik Anak-Anak (ADHD), Gangguan Stres Pasca Trauma (PTSD), Autisme, Kecanduan, Depresi, Insomnia, Mengurangi Tingkat Stres, Penurunan Berat Badan Dan Pembentukan Diri Pribadi Positif
Silahkan Kunjungi Alamat Website Berikut Ini :
* brainsynctech blogspot com
* brainsync co nr
Terima Kasih
»»»
nice
BalasHapusayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.
nice
BalasHapusayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.
nice
BalasHapusayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.
nice
BalasHapusayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.
tanks banget tipsnya
BalasHapuskunjungan silaturahmi, salam kenal, :D
BalasHapusmakasih to infonya...
BalasHapusSuwun, terima kasih untuk tipsnya
BalasHapusMantap gaaan! Izin praktekiin~
BalasHapuswiihh.. mantap banget nich
BalasHapusIjin copy ya mas, bermanfaat :)
BalasHapusterima kasih... sudah coba dipraktekkan walaupun pake pusing2 dulu :)) maklum baru aja belajar.
BalasHapusmantaps lagi...
BalasHapustq b4
Wah menarik sekali mas infonya, kebetulan saya juga lagi mau menulis artikel dengan tema serupa, izin copy code css nya ya gan.. ;)
BalasHapusMakasih infonya, gan. bagus sekali
BalasHapusDOWNLOAD ASK MOM 3D SEX GAME FOR ADULTS 18+ CLICK HERE TO DOWNLOAD
BalasHapusDOWNLOAD GTA 4 PC GAME INSTALLATION SETUP CLICK HERE TO DOWNLOAD
DOWNLOAD TEKKEN 5 PC GAME HIGHLY COMPRESSED INSTALLATION SETUP CLICK HERE TO DOWNLOAD
DOWNLOAD SEDUCE ME SEX ADULT PC GAME 18+ CLICK HERE TO DOWNLOAD
Gebear harga promo murah dan aman di sani-shop : Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
BalasHapusSemua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS: 0816-597476 ATAU KLIK WEBSET RESMI KAMI http://sani-shop.blogspot.com/.
Ready Stock!
Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock!
Apple iPhone 5 Rp.2,700.000
Ready Stock!
BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock!
BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock!
BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock!
Blackberry Curve 9320.Rp.700.000,-
Ready Stock!
Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock!
Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock!
Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock!
Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock!
Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock!
Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock!
Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000,-
Ready Stock!
Nokia Lumia 800 - Matt Black.Rp.1.700.000,-
Ready Stock!
Nokia Lumia-710-whiteRp. 900.000,-
Ready Stock!
Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
Ready Stock!
Nokia Lumia 710 - Black.Rp. 900.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari XL) - Black.Rp.1.200.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari Telkomsel).Rp.1.200.000,-
Ready Stock!
Apple iPod Touch 4 Gen 8GB.Rp.700.000.
Ready Stock!
APPLE iPod Nano 8GB - Pink.Rp.500.000,-
Ready Stock!
Acer Aspire 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
Ready Stock!
Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
Ready Stock!
Acer TravelMate TM8481-2462G32.Rp. 1.400.000
Ready Stock!
Acer ICONIA Tab W500 10.1" Tablets Notebook.Rp. 1.100.000,-
Ready Stock!
Nikon D7000 kit 18-105mm.Rp.1.700.000.
Ready Stock!
Nikon D90 Kit 18-105mm Vr.Rp 1.300.000.
Ready Stock!
Nikon Coolpix L 120 Red.Rp. 900.000
Ready Stock!
Nikon Coolpix P 500 Black.Rp 1.000.000
Keren gan terimakasih ya
BalasHapusmain ke juga ke blog ku
terimakasih
keren gan postinganya tapi klo masalah jam tangan keren silahkan kunjungi www.edydava.net ya :))
BalasHapusmantap tipsnya gan. salam sukses selalu.
BalasHapuswow gooooooooood top makasih ya mas triknya. pokonya maknyus lah.
BalasHapusNice and quite informative post. I really look forward to your other posts.
BalasHapusToshiba - Satellite 15.6" Laptop - 6GB Memory - 750GB Hard Drive - Mercury Silver (L55DA5252)
Toshiba - Satellite 17.3" Laptop - 6GB Memory - 750GB Hard Drive - Satin Black
Rata-rata konsumen yang telah sembuh dari penyakit gatal kulit terutama di daerah selangkangan dengan menggunakan obat pelangsing badan penghilang flek hitam bekas luka pada kulit yaitu Meilibahenling. Pemakaiannya pun sangat mudah, cukup jual obat bius wanita dioleskan ke bagian kulit bekas luka dan hasilnya akan terasa setelah dua minggu kulit tersebut akan kembali seperti semula. obat perangsang alami Obat penghilang bekas luka ini mengandung snake oil, glycerine, aloe picked oil, snake guts dan reseen mishap was leave. Penghilang flex hitam pada kulit ini tidak mengandung merkuri ataupun vimax asli merkuri ataupun hydroquinon yang biasanya menjadi bahan dasar untuk produk pemutih dan bisa menyebabkan perih ketika dioleskan sehingga obat penghilang bekas luka ini aman digunakan sekalipun untuk anak-anak. cara alami memperbesar alat vital pria menghilangkan bekas luka secara alami dan dengan obat - Noda atau flex hitam bekas luka yang disebabkan oleh bekas garukan, jatuh cara alami membesarkan payudara Kurap tubuh adalah infeksi jamur yang berkembang di lapisan atas kulit Anda.
BalasHapuswah menarik sekali gan tutorialnya, thanks ya.
BalasHapus