14 Tips & Tricks Code Snippet Untuk Desain Blog : Membuat Fungsi Webbloger Lebih Menarik Menggunakan Kode HTML, CSS, JavaScript dan AJAX

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, jika anda menemukan kesulitan dalam memasangnya, anda bisa bertanya kepada saya melalui email di elayne.amelia@gmail.com atau author pemilik kode di situs tersebut.

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


http://komodomedia.com/blog/index.php/2007/01/20/css-star-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/suckerfish-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_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

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

sumber : computerdion