Cara Membuat Floating Image Link dengan kode CSS dan CSS3

Jika anda sering menjelajah blog, pasti pernah menjumpai gambar/image yang terpasang di pojok kanan-bawah atau kiri bawah halaman. Gambar-gambar tersebut bisa berupa gambar berekstensi .gif, .jpg atau .png. Beberapa yang lain juga memanfaatkan gambar animasi gif dan flash. Selain berfungsi menambah keindahan, pada gambar bisa ditambahkan sebuah link hingga ketika pengunjung meng-klik gambar tersebut maka dia akan dibawa ke halaman yang baru dari blog tersebut atau ke blog/web dengan alamat berbeda. Floating image yang di dalamnya berisikan link akan memberi manfaat lebih karena sebuah link penting bisa selalu "nongkrong" tepat di sebuah gambar yang terpajang di satu bagian blog yang mudah dan selalu terlihat oleh setiap pengunjung.

Penempatan di pojok kanan-bawah atau di kiri-bawah bertujuan supaya gambar gampang terlihat tidak terlalu mengganggu bagian blog yang lain. Anda bisa menggunakan gambar dengan ukuran "sesuka hati" sepanjang blog tetap nyaman untuk dinikmati pengunjung. Karena di dalamnya sudah diselipkan sebuah link, maka selanjutnya gambar ini kita sebut sebagai floating image link yang akan selalu terlihat sekalipun halaman digulung hingga ujung terbawah.

Kita bisa membuat floating image link dengan 3 macam cara:

• Hanya menggunakan xHTML.
• Menggunakan kode CSS dan xHTML.
• Memadukan kode3 CSS dan CSS3 serta xHTML.

Contoh Floating Image Link yang dibuat hanya menggunakan xHTML dapat anda lihat di halaman ini pada ujung/pojok kanan-bawah.

Jika anda ingin melihat bagaimana sebuah Floating Image Link yang dibangun dengan menggunakan kode CSS, CSS3 transformation dan CSS3 transition serta xHTMl, silahkan klik link DEMO di bawah ini. CSS3 transition dan transformation akan membuat efek yang memperindah tampilan Floating Image Link. Perlu menjadi catatan bahwa karena menggunakan kode CSS3, maka apabila anda ingin melihat bentuk efek dan tampilannya secara sempurna, anda harus menggunakan browser yang sudah mendukung CSS3 seperti Opera 1041 hingga Opera 1063, Google Chrome, Safari dan Mozilla Firefox 4.0 beta 1 hingga beta 6.

D E M O

Cara Menggunakan Onmouseover dan Onmouseout untuk Menciptakan Hover pada Image/gambar

Hal-hal yang teramat sederhana seringkali dibutuhkan pada saat-saat tertentu. Contohnya adalah membuat atau memunculkan hover sebuah gambar. Jika pada umumnya gambar yang berbeda harus dihasilkan melalui hover dengan menggunakan kode CSS yang disimpan di halaman edit HTML atau widget, dengan memanfaatkan onmouseover dan onmouseout, maka kode CSS tak diperlukan lagi. Cara seperti ini cukup praktis untuk digunakan di halaman posting atau di bagian yang lain seperti halnya di sidebar blog.

Dua buah gambar berbeda, melalui onmouseover dan onmouseout dapat dimunculkan pada satu tempat/ruang yang sama (seperti hover image). Ketika cursor disentuhkan pada gambar maka fungsi onmouseover bekerja sehingga gambar ke-2 terlihat. Saat cursor dijauhkan dari gambar (onmouseout), maka kembali gambar pertama terlihat. Dengan menggerakkan cursor di atas gambar di bawah ini, kemudian melepaskan/menjauhkan kembali cursor dari gambar, maka anda akan melihat bagaimana onmouseover dan onmouseout bekerja.



Fungsi seperti di samping biasanya bekerja dengan cara memanfaatkan hover yang dibangun dalam bentuk kode CSS dimana syntax-nya seperti contoh berikut:

Cara Membuat Menampilkan Widget Label/Categories

Memahami desain blog hingga penggunaan kode html desain blog merupakan sebuah kewajiban yang harus dilakukan blogger. Pada perkembangan selanjutnya sebuah blog akan cukup banyak memerlukan penambahan widget baru, kode html yang berupa xHTML, kode CSS dan javascript serta CSS3 guna peningkatan performa blog. Terlebih pada saat ini, setiap blogger dituntut untuk mampu mengembangkan diri membangun atau memodifikasi blog hingga halaman blog terlihat rapi dan cantik dengan harapan semakin membuat pengunjung betah berlama-lama membuka halaman demi halaman dan mengikuti setiap posting yang tersaji. Anda harus yakin bahwa penampilan yang lebih menarik dapat segera diciptakan dengan catatan bahwa anda bersungguh-sungguh dan telaten untuk mencoba mempelajari titik demi titik di mana sebuah blog terbangun.

Widget adalah satu dari sekian banyak bagian penyusun dan "kosmetik" bagi blog. Beberapa widget telah disediakan oleh blogger dan anda tinggal menampilkannya di halaman blog. Beberapa widget yang lain disediakan secara gratis ataupun berbayar oleh banyak situs yang tersebar memenuhi jagad maya. Salah satu widget yang telah disediakan blogger adalah widget Label atau Categories. Widget ini berfungsi untuk