Cara Buat Efek Gambar Membesar Saat Diarahkan Kursor Mouse

Tutorial blog pada postingan kali ini akan membahas mengenai bagaimana Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse. Untuk membuat atau memberi efek gambar membesar atau zoom pada gambar dipostingan blog saat gambar diarahkan atau disorot kursor mouse, kita hanya perlu memberikan sedikit sentuhan pada bagian CSS template blog kita. Bagi Anda yang sama sekali belum mengetahui bagaimana Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse, silahkan Anda duduk manis di depan Komputer atau Laptop Anda dan Teruskan membaca.

Sebagai seorang blogger yang selalu membuat tutorial blog, seringkali kita harus memasukkan gambar atau screenshoot agar tutorial yang kita buat bisa lebih mudah untuk dipahami, betul ? Contohnya saat saya membuat tutorial blog mengenai cara membuat blog gratis di blogger blogspot dan cara membuat posting di blog, maka untuk melengkapi tutorial blog tersebut maka gambar atau screenshoot harus saya masukkan dalam postingan tersebut.

Jika Anda sudah lama menyelami dunia blogging, maka Anda pasti sudah tahu kan bahwa gambar dengan ukuran yang besar bisa mempengaruhi SEO On page blog yang membuat loading page jadi lambat, betul ? Nah dengan adanya kode CSS ini maka jika sebelumnya ukuran gambar yang harus dimasukkan dalam postingan blog sekitar 400x400 px agar gambar itu jelas, maka dengan adanya kode CSS ini maka kita mungkin hanya menggunakan ukuran gambar 200x200 px gambar itu sudah akan jelas karena adanya efek zoom atau membesar

Bagaimana ? Anda penasaran untuk mengetahui bagaimana Cara membuat atau memberi efek gambar membesar atau zoom pada gambar dipostingan blog saat gambar diarahkan atau disorot kursor mouse ? Jika iya, mari kita sama sama ke TKP

Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse

1. Seperti biasanya Anda harus login ke blogger.com agar bisa mengakses akun blogger kesayangan Anda
2. Setelah berjasil login, silahkan Anda memilih template seperti screenshoot di bawah ini
3. Setelah memilih template, Pilih edit HTML>>Klik Lanjutkan>>kemudian berikan Centang atau Ceklist Expand template blog. Tanda centang ini berfungsi untuk memunculkan kode kode dalam template blog yang tersembunyi sehingga dengan memberikan tanda ceklist maka semua kode kode yang tersembunyi nantinya akan muncul saat kita melakukan pencarian kode dalam template.
4. Bagaimana, Sudah ? Jika sudah silahkan Anda mencari kode ]]></b:skin>
5. Untuk memudahkan pencarian, tekan CTR+ F atau baca Cara Tercepat dan Mudah Mencari Kode HTML Pada Template Blog
6. Jika Anda sudah menemukan kodenya silahkan Anda copy Kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>
7. .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); }
8. Selanjutnya silahkan Anda save template blog Anda dan lihat hasilnya
9. Terakhir, minum kopi dulu yaa bang supaya tidak mengantuk...ahaa mantap nich kopinya, MAU ?

Untuk melihat demonya, silahkan Anda sorot atau dekatkan Kursor Mouse Anda pada Foto Keren saya di bawah ini,,,numpang Narsis dikit dulu yaa...

Bagaimana ? Apa setelah mengikuti tutorial blog di atas Anda sudah mendapat sedikit gambaran mengenai bagaimana Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse ? Jika iyaa, Alhamdulillah, kini saatnya saya untuk pamit Undur diri, mau siap siap berangkat kesekolah untuk mengajar.

Terus ciptakan karya terindah lewat jemari Anda melalui postingan demi postingan yang berkualitas untuk memajukan dunia blogging di Indonesia. Saya tunggu karya terindah Anda !

Happy Blogging dan Salam SUKSES !

Dengan memasukan alamat email Anda dibawah ini, berarti Anda akan dapat kiriman artikel terbaru dari www.hayardin.com di inbox E-mail anda

Enter your email address:


Delivered by FeedBurner

Lokasi:

Berbagi :