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 Membuat Tag Cloud CSS3 dengan Efek pada Background & Color Link

Sebelum melangkah lebih jauh untuk membuat tag cloud CSS3 dengan background effect ini, terlebih dahulu kita akan mencoba memahami apa yang dimaksud tagcloud beserta fungsinya seta beberapa jenis tagcloud yang ada.

Tagcloud merupakan sebuah box yang berfungsi sebagai wadah bagi sekelompok link dalam sebuah web. Pada umumnya difungsikan sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. Variable HTML pembentuk tagcloud dapat menggunakan kode css dan xhtml saja, atau bisa terjadi juga memanfaatkan javascript untuk memperoleh efek-efek yang tidak memungkinkan bila hanya menggunakan kode css. Penggunaan kode yang berbeda ini tentunya juga mempunyai nilai plus dan minus karena disamping efek yang ditimbulkan berbeda, beban yang termuat dalam desain templatepun akan berbeda pula.

Penggunaan kode css (murni) sebagai pembentuk tagcloud mempunyai nilai lebih pada sisi ringannya beban muatan kode html yang ditanggung sebuah blog. Di luar itu dengan hadirnya CSS3, kini banyak efek indah bisa dibuat tanpa bantuan javascript. Jika kita membandingkan dengan tag cloud yang dibuat menggunakan javascrip, tagcloud CSS ini tak akan menjadi terlihat mengecewakan karena background efect dibuat dengan memanfaatkan CSS3 transition hingga ada semacam animasi/fade efect yang muncul saat tersentuh cursor. Untuk menjadi perhatian pula bahwa sekalipun javascript mampu menciptakan berbagai efek yang sangat indah, namun penggunaan script yang berlebihan akan sangat mempengaruhi beban dan loading. Bagi mereka yang mempunyai akses internet dengan kecepatan super, masalah loading tidaklah menjadi problem, tetapi karena akses terhadap sebuah blog bersifat umum (semua orang akan mengakses) dan banyak di antaranya yang loadingnya lambat, maka apabila sebuah blog terlalu berat maka sebagian dari mereka yang menggunakan modem dengan kecepatan lambat akan (malas membuka karena loading yang lama).

Dengan berbagai konskwensi seperti tersebut di atas, sekarang tinggal bergantung kepada pemilik blog. Tagcloud seperti apakah yang akan dimanfaatkan untuk melengkapi penampilan blognya?