Namun begitu sebelum kita meneruskan tutorial ini, lebih baik anda persiapkan diri dengan memahirkan diri dalam CSS dan HTML kerana dua aturcara ini sangat-sangat dituntut bagi melancarkan proses membuat "taskbar" ini.

Dan dalam tutorial ini saya menjangkakan yang anda sudah mempunyai laman web sendiri.

Tutorial ini adalah berdasarkan kepada laman web persendirian atau "standalone". Jika anda menggunakan CMS seperti Drupal, phpBB, Joomla atau Wordpress, ianya juga boleh diimplementasikan tetapi anda perlu mahir untuk mengubah templat yang digunakan.

Jika ini berlaku, persiapkan diri dengan asas PHP supaya anda tidak mengubah aturcara yang boleh menyebabkan templat tersebut rosak.

Idea kasar

  • Untuk membuat "Taskbar" ini hanya melibatkan penggunaan CSS dan HTML sahaja. Langsung tidak menyentuh penggunaan PHP.
  • Taskbar tersebut perlu sentiasa berada pada satu lokasi atau "fixed location"
  • Anda sudah mempunyai rekaan taskbar terlebih dahulu.

Rekaan taskbar

Dalam menghasilkan rekaan awal untuk taskbar, anda boleh gunakan 2 cara iaitu:

#1 Table (jadual)

Untuk penggunaan "table", aturcara yang boleh dilakukan adalah seperti ini:

<table cellpadding="0" cellspacing="0" border="1" width="100%">
  <tr>
    <td>... elemen yang hendak dimasukkan ...</td>
  </tr>
</table>

Dalam contoh di atas, kita akan hasikan satu sel jadual yang merangkumi elemen yang hendak dimasukkan. Sekiranya anda hendak melakukan beberapa sel pembahagian, maka anda perlu menetapkan saiz untuk setiap sel bagi menghasilkan keadaan yang lebih seragam. Contoh:

<table cellpadding="0" cellspacing="0" border="1" width="100%">
  <tr>
    <td width="50%">... elemen pada sel pertama ...</td>
    <td width="50%">... elemen pada sel kedua ...</td>
  </tr>
</table>

Ini akan menghasilkan satu jadual dengan dua sel yang mempunyai saiz yang seragam. Perhatikan dalam kedua-dua contoh ini saya menggunakan saiz dalam bentuk peratusan (%). Kerana saya mahu taskbar kita nanti akan mengikut saiz resolusi skrin pengguna. Sekiranya anda mahu menggunakan saiz tetap seperti 1024 piksel, boleh tukarkan setiap nilai peratusan yang saya tunjukkan kepada nilai yang dimahukan. Contoh: width="1024" (tanpa px).

#2 Division layer (lapisan div)

Untuk hal ini, ianya agak tinggi bagi pengguna yang baru. Namun jika anda ingin lebih tahu, boleh rujuk ke tutorial CSS yang disediakan. Penggunaan tag <div> memendekkan kod aturcara dan membolehkan stail dilakukan dengan lebih mudah.

Merujuk kepada contoh pertama, untuk melakukan perkara yang sama dengan penggunaan tag <div>, kod aturcaranya adalah seperti berikut:

<div>.. elemen yang hendak dimasukkan ..</div>

Oleh kerana tag <div> mempunyai nilai asal (default value) yang merangkum elemen tersebut, maka hasil yang kelihatan adalah tidak begitu menarik. Oleh itu kita perlu memasukkan elemen CSS atau "style". Jadi aturcara yang perlu ditambah pada tag <div> adalah seperti berikut:

<div style="width: 100%; border: 1px solid #ededed">.. elemen yang hendak dimasukkan ..</div>

Aturcara di atas akan menghasilkan kesan yang sama seperti <table> dengan garisan berwarna kelabu dan saiz yang memenuhi ruang skrin. Sekiranya ingin menghasilkan keadaan dua sel seperti contoh tag <table> kedua di atas:

