Membuat Gambar Membesar Saat Dilewati Mouse

Blog Community
Para blogger pasti akan berusaha bereksperimen dengan halaman blog mereka. Mulai dari memilih template, mengatur tata letak, sampai pada menambahkan widget/gadget. Ada satu lagi yang mungkin biasa dilakukan yaitu mengatur tampilan pada blog. Dalam hal ini seperti mengatur ukuran gambar, warna pada teks atau border begitu pula tebalnya, warna mouseover, dll.

Nah untuk mengatur tampilan tersebut kita akan berurusan dengan yang namanya code CSS (Cascading Style Sheet). CSS adalah sekumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format/tampilan suatu halaman HTML dan merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Wah serius banget penjelasannya...?, Hahahaha...., Oke dibawah ini adalah salah satu contoh code CSS yang berfungsi untuk membuat gambar pada blog menjadi lebih besar ketika mouse melewati gambar tersebut. Ketikkanlah atau copy-pastekan code dibawah ini (tulisan berwarna merah) pada bagian pengaturan CSS pada blog masing-masing (Image 1 bagian Perancang Template Blogger untuk menambahkan code CSS. Bagi yang belum tau cara masuk kesana Klik Disini) :

Image 1: Template Blogger Configuration


.post img, table.tr-caption-container {
border:none;
max-width:560px;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}


Jika sudah selesai menambahkan code CSS diatas, jangan lupa untuk menekan tombol Terapkan Ke Blog dan coba klik Lihat Blog untuk melihat perubahan yang terjadi setelah menambahkan code CSS tersebut.

Setelah halaman blog kita sendiri terloading sempurna maka cobalah arahkan mouse kursor ke gambar yang ada disalah satu artikel kita. Lihat apa yang terjadi...?, ini mungkin konsep yang dipakai pada mesin pencari Google Images. It's sound like cool, right...!?

Image 2: OK Button


Catatan Kaki : Penulis menganjurkan agar code diatas diketik sendiri, jangan hanya sekedar copy-paste saja, tujuannya supaya kita bisa belajar untuk teliti dan cermat dalam mengetikkan salah satu bahasa pemprograman ini. Gimana kita mau pintar coding klo kita malas mengetikkan code-nya....?, Hahahaha peace bro...!

Reference :
haris-widodo.blogspot.com
romanistielf.wordpress.com

3 komentar

Click here for komentar
February 6, 2013 at 12:15 PM ×

Wow, info yang berharga. Dan saya sudah menerapkan dalam blog saya. Trims banyak. Silahkan liat blog saya di http://liveisadventures.blogspot.com/

Reply
avatar
Unknown
admin
February 7, 2013 at 8:54 AM ×

cukup berharga bagi para blogger..., fotograpi Anda juga bagus..., hehe

Reply
avatar
Unknown
admin
March 20, 2015 at 10:08 PM ×

terimakasih gan sangat bermanfaat
jangan lupa kunjungi rieardiansyah33.blogspot.com
di tunggu ya :D

Reply
avatar
Thanks for your comment