Cara membuat efek membesar pada gambar
http://tutorialbloggermasnoer.blogspot.com/2011/05/cara-membuat-efek-membesar-pada-gambar_24.html
Memberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan gambar, apalagi sebuah web atau blog yang berkonten toko online, berbasis desain interior,eksterior,dekorasi, dll.
Untuk membuat efek membesar pada gambar saya akan menggunakan fitur CSS, yaitu dengan memanfaatkan atribut transition, atribut hover dan atribut transform:scale.
Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung membesar.
OK...., bila anda berminat, silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :
5. Copy kode di bawah ini dan taruh sebelum kode </head> :
6. Simpan Template.
7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek membesar, silahkan ... itu terserah anda.
Nah....Mudah kan...?
Silahkan anda coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Untuk membuat efek membesar pada gambar saya akan menggunakan fitur CSS, yaitu dengan memanfaatkan atribut transition, atribut hover dan atribut transform:scale.
Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung membesar.
OK...., bila anda berminat, silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :
5. Copy kode di bawah ini dan taruh sebelum kode </head> :
Catatan :
- Anda bisa mengatur posisi gambar pada saat membesar, baik kearah kekiri, kekanan, dan kebawah. Anda tinggal mengganti nilai "0" pada kode - kode :
padding-top:0;
padding-left:0;
padding-top:0;
padding-right:0;
6. Simpan Template.
7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek membesar, silahkan ... itu terserah anda.
catatan :
- Ganti ULR blog dan ULR image dengan ULR milik anda.Nah....Mudah kan...?
Silahkan anda coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
kalau gambarnya banyak dan mau ditata horizontal/vertical dan text ada disampingnya. bagaimana caranya? Terima kasih.
BalasHapusAnda bisa lihat artikel "CSS BACKGROUND" pada bagian no. 4, yaitu Mengatur posisi Latar belakang gambar,ini linknya: http://tutorialbloggermasnoer.blogspot.com/2011/03/css-background.html . Kemudian kode css yang ada digabung dgn kode css yg ada pd artikel ini.
BalasHapusAtau anda bisa lihat pada artikel "Cara membuat gallery menggunakan CSS Float" ini linknya: http://tutorialbloggermasnoer.blogspot.com/2011/06/cara-membuat-gallery-menggunakan-css.html , dan bila menginginkan efek zooming, anda tinggal gabung kode css-nya.
Silahkan dicoba.... semoga bermanfaat...
Newbie, ijin baca artikelnya,,,
BalasHapussilahkan...
Hapuskeren mamen XD
BalasHapusTerima kasih....
Hapusmakasih infonya sangat bermanfaat sekali, nice posting
BalasHapusNice info banget, terimakasih banyak, sukses terus Mas.
BalasHapusIni yang saya cari cari
BalasHapusterimakasih sharing ilmunya
makasih banyak mas, akhirnya ketemu juga kode ini, saya mau buat ini di notepad hehe jadi perlu kode css buka java:D
BalasHapusfinishing akhir nya copy kode kemana yah?maaf masih new bee sy
BalasHapus