<div style="width: 100%; border: 1px solid #ededed; height: 15px">
<div style="width: 50%; float: left">.. elemen pertama ..</div>
<div style="width: 50%; float: left">.. elemen kedua ..</div>
</div>

Perhatikan bahawa untuk menghasilkan dua sel yang seragam, kita perlu memasukkan dua tag <div> di dalam satu tag <div> utama. Dan penggunaan CSS "float" adalah bagi membolehkan elemen disusun secara mendatar dan bukan tegak. Juga perlu ditetapkan ketinggian (height: 15px) kerana apabila kita mengguna atribut "float" secara sendirinya elemen tersebut seolah-olah terapung.

Perhatikan juga perbezaannya di mana untuk <div> tidak terdapat garisan pemisah antara dua input. Oleh itu anda perlu menetapkan sendiri garisan penggir untuk menjadikan seperti dalam contoh <table>.

Kelebihan & kekurangan

Dua contoh rekaan taskbar di atas mempunyai kelebihan dan kekurangan tersendiri. Dalam penggunaan <table>, agak sukar untuk melakukan modifikasi dan stail kerana

  1. <table> mempunyai banyak elemen seperti <thead>, <tr> dan <td>
  2. setiap elemen tidak mempengaruhi keseluruhan jadual
  3. Tetapi ianya lebih mudah untuk diuruskan, ditentukan saiz dan juga disokong oleh semua versi dan jenis pelayar (browser).

Manakala <div> pula

  1. lebih senang untuk distailkan hanya dengan menentukan nama untuk setiap elemen
  2. tetapi sukar untuk menguruskan kedudukan, saiz dan kedudukan serta tag CSS kebanyakkannya tidak disokong oleh versi pelayar yang terdahulu.

Namun dalam tutorial kali ini, saya lebih menekankan dan fokus kepada penggunaan <table> kerana ianya lebih mudah dan senang serta lebih jelas kedudukan setiap elemen dalam taskbar.

Reka bentuk akhir taskbar

Taskbar boleh dilakukan seringkas mungkin hanya melibatkan penggunaan garisan pinggir (border) dan warna latar belakang. Antara contoh yang boleh dilakukan adalah seperti ini:

<table cellpadding="4" cellspacing="0" border="1" width="100%">
  <tr>
    <td width="50%" bgcolor="#ededed">.. elemen pertama di sini ..</td>
    <td width="50%" bgcolor="#ededed">.. elemen kedua di sini ..</td>
  </tr>
</table>

ATAU kita akan masukkan elemen CSS dalam jadual bagi menaikkan lagi keceriaan taskbar tersebut:

<table cellpadding="4" cellspacing="1" border="0" width="100%" style="background: #787878">
  <tr>
    <td width="50%" style="background: #d6ebff">.. elemen pertama di sini ..</td>
    <td width="50%" style="background: #ffd6d6">.. elemen kedua di sini ..</td>
  </tr>
</table>

Elemen gambar penceria

Contoh di atas saya tunjukkan dengan menghasilkan taskbar yang seringkas mungkin. Tetapi bagi saya adalah lebih baik sekiranya kita menceriakan taskbar tersebut dengan penggunaan gambar (image). Contoh yang anda dapat lihat adalah di laman ini, perhatikan pada bahagian bawah ini terdapat taskbar yang telah saya hasilkan.

Untuk membuat taskbar kelihatan lebih ceria, kita perlu gunakan sedikit kekreatifan dan memanipulasikan sedikit aturcara CSS dan HTML. Idea kasarnya adalah kita perlu membuat 3 sel pada <table> yang mewakili ruangan masing-masing iaitu kiri, tengah dan kanan.

Dalam contoh Taskbar KS ini, saya telah membahagikan kepada 3 bahagian dan setiap bahagian mempunyai gambar (image) yang berlainan. Sekiranya diasingkan setiap gambar ini maka ianya akan diwakili seperti ini:

  •  (taskbar-kiri.png)
  •  (taskbar-tengah.png)
  •  (taskbar-kanan.png)

