Membuat Gambar Membesar Saat Dilewati Mouse ~ Computer Idiot

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

About Admin

Dengan segala macam kekurangan yang admin miliki tidak mengurungkan niat yang tulus untuk terus beraktitifitas menyingsingkan lengan baju mengisi hari-hari dalam kehidupan dunia fana yang berkesudahan. Bertopang dagu adalah hal yang sia-sia untuk dikerjakan oleh seorang manusia yang sempurna dimata Tuhan.