Tutorial Joomla 1.5: Belajar Menggunakan Joomla Layout dan Modul Template Joomla

by Baloot MX

in Joomla,Tutorial

Tutorial Joomla 1.5 kali ini akan menerangkan tentang Joomla Layout. Apa itu Joomla Layout? Sebelum mengetahui lebih lanjut tentang Joomla Layout, pastikan anda telah mempunyai laman web Joomla 1.5 terlebih dahulu. Untuk tutorial cara-cara untuk setup Joomla 1.5, sila baca post Install Joomla 1.5 Menggunakan Fantastico dan Secara Manual. OK, Joomla Layout ni boleh dikatakan sebagai peta untuk menentukan setiap kedudukan Modul, artikel, menu dan lain-lain.

Setiap template Joomla adalah berlainan kedudukan Joomla Layout. Di bawah ini aku sediakan screenshot untuk default Joomla Layout. Jika anda baru install Joomla 1.5 secara default mengikut tutorial aku sebelum ni (Install Joomla 1.5), kedudukan layout adalah seperti dibawah:

Rujuk imej diatas untuk setiap penerangan Nombor 1 hingga 10 dibawah

Rujuk imej diatas untuk setiap penerangan Nombor 1 hingga 10 dibawah

Photo Credit: SiteGround.com

Perhatikan imej diatas, ada nombor-nombor untuk setiap kedudukan masing-masing. Aku akan menerangkan tentang kedudukan setiap satu supaya anda lebih memahami tentang Joomla Layout dan bagaimana untuk ubah kedudukannya.

Setiap Joomla template mempunyai Layout yang berlainan. Ini perlu diingat supaya tidak memeningkan kepala. Hee.. Di dalam tutorial ini, imej diatas telah ditandakan dengan nombor 1 hingga 10. Untuk ubah kedudukan setiap satu, anda perlu ke Extensions -> Module Manager. Menu Extensions terdapat di bahagian atas di dalam http://www.domainanda.com/administrator. Anda hanya perlu menukar Position untuk ubah kedudukan. Antara kedudukan yang digunakan di dalam default Joomla template adalah top, user1 hingga user6, left, right, header, footer, breadcrumb dan newsflash.

Aku akan menerangkan nombor-nombor untuk imej diatas. Sila rujuk imej di atas untuk setiap Nombor di bawah supaya tidak memeningkan anda semasa membaca tutorial aku ini. :D

Nombor 1

Di kedudukan ‘top’ merupakan kedudukan untuk ‘Banners’ dan ‘Newsflash’. Kedudukan ini adalah secara default.

Modul Banners memberikan anda kemudahan untuk muat naik gambar (cth: Iklan banner). Anda boleh meletakkan banner Affiliate Program yang anda sertai dan masukkan link affiliate anda untuk gambar di Banners tersebut. Aku pasti, anda tidak mempunyai masalah untuk bahagian memasukkan link tersebut. Untuk edit Banners, anda boleh ke menu Components -> Banners. Sebelum itu, pastikan modul Banners anda telah pun di-publish di menu Extensions -> Module Manager.