Oleh kerana gambar yang saya hasilkan ini ingin dimasukkan kesan bayang (shadow) maka saya telah memilih format PNG yang menyokong lutcahaya agar kesan bayang tersebut akan menonjol dan boleh memasuki dengan apa jua jenis latar belakang. Seterusnya kita hanya perlu masukkan elemen gambar tersebut ke dalam sel masing-masing.

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding: 0px">
  <tr>
    <td style="width: 40px"><img src="https://www.drupalnote.my/taskbar-kiri.png" alt="Taskbar kiri" /></td>
    <td width="" style="background: url(taskbar-tengah.png) repeat-x">
      .. elemen taskbar dimasukkan di sini ..
    </td>
    <td style="width: 40px"><img src="https://www.drupalnote.my/taskbar-kanan.png" alt="Taskbar kanan" /></td>
  </tr>
</table>

Untuk sel (1) dan (3), kita hanya perlu masukkan tag <img> sahaja. Manakala untuk bahagian (2), apa yang perlu dilakukan adalah menetapkan latar belakang menggunakan gambar secara berulang-ulang tetapi pengulangan hanya melibatkan garisan mendatar sahaja.

Penetapan taskbar pada posisi tetap

Tutorial di atas telah berjaya untuk kita hasilkan taskbar seperti yang diingini. Selebihnya bergantung kepada anda untuk memuatkan elemen sendiri yang perlu diisi untuk melengkapkan taskbar tersebut.

Seterusnya kita akan menetapkan taskbar ini pada posisi tetap, yang mana sekiranya pengguna meluncur laman yang panjang ke bawah, kedudukannya sentiasa tetap pada kedudukan asal. Bagi merealisasikan tujuan tersebut kita perlu menggunakan elemen <div> digabungkan dengan tag <table>.

Secara ideanya, kita akan memasukkan keseluruhan jadual tersebut ke dalam elemen <div> yang mana <div> yang memainkan peranan berada pada posisi tetap. Oleh itu aturcaranya adalah seperti berikut:

<div style="position: fixed; bottom: 0px; z-index: 1000"> elemen jadual di sini </div>
  • Atribut "position" ditetapkan nilai "fixed" bagi membolehkan elemen kekal pada satu kedudukan sahaja.
  • Atribut "bottom" ditetapkan nilai "0px" supaya dia berada dibahagian bawah. Sekiranya anda mahu ianya berada dia atas, tukarkan atribut ini kepada "top: 0px". Sekiranya anda mahu ganjakkan pada 10 piksel, jadikannya seperti ini: "bottom: 10px" yang mana ianya akan berganjak 10px ke atas.
  • Atribut "z-index" memainkan peranan untuk menjadikan taskbar kita sentiasa berada paling teratas daripada elemen-elemen lain. Kerana kadang kala terdapat menu yang akan menindih dan menutup taskbar ini. Saya tetapkan pada nilai "1000" agar tiada elemen lain yang boleh mengatasi nilainya. Pastikan yang nilai "z-index" ini tidak mempunyai apa-apa unit terutama sekali "px".

Menjadikan taskbar sentiasa berada di tengah

Sekarang kita akan jadikan taskbar ini berada di tengah-tengah laman walaupun berlaku perubahan resolusi skrin. Contoh yang anda dapat lihat adalah di KS ini. Terdapat ruang di antara taskbar dan juga tetingkap. Jika anda lihat contoh yang anda buat di atas, taskbar tersebut memenuhi ke seluruhan skrin tetingkap pelayar.

Oleh itu, kita perlu menetapkan saiz lebar kepada kurang dari "100%". Jadi aturcaranya akan jadi seperti ini:

<div style="position: fixed; bottom: 0px; z-index: 1000; width: 90%"> elemen jadual di sini </div>

