[INFO] 10+ Code Snippet Untuk Desain Web

Kadang ketika anda mengunjungi suatu situs dan menemukan hal menarik
seperti dropdown atau visualisasi yang menarik seperti yang ditampilkan
oleh web 2.0, anda mungkin berpikir pasti yang membuatnya orang yang
belajar dan menghabiskan banyak waktu dari buku desain. Bisa jadi
begitu, tetapi mungkin juga tidak, di internet kita bisa menemukan
banyak yang kita bisa eksplorasi termasuk sumber-sumber menarik yang
menyediakan bagaimana kita mendapatkan desain menarik dengan hanya
memasang kode-kode tersebut dengan mudah.



Kode-kode ini disebut Code Snippet, artinya snippet ini sisipan. Hal
ini berarti kita hanya perlu memasukkan sisipan kode yang tersedia
untuk mendapatkan fitur keren website atau blog yang kita inginkan.



Kode desain web yang berupa tipe-tipe HTML, CSS, Javascript dan AJAX
bisa anda pilih dan sesuaikan dengan yang anda inginkan. Untuk
memudahkan anda menemukan kode-kode tersebut, berikut review tempat
anda menemukan kode-kode tersebut beserta kegunaannya yang pernah saya
coba.



1. Bubble Tool Tips

http://web-graphics.com/mtarchive/001717.php

Bubble Tool Tips ini seperti balon teks yang muncul di komik, tetapi
bisa diterapkan di situs anda untuk link, seperti jika anda ingin untuk
menambahkan keterangan atau memberitahukan alamat link tersebut pada
kata yang anda beri link. Bubble ToolTips ini mudah ditambahkan ke
website baik dengan CSS atau Javascript.



2. Box Over

http://boxover.swazz.org

BoxOver ini menggunakan tipe kode javascript atau HTML untuk menunjukan
tips pada suatu situs. Cara kerja BoxOver ini mirip dengan Bubble
ToolTips tetapi dengan tambahan header text dan body text dan bentuk
kotak seperti tabel mini.



3. Ajax Star Rating Bar

http://www.masugadesign.com/the-lab/...ar-rating-bar/

Jika anda ingin menambahkan rating pada isi situs anda dan ingin agar
pengunjung situs anda dapat memberi rating langsung mendapatkan
hasilnya tanpa harus me-refresh halaman situs, maka kode AJAX dengan
PHP dan mySQL ini bisa diterapkan ke situs anda.



4. CSS Star Rating

http://komodomedia.com/blog/index.ph...-rating-redux/

Jika anda kesulitan menerapkan rating dengan PHP atau mySQL, maka tutorial Code Snippet CSS star rating ini dapat membantu.



5. Ajax Contact Form

http://www.dustindiaz.com/ajax-contact-form/

Untuk memasukkan formulir isian untuk mengontak anda, anda bisa
melakukannya dengan Code Snippet Ajax yang sederhana ini. Kode ini bisa
bekerja meskipun JavaScript tidak diperbolehkan seperti yang terjadi
pada browser internet explorer.



6. WuFoo

http://wufoo.com

wufoo ini menyediakan banyak pilihan dan kemudahan untuk membuat
formulir isian online meskipun anda kurang mengerti dengan masalah kode.



7. CSS Rounder Corner

http://www.spiffycorners.com/

Spiffy Corner ini menyediakan cara sederhana untuk mendapatkan kode CSS
atau HTML yang anda inginkan untuk mengkustomisasi desain situs dengan
menambahkan pojok situs yang melingkar tanpa menggunakan gambar atau
javascript.



8. CSS Speech Bubbles

http://www.willmayo.com/2007/02/10/css-speech-bubbles/

Jika anda sering membaca blog, anda mungkin sering menemukan desain
seperti balon di komik dalam isi blog tersebut. Hal tersebut digunakan
agar pembaca mudah menemukan bagian penting di tulisan tersebut.
Posting di blog ini membahas tentang penggunaan fitur ini untuk
diterapkan dengan mudah.



9. HoverLightBox

http://mondaybynoon.com/2006/03/27/s...hoverlightbox/

Tampilan foto menarik dengan slideshow sudah tidak cukup menarik lagi
karena terlalu banyak memakan waktu me-load dan kurang bersahabat
dengan pengunjung yang ingin berinteraksi dengan foto. Dengan foto
hover atau thumbnail foto yang memperbesar sendiri ketika anda
meletakkan kursor diatasnya, koleksi foto akan lebih menarik jika
ditampilkan.



10.Accessible Navigation Tab Rollover

http://www.simplebits.com/notebook/2...rollovers.html

Tulisan ini menjelaskan secara mendetail dan mudah tentang bagaimana
membuat baris navigasi yang bisa terakses di berbagai browser termasuk
browser handphone dan PDA yang sederhana.



11. Docking Boxes

http://www.brothercake.com/site/resources/scripts/dbx/

Docking boxes atau Dbx ini adalah tipe kode untuk menambahkan
fungsionalitas daftar drag n drop, snap to grid, show/hide content
dalam berbagai element. Tipe-tipe ini sangat bermanfaat jika anda ingin
membuat website anda terlihat ringkas dan tidak terlalu membingungkan
pengunjung.



12. Sidenotes

http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php

Menambahkan sidenote atau tulisan samping yang attractive melalui
campuran Javascript dan CSS dapat dilakukan dengan mudah jika anda
ingin memberikan keterangan tambahan pada suatu tulisan yang menarik.



13. CSS Tab Designer

http://www.highdots.com/css-tab-designer/

Jika anda ingin menggunakan atau membuat sendiri navifation tab menarik
dengan mudah, maka situs ini dapat membantu anda untuk mendesain daftar
dan tab visual tanpa pengetahuan programming web.



14. Web Standards Checklist

http://www.maxdesign.com.au/presentation/checklist.htm