Thursday, June 18, 2009

Kotak Tabber

Belajar bagaimana membuat dan meletakkan Kotak Tabber (fully widgetized tabbed content box) dalam template blogger (minima) dengan menggunakan JavaScript, CSS dan XHTML dengan mudah menggunakan 4 cara mudah dalam tutorial ini.

Jika anda telah mengikuti tutorial kotak tabber ini dan membinanya dalam blog contoh anda, sila klik Layout untuk melihat kedudukannya. Anda akan dapati tabber ini terletak di bahagian atas sidebar.

Lihat screenshot ini.



Terdapat nombor 1, 2, dan 3 dan di bawahnya kotak Add a Gadget. Nombor-nombor ini mewakili 3 tab yang telah dibina. Sekarang bagaimana hendak menggunakannya?

Pertama, klik nombor 1 dan klik Add a Gadget. Anda akan dibawa ke bahagian menu. Klik HTML/JavaScript. Di bahagian "Title" anda taip atau anda beri nama/tajuk untuk tab 1 ini. Dalam contoh blog ini, saya tuliskan sebagai "About Me" dan klik save. Buat perkara yang sama untuk tab 2 dan tab 3 dengan memberi tajuk yang sesuai untuk anda.

Apabila semuanya telah diberi tajuk anda perlu meletakkan pula sub-tajuk atau apa-apa yang sesuai untuk anda seperti link tajuk lain-lain blog anda atau link kepada rencana blog yang anda ada. Anda juga boleh meletakkan image di dalamnya. Jika anda hendak meletakkan profile anda dalam tab 1 iaitu "About Me", klik pada nombor 1 itu dan kemudian klik Edit. Upload image anda jika ada dan taipkan profile anda. Dalam contoh yang saya buat, saya telah menggunakan kod-kod "table" dan "nested" atau masukkan kod image di dalamnya. Gunakan kreativiti anda.

Baca rencana di sini untuk belajar bagaimana membina "tabber"



No comments:

Post a Comment