Antara kegunaan modul Newsflash adalah untuk paparkan artikel secara rawak (random) samada secara horizontal ataupun vertical. Di dalam ruangan Administrator Joomla (http://www.domainanda.com/administrator), anda boleh memilih Category artikel yang mana untuk dipaparkan di modul Newsflash ini.

Nombor 2

Modul untuk nombor 2 merupakan Top Menu dan positionnya adalah ‘user3′ jika menggunakan template Joomla secara default. Top Menu boleh di-ubah di Menus -> Menus Manager di dalam Administrator Joomla.

Kemudian anda boleh paparkan modul Top Menu yang anda baru sahaja buat.

Nombor 3

Modul ini dinamakan Breadcrumbs dan berada di position ‘breadcrumb’ di dalam Extensions -> Modul Manager. Breadcrumbs merupakan satu navigasi untuk memaparkan kedudukan semasa anda ketika berapa di page-page di dalam laman web Joomla anda. Paham ke maksud ayat aku tu? Haha..

OK, sebagai contoh: Katakanlah anda berada di page yang bertajuk ‘Mari Belajar Joomla’. Maka Breadcrumbs di web anda akan memaparkan Home -> Mari Belajar Joomla. Penggunaan Breadcrumbs adalah penting jika laman web tersebut mempunyai sub-sub menu yang banyak serta “dalam”. Sebagai contoh sub-menu yang “dalam”:

Home -> Tutorial -> Belajar Joomla 1.5 -> Install Joomla -> Menggunakan Fantastico
Home -> Tutorial -> Belajar Joomla 1.5 -> Install Joomla -> Menggunakan FTP
Home -> Tutorial -> Belajar Joomla 1.5 -> Install Joomla -> Dan sebagainya.........

Perhatikan sub-sub menu di-atas, aku pasti anda semua telah pun faham penggunaan Breadcrumbs. Ini untuk memudahkan pelawat laman web anda untuk ke menu sub-Home atau mana-mana menu yang lain.

Nombor 4

Modul ini dinamakan Search dan diletakkan position di ‘user4′ di dalam default template Joomla anda. Modul Search ini memberikan kemudahan kepada anda dan juga pelawat laman web Joomla anda sebagai engin-carian (search engine), hanya carian di dalam laman web anda sahaja.

Nombor 5

Bahagian ini dinamakan position ‘left’ untuk meletakkan sebarang modul. Bahagian ‘left’ ini akan memaparkan apa jua modul yang anda letakkan, secara menegak (vertical). Sebagai contoh, anda boleh meletakkan sebarang menu, forms, galleri gambar, statistik pelawat laman web dan sebagainya.

Nombor 6

Dinamakan Latest News dan modul ini diletakkan di-position ‘user1′ di dalam template default. Modul ini memaparkan artikel yang terbaru daripada Categories yang anda pilih. Sebagai contoh: Jika anda set-kan untuk memaparkan categories Tutorial, maka selepas anda Publish-kan artikel di dalam categories Tutorial, ianya akan dipaparkan di modul Latest News ini. Hanya tajuk artikel tersebut dipaparkan.

Nombor 7

Modul ini dinamakan Popular dan berada di-position ‘user2′ di dalam template Joomla anda. Hanya artikel yang banyak pelawat (views) akan disiarkan di modul ini. Ianya di-setkan secara automatik oleh sistem Joomla 1.5 ini. Atau anda juga boleh set-kan categories mana yang akan berada di Popular ini.

Nombor 8

Ini merupakan bahagian utama laman web Joomla anda. Modul ini akan memaparkan artikel yang paling baru anda buat dan jika anda set-kan artikel tersebut untuk berapa di Front Page, ianya akan berada di sini.

Segala artikel yang berada disini, anda boleh ubah suai modul ini dengan merujuk Content -> Front Page Manager.

Nombor 9

Modul ini dinamakan Polls dan berada di ‘right’ dalam position template Joomla anda. Segala setting untuk modul ini anda boleh ke menu Components -> Polls. Selepas anda buat Polls, anda boleh set-kan polls yang mana untuk di paparkan di laman web Joomla anda. Untuk edit Polls ini, anda boleh ke Extensions -> Module Manager dan edit modul yang bernama “Polls”. Sebagai contoh, untuk ubah nama Polls kepada “Survey Hari Ini”.

Anda juga boleh meletakkan pelbagai lagi modul di kedudukan ‘right’ ini mengikut keperluan anda. Contohnya, Ruang Pengiklanan untuk pelawat anda tempah iklan di laman web tersebut yang bersaiz 125×125.

Nombor 10

Segala modul yang berada di-position ini berada di kedudukan ‘footer’ di dalam template Joomla anda. Jika secara default, modul Banners dan Footer yang berada di bahagian ini. Anda boleh gunakan modul Footer untuk memaparkan link-link kegemaran anda, copyright notice dan juga gambar atau galeri. Semuanya mengikut kreativiti anda. Ianya adalah bebas. Hee..

Anda masih pening dengan tutorial aku diatas, jangan pening lagi. Kemukakan masalah pening anda itu di ruangan komen di bawah. Aku sudi membantu anda. Inilah antara kelebihan blog aku, kemukakan sebarang masalah anda di sini. Insyaallah aku akan selesaikan dengan secepat mungkin.

Ebook Percuma (Tutorial Joomla dalam versi English)

Dapatkan ebook tutorial Joomla secara percuma yang bertajuk, Building Websites With Joomla 1.5 keluaran Packt Publishing. Harga asal $18.00 (RM63). Apa yang anda perlu lakukan untuk mendapatkan ebook ini secara percuma daripada aku:

  • Langgan RSS FEED Baloot’s Blog melalui emel anda.
  • Emelkan screenshot langganan RSS tersebut kepada aku di baloot.mx@GMAIL.COM.
  • Tajuk emel, “Ebook Percuma: Building Websites With Joomla 1.5” supaya aku tidak ketinggalan emel anda kerana terlalu banyak emel yang aku terima setiap hari.
  • Ebook ini akan dihantar kepada emel yang anda gunakan tadi.

{ 44 comments… read them below or add one }

Nurul October 7, 2010 at 5:28 pm

salam….bro
mntk tlg sgt ni mcm mn nk tukar header.sy ngan kwn sy dh pening ni x tau dh mcm mn nk tukar header 2 lg.kami guna template yg mn header nye kosong……just text sj.kami nk tukar header yg kosong 2 ngan header yg kami bt sndri….ni laman web kami yg kami kena bt…www.kersb.com

Reply

Baloot MX October 7, 2010 at 8:36 pm

Salam Nurul

Masuk ke URL ni:

http://kersb.com/templates/siteground-j15-73/images/header1.png

Cari guna FTP Filezilla atau cPanel (file manager). Pastu buat design header sama saiz dengan gambar tu iaitu: 960px width n 154px height.

Reply

Nurul October 8, 2010 at 9:53 am

sy dh buka ape yg bro ckp 2 tp sy x fhm samada nk bt file bru atau just tukar ape yg dh ade dlm 2 dan saya x tau yg mn satu nk kena ubah……tolong bro…

Nurul October 15, 2010 at 12:22 pm

Salam…..
der mslh header dh setel tp ni nk tny psl mcm mn lak nk letak scrolling text kt website guna joomla……please der bantu sy :-)

Reply

Baloot MX October 19, 2010 at 6:44 pm

Salam Nurul

Nak letak scrolling text camane? Macam olskool punya style je scrolling text ni. Ada contoh tak? Marquee ke? Kalau marquee, search Google “HTML marquee’..

Reply

Syafrudin November 22, 2010 at 7:13 pm

salam,
Saya baru diamanahkan utk ADMIN web sekolah ini.
Saya ingin bimbingan dr tuan. Pertama saya ingin tahu mcmna nak tukar gmbar kat atas sekali tu? Di panggil banner ke? Saya biasa kendali blogspot sj… Mohon bimbingan…

Reply

hanafiah yusof April 30, 2011 at 9:57 am

Tajuk emel, “Ebook Percuma: Building Websites With Joomla 1.5”

Reply

yuki September 16, 2011 at 6:27 am

salam,

1) camne nk fix setting browser utk pengguna ie,chrome dan firefox. Kt laptop aku ok paparannya tp org lain ade komplen bile bukak kt laptop depa , paparan web jd terkecik or terbesar plak.

2) aku guna template artister, camner nk setup button search nk letak kt atas header. apa modul position yg aku kena guna?

p/s: aku byk lg nk tanya nie next time..ok

Reply

Baloot MX September 17, 2011 at 10:20 am

Salam Yuki

1. buat width setiap website tu maksimum hanya 960px sahaja.

2. maaf sy tak pernah template artisteer. solution: guna google custom search pun boleh. hanya replace code google custom search untuk djadikan search engine kat web kita. keterangan lanjut: http://www.google.com/cse/

OK tanya-lah. Sy tolong setakat yang mampu. :)

Reply

yuki September 18, 2011 at 2:29 pm

wah.. cepatnye reply. nie yg best dpt sifu joomla camnie..hehe. sy tanya kt forum joomla.my pun makan masa nk tggu di reply..

1) letak width 960px tu edit kat css ker ? bole nyatakan tak koding yg maner ? actually klu template artisteer nie ade editing utk ie6 dan 7 skali.. sy edit setiap css tu ke ?

2) ok gak guna google custom search.. tp sy cdg nak paste koding tu atas dari header web sek sy.. tp tak tahu dibelah mana..

3) penah install template rockettheme sblm nie.. rasenya dr segi ranking template nie yg highest kan ? klu nk guna yg free punyer tp ade drop down menu ade tak ? color blue..coz header dh warna blue gak/ tq

yukitada November 13, 2011 at 7:07 pm

saya nak tanya modul ape yg digunakan oleh web al-ahkam.net
utk ‘hot news’ .. makna kata title je kuar kt frntpage tp bile org klik , die dpt baca semua .. sy try newsflash tak menjadik..

Reply

Baloot MX November 19, 2011 at 3:28 pm

Yuki,

Hot News tu menggunakan NEWSFLASH. Module ini berbeza untuk setiap design web. Untuk newsflash yang cantik, boleh tengok kat sini:

http://www.rockettheme.com/extensions-joomla/roknewsflash

DEMO: http://demo.rockettheme.com/extensions/?extension=roknewsflash

Reply

cahayainspirasi November 23, 2011 at 3:00 pm

hello, nak tumpang populer sikit ya. bolehlah tengok site aku, kite sama-sama belajar joomla he-he…

Reply

yukitada December 4, 2011 at 3:13 pm

bro , bape upah utk buat satu template kosong guna rockettheme ..

ade amik free dr bbrapa web tp appearance tak berapa cantik la.. utk web sekolah aku jer..

bahan utk content semua dah ade tp bile install template byk position yg berapa kena dgn kehendak hati.

Reply

Baloot MX December 4, 2011 at 5:27 pm

Yukitada, nak buat satu template kosong macam mana ya? Boleh terangkan dengan lebih lanjut?

Reply

yukitada December 6, 2011 at 5:20 am

design template biase yg just rangka jer mcm biase di donlot dr web yg sediakan free template.

bro , nak tanya sket . aku guna module imageslider lofarticlesslideshow. yg paparkan content n image kt frontend .

setiap image aku dah resize saiz 440 x 300 px. Masalah skrg bile dah publish kt frontend kenapa ada beberapa gambar tak kuar penuh dlm box tu ? ape mslh setting yg aku perlu buat ?

ada modul lain yg sama fungsi mcm nie tak ?

nie web sekolah aku.. im beginner sgt2 . just try/error jer .

http://www.sam10.bpi.edu.my/

Reply

Leave a Comment

{ 2 trackbacks }

Previous post:

Next post: