Menarik bukan jika ada sebuah gambar pemandangan tiba-tiba berubah wujud menjadi gambar anda atau gambar yang lain, nah,..inilah yang saya sebut dengan Modifikasi Gambar Kamuflase di Blog Saat Tersentuh Kursor. Tidak sulit juga tidak mudah melakukan desain ini, semua tergantung pada pemahaman dan kreatifitas bagi anda yang melakukannya.
Cara Modifikasi Gambar Kamuflase di Blog ini dapat anda lakukan secara manual di setiap postingan artikel blog sesuai keinginan anda. Sebelumnya saya juga telah menjelaskan tentang Cara Membuat Slide Panel Cantik dan Menarik serta Cara Membuat Kotak Profil Author dan Permalink Menarik, anda dapat membacanya dan memberi saran jika ada penjelasan yang salah.
Untuk melakukan Modifikasi Gambar Kamuflase di Blog ada beberapa kode yang harus kita pasang, jika anda ingin memasangnya secara otomatis, maka pada kode CSS harus di letakkan di halaman dashboard template, namun jika hanya menempatkannya pada postingan artikel, cukup dengan mengikuti cara yang akan saya paparkan. Berikut Penjelasan:


Modifikasi Gambar Kamuflase di Blog saat tersentuh Kursor
1. Masuk ke www.blogger.com2. Buat atau Edit Postingan Artikel anda
3. Pilih menu HTML bukan compose
4. Copy dan Paste kode di bawah ini
<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>
<center>
<a class="pic" href="http://www.terwujud.com/2014/02/cara-membuat-gambar-menjadi-besar-tanpa.html" target="_blank"> <img class="image1" src="http://1.bp.blogspot.com/-Gfi1_ZFGtpA/UwriWQoKoaI/AAAAAAAAAc4/K2Yqe40s4WI/s1600/kamuflase-terwujud.jpg"/> <img alt="Ibrahim Lubis" class="image2" src="http://4.bp.blogspot.com/-kXRpZabowyU/Uwru44zR4wI/AAAAAAAAAdI/2_q4WZh7Rh8/s1600/kamuflase-Terwujud-com.jpg" title="Ibrahim Lubis Sudah Berubah,..heeehee!!" /></a>
</center>
5. Publish atau Perbaharui
6. Lihat hasilnya
Keterangan:
- Image 1 adalah gambar pertama yang terlihat
- Image 2 adalah gambar kamuflase/perubahannya
- Warna Merah merupakan URL Link Artikel, silahkan dirubah
- Warna Biru merupakan URL Image 1
- Warna Hijau merupakan URL Image 2
- Kode <style type="text/css"> bisa diganti <style> jika kode pertama tidak bekerja
- Usahakan kedua gambar ukuran lebar dan tingginya sama
Demikian artikel Modifikasi Gambar Kamuflase di Blog Saat Tersentuh Kursor, semoga bermanfaat. Jika ada yang belum jelas, anda dapat memberi saran atau pertanyaan melalui form komentar. Terima Kasih!!.
6 komentar
siip dapet pertamax... hhe maksih buat sharenya ya pak..
BalasOke mas, silahkan dicoba langsung ya, akan saya lihat segera mungkin
Balaswah jadi keren nih, menyimak dulu pak
BalasKeren mas, barangkali kalau pengin menampilkan dua gambar pada satu artikel, bisa dilakukan ...
BalasBetul sekali mas, tapi ni ada rencana gimana membuat gambar mengikuti gerak kursor, doakan ya mas semoga desainnya berhasil :D
Balasoke lanjutkan mas beranda
BalasSaya akan sangat senang jika ada komentar yang membangun, tetapi:
*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan
Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.
Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)
By: Terwujud.com
Terima Kasih!!