Apa yang terjadi sekarang adalah saiz jadual menjadi kurang dan terdapat ruang disebelah kanan sahaja. Oleh itu kita perlu memasukkan dua lagi atribut tambahan bagi menjadikan ianya berada di tengah walaupun pada resolusi yang berbeza.

<div style="position: fixed; bottom: 0px; z-index: 1000; width: 90%; margin-left: 5%; margin-right: 5%">
  elemen jadual di sini
</div>

Selepas kita menetapkan saiz maksimum untuk jadual melebar dari "100%" kepada "90%", terdapat lebihan sebanyak 10%. Jadi kita bahagikan sama rata kepada dua atribut tersebut. Sekarang anda lihat hasilnya adalah seperti ini:

dan aturcara yang lengkap adalah seperti berikut:

<div style="position: fixed; bottom: 0px; z-index: 1000; width: 90%; margin-left: 5%; margin-right: 5%">

  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding: 0px">
    <tr>
      <td style="width: 40px"><img src="https://www.drupalnote.my/taskbar-kiri.png" alt="Taskbar kiri" /></td>
      <td width="" style="background: url(taskbar-tengah.png) repeat-x">
         .. elemen taskbar dimasukkan di sini ..       </td>
      <td style="width: 40px"><img src="https://www.drupalnote.my/taskbar-kanan.png" alt="Taskbar kanan" /></td>
    </tr>
  </table>

</div>

Selamat mencuba. Sila tinggalkan komen dan juga penilaian kepada tutorial ini.

Artikel: 
Penilaian: 
Your rating: None Average: 5 (2 votes)

Komen

faiz's picture

salam'alaik... bagaimana dgn icon atau gambar spt Hubungi Kami Di Sini, Memohon Tutorial, etc...?

klau dlm tutorial, guna teks...

parasolx's picture
Admin

icon tuh saya gunakan image sahaja. juga menggunakan PNG. seolah-olah kita create image button sahaja. masukkan link dia akan jadi seperti KS ini.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

faez's picture

wahhh ini yg ku nntikan..thanks para..ak try dulu...well done...

SoLarIZe's picture

yea... akhirnya dapat gak ak script nak wat taskbar mcm KS nie...
thanks para...

angker2008's picture

Salam. Nak tanya. Klo buat ayat dia bergerak leh x? Macam dalam berita kat tv.

parasolx's picture
Admin

bleh sahaja.. just masukkan script untuk teks bergerak ke dalam jadual.. itu sahaja..
untuk yang paling mudah, gunakan marquee.. ini code dia:

tulis teks kt sini

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

blogger_boy's picture

bukan ker wordpress ade plugins dier..
hum..mcm jomphp.com tuh..
dier guna plugins kan?
ape name dier yek?
sape tahu?

------

[center]Bersekutu diantara sesama itu akan saling menguatkan. Jika kita melihat ada geng kita lemah, kita akan bantu untuk menguatkan mereka. Dan tatkala kita lemah, mungkin mereka juga akan menolong kita. Marilah kita membentuk satu kumpulan yang saling bantu-membantu dan menguatkan.[/center]

blogger_boy's picture

orait aku dah jumpa..
http://wibiya.com

------

[center]Bersekutu diantara sesama itu akan saling menguatkan. Jika kita melihat ada geng kita lemah, kita akan bantu untuk menguatkan mereka. Dan tatkala kita lemah, mungkin mereka juga akan menolong kita. Marilah kita membentuk satu kumpulan yang saling bantu-membantu dan menguatkan.[/center]

mohd khairul abdullah's picture

thanks para...dapat cari ilmu sini..(off topik) http://skkasagaanpitas.com/khairul/ ..bagaimana nak hilangkan khairul pada url tu..(pasti ada yg senyum ni..hahah)

johnburn's picture

pindah semua file joomla tu ke root directory
kl skang public_html/khairul/file-file joomla
pndah jd public_html/file-file joomla

mohd khairul abdullah's picture

terima kasih johnburn..ia banyak membantu..

johnburn's picture

sebarang permasalahan bleh tnya kat bhgian forum