10 Code Snippet Untuk Desain Web

10 Code Snippet Untuk Desain Web: Menambahkan Fungsi Website Menarik

Dengan Kode HTML, CSS, JavaScript dan AJAX Siap Pakai

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:

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/scripts/unobtrusive-ajax-star-

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

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

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/2003/09/30/accessible_imagetab_rollo

vers.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

Jika anda menginginkan situs anda mudah terakses oleh berbagai jenis

browser dan juga search engine crawler untuk menemukan isi situs anda

dengan mudah dan terdaftar dengan benar di search engine, maka anda

perlu menggunakan web standard. Web standar ini diperlukan ketika anda

banyak menginstal dan memodifikasi kode di situs anda. Daftar di blog

ini menunjukkan apa saja yang perlu dilakukan.