Header - satu ruang yang paling atas sekali dalam sesebuah laman web. Biasanya header mengandungi imej atau logo. Setiap template Joomla kebanyakkannya diletakkan imej yang tidak sesuai dengan tema laman web dan ia perlu diganti dengan imej yang bersesuaian.
Cara-Cara Menukar Header
1. Login ke control panel
2. Klik Extensions > Template manager.
3. Klik template yang sedang digunakan (default)
4. Klik Edit CSS
5. Klik template.css, klik Edit
Fail css ini bermula dengan /* begin Page */. Scroll ke bawah hingga bertemu line;
/* begin Header */
div.art-Header-png
{
position: absolute;
z-index:-2;
top: 0;
left: 0;
width: 980px;
height: 150px;
background-image: url('../images/Header.png');
background-repeat: no-repeat;
background-position: left top;
}
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 980px;
height: 150px;
background-image: url('../images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */
Jadi, terdapat dua jenis imej yang digunakan untuk Header iaitu Header.png & Header.jpg yang terletak di dalam folder imej. Kedua2 imej bersaiz 980x150 pixel.
Menyemak Fail Imej
1. Dengan menggunakan Windows Explorer buka folder images
Lokasi: C:\xampp\htdocs\joomla\templates\eastorange\images
EastOrange adalah folder template yang digunakan (default)
Dari folder images, buka fail Header.jpg & png untuk semakan.
Buatkan 1 fail imej baru yang sesuai dan simpan dengan nama Header.jpg (980x150) dan fail Header.png bersaiz sama.
Upload dan gantikan kedua2 fail asal dengan fail imej yang anda buat sendiri.
Refresh dan Preview laman web. (guna CTRL+F5 untuk refresh laman web)
SELESAI
[Tutorial] Meminda Template - Header
[Tutorial] JOOMLA EXTENSIONS - Components
Components biasanya dilinkkan dengan Menu dan ia lebih kompleks dari plugin & modules. Kadang2 di dalam Components terkandung Module dan Plugin. Contoh components seperti Forum, Foto Gallery dsbnya.
Menggunakan Component Terpilih
Component yang dipilih ialah PhocaGallery (Galeri Foto)- [ Laman Web ]
1. Download PhocaGallery- [Download]
2. Simpan fail di Desktop.
3. Klik Extension > Install/Uninstall
4. Pilih fail phocagallery dan klik Upload & Install.
5. Setelah berjaya install, dalam skrin phocagallery klik butang Install.
6. Klik Category > New
7. Masukkan maklumat seperti rajah di bawah;
1) Title: Komputer
2) Klik Folder untuk membuat folder 'komputer'. Semua gambar komputer akan diletakkan di sini.
8. Buat satu folder
1) Taip komputer dan klik Create folder.
9. Dalam skrin phocagallery, klik Image
1) Masukkan Title dan pilih category
2) Klik Image
Klik folder komputer dan upload gambar2 komputer ke dalam folder komputer.
10. Klik gambar dan Save. Ulang proses untuk setiap gambar.
Menghubungkan Menu Galeri Foto Dengan PhocaGallery
1. Dalam Admin Control Panel, klik Menus > Menu Utama
2. Klik sub-menu Foto Galleri.
3. Akhir sekali klik Save.
4. Preview laman web dan cuba klik menu Foto Galeri.
[Tutorial] JOOMLA EXTENSIONS - Modules
Modules biasanya diletakkan di posisi kanan, kiri, atas atau bawah laman web. Sebagai contoh modul jam diletakkan di sebelah kanan laman web.
1. Download module jam- [Download]
2. Simpan di Desktop.
3. Login ke Control Panel.
4. Extension > Install & Uninstall
5. Klik Browse dan cari fail jam
6. Klik Upload & Install
Mengaktifkan Module Jam
1. Klik Extension > Module Manager
2. Klik World Time Clock
3. Buat beberapa setting.
1) Tukar tajuk yang sesuai
2) Enable: Yes
3) Position: Right
4) Tukar warna jika perlu
5) Pilih Regional
6) Save atau Reply
4. Simpan dan preview.
[Tutorial] JOOMLA EXTENSIONS
Apa itu Joomla Extension?
Untuk lebih jelas lagi apa itu Extensions, buka laman web rasmi Joomla.
http://extensions.joomla.org/
Simbol 'C' menunjukkan Components.
Simbol 'M' menunjukkan Modules.
Simbol 'P' menunjukkan Plugin/Mambots.
Simbol 'L' menunjukkan Language.
Jadi, extensions dalam Joomla terbahagi kepada 4 iaitu;
1. Components
2. Modules
3. Plugins/Mambots
4. Languages
Dengan extensions ini anda boleh menambah beberapa tambahan yang diperlukan dan sesuai dengan laman web supaya laman web lebih menarik, informatif dan profesional.
Menggunakan Extensions Terpilih: PLUGIN
Plugin biasanya digunakan untuk menambah sesuatu elemen seperti video, foto dsb terus ke dalam artikel. Contohnya plugin AllVideo. Dengan AllVideo anda boleh menambah klip video YouTube terus ke dalam artikel.
1. Buka laman web http://www.joomlaworks.gr/
2. Download AllVideo plugin: Download
3. Simpan fail download di Desktop.
Memasang Plugin
1. Login ke Control Panel.
2. Klik Extensions > Install/Uninstall
3. Klik Browse & cari fail plugin.
4. Klik Upload & Install.
5. Klik AllVideo Documentation untuk melihat cara menggunakan plugin ini.
Mengaktifkan Plugin.
1. Klik Extensions > Plugin Manager
2. Klik AllVideo > Enable > Save.
Menambah AllVideo Plugin ke Dalam Artikel Komputer
Katalah anda ingin menambah klik video IBM Blue Gene, World's Fastest Supercomputer;
.http://www.youtube.com/watch?v=qm_CN1-c1r4
1. Copy klip ID qm_CN1-c1r4
2. Edit artikel Pengenalan Komputer (menu Content > Article Manager)
3. Klik Pengenalan Komputer untuk edit.
4. Tambah tag {youtube}ID{/youtube} iaitu {youtube}qm_CN1-c1r4{/youtube}
5. Simpan dan preview.
[Tutorial] MENAMBAH ISI KANDUNGAN (Teks, Gambar dll)
Menambah isi kandungan berkenaan dengan komputer yang dilinkkan dengan menu Komputer. Anda perlu membuat satu lagi Section dan Category UMUM dan link ke menu Komputer. Login ke Control Panel.
1. Klik Content > Section Manager
2. New > Title: taip Umum
3. Save
1. Klik Content > Category Manager
2. New > Title: taip Umum
3. Pilih Section: Umum
4. Save.
Membuat Artikel
1. Klik Content > Article Manager.
2. Pilih Section: Umum & Category: Umum
3. Klik New
4. Simpan artikel: Klik Save
Link menu Komputer ke artikel Pengenalan Komputer
1. Dalam Control Panel, klik Menu > Menu Utama
2. Klik Komputer > Parameters (Basic) > Section > Umum
3. Save dan preview laman web.
Menambah Imej/Gambar Ke Dalam Artikel
Untuk menambah imej ke dalam artikel, anda perlu upload gambar2 komputer yang berkaitan ke dalam satu folder imej.
1. Dalam Control Panel klik Global Configuration > System
2. Media Setting: Path to Image Folder: images/stories
3. Tukar ke images sahaja
4. Jadi, Media Setting: Path to Image Folder: images
5. Save dan Refresh.
Membuat Folder dan Upload Gambar
1. Dalam Control Panel, klik Media Manager atau Site > Media Manager
2. Buat satu folder komputer & klik Create folder.
3. Kemudian klik folder komputer dan Start Upload fail2 komputer ke dalam folder komputer.
Memasukkan Imej/Gambar Komputer ke Dalam Artikel.
1. Dalam Control Panel, Klik Content > Article Manager dan klik Pengenalan Komputer.
2. Browse ke bawah sekali dan klik butang Image.
3. Klik folder komputer dan pilih gambar.
4. Klik butang Insert (sebelah atas)
5. Susun kedudukan imej/gambar mengikut kesesuaian.
6. Klik Save dan Preview.
[Tutorial] MEMBUAT MENU UTAMA (MAIN MENU)
Anda perlu tukar menu asal ke menu anda sendiri sesuai dengan isi kandungan laman web. Sebagai contoh menu utama;
Menu Utama
> Laman Utama
> Komputer
- Perkakasan (sub-menu Komputer)
- Sistem Operasi
- Perisian
- Sekuriti
> Laman Web
- Asas HTML (sub-menu Laman Web)
- Asas PHP
> Multimedia
- Grafik (sub-menu Multimedia)
- Audio
- Video
> Galeri
- Foto (sub-menu Galeri)
- Video
Cara-Cara Membuat Menu:
1. Login ke admin control panel
2. Klik Menu Manager
3. Klik menu item menu utama
4. Klik Home
5. Tukar Title menjadi Laman Utama
6. Untuk buang semua menu sediada kecuali Laman Utama
Pilih semua menu kecuali Laman Utama dan klik Trash
7. Membuat Sections. Klik Content > Section Manager
8. Klik New.
9. Masukkan Title yang sesuai dengan menu (Komputer). Kemudian Save
Ulang proses ini untuk Laman Web, Multimedia & Galeri.
10. Empat section telah anda buat.
11. Membuat menu dan link ke section.
Klik Menu > Menu Utama/Main Menu
Klik New
12. Klik Article > Section Blog Layout
13. Masukkan maklumat seperti berikt;
Title: Komputer
Section: Komputer
Lain2 set default
Klik Save
Ulang proses no 12 & 13 untuk membat menu Laman Web, Multimedia & Galeri
14. Contoh menu yang dihasilkan.
[Tutorial] MENAMBAH ARTIKEL DI MUKA DEPAN (FRONT PAGE)
Pada asalnya muka depan laman web seperti dalam gambar di bawah;
Untuk menukarnya dengan artikel kita sendiri, login ke admin control panel.
1. Klik Front Page Manager.
2. Pilih semua artikel > klik unpublish
3. Klik Content > Article manager. Klik ikon NEW
4. Taip artikel anda dan akhir sekali klik Reply. Preview laman web.
Klik Yes pada Front Page.
[Tutorial] MEMAHAMI SUSUNATUR TEMPLATE DI FRONTEND
Setiap template yang digunakan untuk memaparkan laman web (FrontEnd) berbeza antara satu dengan lain bukan sahaja dari segi TEMA tapi juga kedudukan dan nama POSISI. Jika kita ambil cotoh template EastOrange, laman web akan kelihatan seperti berikut;
Mengenal nama dan kedudukan posisi setiap template adalah sangat penting untuk menguruskan sesebuah laman web Joomla. Untuk mengetahui dengan lebih terperinci lagi, sila login ke admin control panel.
1. Klik Adminstrator, masukkan username & password.
2. Klik Extensions > Template manager.
3. Klik template yang digunakan (EastOrange)
4. Klik Preview.
5. Perhatikan nama2 posisi yang ditunjukkan secara keseluruhannya.
6. Klik menu Site > Control Panel.
7. Kita ambil satu contoh. Klik Extensions > Module Manager.
8. Klik Main Menu. Perhatikan position : Left
9. Anda boleh tukar position main menu ke kanan dengan memilih 'right'
10. Klik Apply dan lihat perubahan main menu di laman web
Dengan mengetahui nama dan kedudukan posisi, anda dengan mudah dapat memasukkan apa saja elemen joomla mengikut posisi pilihan anda sendiri.
