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

Submit your blog address here

Create your own blog and send the address by submitting the comment of this article. Make sure to provide your full name, matrix and URL address of your blog. Refer to the picture below. Manual on developing a blog using blogger.com and AdSense, download here … Download Windows Live Writer (a superb offline blog post editor)

Applications of Web 2.0

Web 2.0 describes the changing trends in the use of World Wide Web technology and web design that aim to enhance creativity , secure information sharing, collaboration and functionality of the web. Web 2.0 concepts have led to the development and evolution of web-based communities and hosted services , such as social-networking sites , video sharing sites , wikis , blogs . Find a website or web application that conform to the criteria of Web 2.0. Put the name of the application and the URL in the comment below. Please provide your full name and matrix number. Make sure the application you choose is not already chosen by your friend in the previous comment.

ViewFlipper Example–a simple FlashCard

UPDATE: Improved with Fling gesture (Sept 2012) UPDATE: ViewFlipper with Flip-In and Flip-Out Animation (August 2012) This tutorial is to demonstrate the ViewFlipper layout that is almost similar to CardLayout (in Java). The app will produce a simple Flash card that provide several screens with different picture for each card. Flip-in and Flip-out animation provided. Added in Sept 2012 – an improvement to support Fling gesture – enjoy… The amendment is only on the coding part. Some how the layout design (main.xml) is quite long. Later I’ll produce separated screen by including several XML layout from outside files. Screenshots;

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