Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Memberikan Efek Zoom Pada Seluruh Gambar Dalam Posting Blog

Menyertakan sebuah gambar dalam postingan Blog memang sangat bermanfaat untuk memperjelas sebuah pembahasan yang kita buat. Misalnya kita sedang membuat posting tentang Tutorial Blogging, kita menjelaskan bagaimana cara membuat sebuah widget. Di sana kita menjelaskan bahwa untuk membuat sebuah widget maka harus memilih Tools Tata Letak. Lalu kita berikan screenshot yang menunjukan di mana Tools Tata Letak itu berada.

Efek Zoom Pada Gambar

Namun mungkin saja sobat Blogger lain kadang-kadang mendapat kendala dari gambar yang disertakan dalam posting Blog ini. Seperti gambar dalam posting terlihat kurang jelas karena disebabkan oleh berbagai hal. Sebenarnya kendala ini tidak terlalu serius karena jika kita memberikan link pada gambar yang mengarah pada URL gambar itu sendiri, maka pengunjung dapat melakukan klik pada gambar dan melihat gambar tersebut dalam ukuran original yang tentunya akan terlihat jelas.

Tapi ada cara lain yang akan saya bagikan yang mungkin saja sobat akan menyukainya. Kita bisa Memberikan Efek Zoom Pada Seluruh Gambar Dalam Posting Blog. Selain dapat mempercantik tampilan Blog, pengunjung juga tidak perlu melakukan klik pada gambar jika ingin melihat gambar dengan jelas karena gambar akan membesar ketika disentuh kursor. Berikut contohnya, silakan sentuhkan kursor pada gambar di bawah ini.


Efek Zoom Pada Gambar
DEMO | SENTUHKAN KURSOR PADA GAMBAR DI ATAS

Untuk Memberikan Efek Zoom Pada Seluruh Gambar Dalam Posting Blog seperti itu sendiri caranya sangat mudah sekali. Lakukanlah langkah-langkah berikut.

Memberikan Efek Zoom Pada Seluruh Gambar Dalam Posting Blog

  • Login ke akun Blogger sobat.
  • Masuk ke bagian Template >> Edit HTML.
  • Carilah kode ]]></b:skin> dengan menggunakan tombol ctrl+F ,dan letakan kode berikut di atas kode ]]></b:skin>

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; 
-webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: 
scale(1.3); -webkit-transform: scale(1.3); }

  • Kode di atas bisa sobat ubah-ubah lagi untuk memberikan efek Zoom yang berbeda dari contoh yang terdapat di atas. Silakan berkreasi sendiri.
  • Jika sudah, klik Simpan Template.
Maka semua gambar yang terdapat dalam posting Blog telah memiliki efek Zoom.
Selesai lah pembahasan kali ini. Semoga posting singkat ini dapat bermanfaat banyak bagi sobat Blogger lainya.

Artikel terkait : Memberikan Efek Zoom Pada Seluruh Gambar Dalam Posting Blog

Artikel Blog Regi Brader Lainnya :

7 komentar:

  1. wah scriptnya gapake panjang ya taoi bermanfaat banget :D

    ReplyDelete
  2. Nice Info Mas^^
    Salam Kenal > serba-inform.blogspot.com

    ReplyDelete
  3. Pertamax mas
    ternyata pake pas event hover ya mas.

    ReplyDelete
  4. emang agan ,master post g pernah meleset pasti work tq

    ReplyDelete
  5. Bismillah.
    maaf. kalau cara untuk lihat artikel dengan mengklik gambar postingan bagaimana..

    ReplyDelete
  6. masukan link portingan yang agan mau, pada gambar tersebut

    ReplyDelete
  7. terima kasih artikelnya gan.. lengkap dengan contoh.. menandakan keberhasilan artikel waktu dicoba..
    sukses selalu..
    ditunggu kunjungan baliknya...

    http://miniblogger28.blogspot.com

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved