Skip to main content

Penukaran templet

imageTutorial kali ini membincangkan bagaimana untuk menukar templet Joomla!. Templet (template) adalah satu fungsi kawalan yang menyeragamkan rupa bentuk laman web tersebut. Melalui templet, laman web anda akan mempunyai keseragaman rupa menu, menu item, fon dan saiz teks, warna tema, kelakuan skrin, butang, kotak teks, dan lain-lain. Sebagai contoh, perhatikan laman web dalam Rajah 6.1. Kedua-dua muka surat berbeza mempunyai rupabentuk banner, menu, tajuk artikel, footer yang sama dan warna tema yang sama. Kelakuan demikian penting dalam desain laman web supaya hadir elemen konsistensi. Kita tidak mahu rupabentuk yang berlainan bagi setiap muka bagi satu laman web bagi mengelakkan kekeliruan. Dikhuatiri pengguna menyangka mereka pergi ke laman web yang lain. Konsistensi juga adalah satu elemen mesra pengguna.

KUISCELL.comKUISCELL.com

Rajah 6.1: Laman web KUISCELL.COM

Langkah 1: Cari dan muat turun templet Joomla! 1.7

Pemasangan Joomla! yang asal dibekalkan bersama beberapa templet (simpel dan kurang menarik). Tutorial ini akan menunjukkan bagaimana untuk mencari templet dari beberapa pembekal dan perekabentuk templet percuma. Terdapat juga templet berbayar yang mengenakan cas untuk memuat-turun templet profesional yang mempunyai desain yang menarik. Penulis tidak mempunyai pengalaman memuat-turun templat berbayar. *Sebagai ingatan, kebanyakan pembekal templet menggunakan kaedah pengiklanan untuk menyokong aktiviti merekabentuk templet tersebut. Harap agar iklan yang disertakan bersama templet (biasanya diletakkan di footer) tidak dipadam. Sila hargai usaha keras mereka.

Sebagai permulaan kita gunakan Google untuk mencari pembekal templet percuma;

http://google.com/

cari templet joomla! 1.7 percuma guna GoogleRajah 6.2

Terdapat 10,100,000 hasil carian dan penulis memilih untuk mencari templet dari themegoat.com . Templet Orange agak menarik hati. Jadi penulis memilih untuk muat turun Orange (rujuk Rajah 6.3). Pastikan anda ketahui di mana fail templet tersebut disimpan (templet dalam format *.zip).

Anda boleh terus membelek-belek untuk mencari templet yang sesuai untuk laman web anda. Warna-warni sesuai untuk tema laman web kanak-kanak riang. Merah jambu dan ungu mungkin sesuai untuk laman web bertema fesyen atau aksesori wanita. Ringkas dan formal sesuai untuk kooporat dan profesional. Dan kadang-kadang pelanggan mempunyai warna kegemaran peribadi. Jadi berbincang dahulu dengan pelanggan warna kegemaran mereka yang mereka mahukan untuk laman web tersebut.

templet Orange dalam themegoat.comRajah 6.3

Langkah 2: Pasang templet pilihan

Kemudian login ke panel kawalan penyelenggaraan Joomla! ( http://localhost/joomla/administrator ). Pilih Extention Manager untuk memasang templet baru (Rajah 6.4).

tukar templet- extension managerRajah 6.4

Klik butang Browse dan pilih fail templet *.zip yang telah anda muat turun tadi (Rajah 6.5).

tukar templet- cari fail templet *.zipRajah 6.5

Klik butang Upload & Install untuk memasang templet baru (Rajah 6.6).

tukar templet- upload & install templetRajah 6.6

Mesej berjaya pada Rajah 6.7 akan dipaparkan sekiranya pemasangan tiada masalah. Sekiranya tidak berjaya mesej ralat akan kelihatan. Antara kemungkinan yang menyebabkan ralat ialah fail templet tidak lengkap atau versi tidak serasi, folder permission diset boleh baca sahaja (read only).

tukar templet- pasang templet baru berjayaRajah 6.7

Seterusnya proses mengaktifkan templet yang baru dipasang.

Klik pada Extensions->Template Manager untuk mencapai skrin tetapan templet (Rajah 6.8).

tukar templet Joomla 1.7 - capai template managerRajah 6.8

Pada skrin Template Manager:Styles pilih templet Orange-TG-Default dan set sebagai Default dengan klik butang Make Default (Rajah 6.9).

tukar templet Joomla 1.7 - pilih templet Orange sebagai DefaultRajah 6.9

Kembali ke laman web anda ( http://localhost/joomla/ ) dan Refresh. Rupabentuk laman baru anda telah berubah (Rajah 6.10).

tukar templet Joomla 1.7 - laman web dengan templet OrangeRajah 6.10

Langkah 3: Penukaran imej baner

Untuk mengubah imej pada baner anda perlu mengesan di mana imej baner itu disimpan. Semua fail yang berkaitan dengan templet Joomla! diletakkan di JOOMLA/TEMPLATES ( dalam kes kita c://xampp174/htdosc/templates). Sila rujuk Rajah 6.11.

tukar templet Joomla 1.7 - kesan folder templetRajah 6.11

Dapatkan folder imej yang berkaitan templet (c://xampp174/htdosc/templates/orangejuice-tg/images). Dalam kes templet semasa (orangjuice-tg) imej baner disimpan sebagai screen.jpg.

tukar templet Joomla 1.7 - kesan imej banerRajah 6.12

Klik kanan pada gambar untuk mengetahui ciri-ciri gambar (Properties). Gunakan maklumat nama fail, lebar dan tinggi imej untuk menyediakan satu imej lain untuk menggantikan imej ini (screen.jpg).

tukar templet Joomla 1.7 - imej baner propertiesRajah 6.13

Atau dengan kaedah yang lebih mudah, klik kanan pada gambar dan buka gambar menggunakan Paint (sekiranya anda boleh menggunakan Photoshop lebih baik) – rujuk Rajah 6.14.

tukar templet Joomla 1.7 - buka dengan pengedit imej Rajah 6.14

Selepas imej diedit, simpan dan pastikan imej mempunyai nama dan saiz yang sama seperti asal.

tukar templet Joomla 1.7 - imej baner baruRajah 6.15

Sekarang Refresh laman web anda. Yeay! Anda berjaya tukar imej baner.

tukar templet Joomla 1.7 - laman web dengan imej baner baru

LATIHAN 1: Sila ubah imej yang terdapat pada bahagian kiri-atas iaitu imej ini image. Kepada imej lain – mungkin gambar IC anda atau logo Joomla!.

image

LATIHAN 2: Berikut disertakan beberapa contoh templet percuma yang lain. Sila muat turun dan gantikan templet tersebut. Klik pada contoh desain untuk muat turun.

imageimageimage

 

<<Tutorial 05: Menu untuk menghubungkan artikel

Isi kandungan Panduan Joomla! 1.7

Tutorial 08: Penambahan Modul.

***Terima kasih kepada FIRESHOT atas perkongsian perisian screen capture yang dibekalkan. Hebat perisian ini, sila download untuk Firefox anda.

Comments

  1. Terima kasih atas perkongsian nih. Dapat jugak faham sikit2 pasal joomla nih

    ReplyDelete
  2. as salam,..waaa bagusla blog ni...byk panduan.tqvm..minta halal ilmu yg akan digunakan ini.

    ReplyDelete
  3. As Salam. . . .Nk tnye klo kite da masukkan template y kite nk tu. . pastu cmne nk tukaq yg lain .. coz da cube byk kali. . tp xbole. . .nk pdm yang install pown xbole. . .

    ReplyDelete
  4. As Salam. . . .Nk tnye mcm mane nk tukaq template yang lain. sbb byk kali saya try. .tp xboleh

    ReplyDelete

Post a Comment

Popular posts from this blog

Several English proverbs and the Malay pair

Or you could download here for the Malay proverbs app – https://play.google.com/store/apps/details?id=net.kerul.peribahasa English proverbs and the Malay pair Corpus Reference: Amir Muslim, 2009. Peribahasa dan ungkapan Inggeris-Melayu. DBP, Kuala Lumpur http://books.google.com.my/books/about/Peribahasa_dan_ungkapan_Inggeris_Melayu.html?id=bgwwQwAACAAJ CTRL+F to search Proverbs in English Definition in English Similar Malay Proverbs Definition in Malay 1 Where there is a country, there are people. A country must have people. Ada air adalah ikan. Ada negeri adalah rakyatnya. 2 Dry bread at home is better than roast meat home's the best hujan emas di negeri orang,hujan batu di negeri sendiri Betapa baik pun tempat orang, baik lagi tempat sendiri. 3 There's no accounting for tastes We can't assume that every people have a same feel Kepala sama hitam hati lain-lain. Dalam kehidupan ini, setiap insan berbeza cara, kesukaan, perangai, tabia

Contact Us at blog.kerul.net

Powered by EMF HTML Contact Form

Bootstrap Template for PHP database system - MyCompanyHR

HTML without framework is dull. Doing hard-coded CSS and JS are quite difficult with no promising result on cross platform compatibility. So I decided to explore BootStrap as they said it is the most popular web framework. What is BootStrap? - Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. (  http://www.w3schools.com/bootstrap/   ) Available here -  http://getbootstrap.com/ Why you need Flat-UI? Seems like a beautiful theme to make my site look professional. Anyway you could get variety of BootStrap theme out there, feel free to select here  http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/ Flat-UI is from DesignModo -   http://designmodo.com/flat/ Web Programming MyCompanyHR – PHP & MySQL mini project (with Boostrap HTML framework) Template 1: Template for the Lab Exercise. This is a project sample of a staff record management system. It has the PHP structured co

The Challenges of Handling Proverbs in Malay-English Machine Translation – a research paper

*This paper was presented in the 14th International Conference on Translation 2013 ( http://ppa14atf.usm.my/ ). 27 – 29 August 2013, Universiti Sains Malaysia, Penang. The PDF version is here: www.scribd.com/doc/163669571/Khirulnizam-The-Challenges-of-Automated-Detection-and-Translation-of-Malay-Proverb The test data is here: http://www.scribd.com/doc/163669588/Test-Data-for-the-Research-Paper-the-Challenges-of-Handling-Proverbs-in-Malay-English-Machine-Translation Khirulnizam Abd Rahman, Faculty of Information Science & Technology, KUIS Abstract: Proverb is a unique feature of Malay language in which a message or advice is not communicated indirectly through metaphoric phrases. However, the use of proverb will cause confusion or misinterpretation if one does not familiar with the phrases since they cannot be translated literally. This paper will discuss the process of automated filtering of Malay proverb in Malay text. The next process is translation. In machine translatio

Most used STRING functions in my PHP coding

These are my favourite string manipulation functions in my daily coding life. Dedicated especially to Web Programming students. Read them and have fun. Expect a happiness after a storm , and you’ll find your “inner peace”… This post is still in draft. I’ll update and refine with more examples that I’ve personally develop. More after the break…