Panduan mengubah tampilan website joomla agar lebih menarik

Salah satu faktor penting yang perlu diperhatikan dalam pembuatan website adalah tampilan. Artikel ini akan memandu anda untuk mengubah tampilan website joomla baik tampilan yang berbayar maupun yang gratisan 😀

Beberapa tampilan gratis bisa didownload dari www.bestofjoomla.com, www.youjoomla.com, dan masih banyak lagi.

Sebagai contoh, saya akan mengubah tampilan joomla menjadi seperti ini

Cara mengubah tampilan website joomla agar lebih menarik

Langkah 1:

Langkah pertama yang harus dilakukan adalah mendownload file tampilan tema (themes) dari sini

( pada contoh ini saya mendownload file dari yoububble )

Langkah 2:

Setelah mendapat arsip tampilan tema, extractlah isinya kedalam satu folder lalu pindahkan ke dalam lokasi folder template di dalam applikasi joomla anda. misal C:/ xampp / htdocs / joomla / templates / <pindahkan_folder_kesini>

sebagai contoh isi folder templates saya adalah seperti ini

Sedangkan isi dari folder yoububble itu sendiri adalah hasil ekstrakan arsip tampilan tema yang telah kita download sebelumnya.

Isi dari folder yoububble akan tampak seperti ini

 

Langkah 3:

Setelah semua susunan file terletak pada lokasi yang benar, bukalah browser kesayangan anda

(Mozilla Firefox / Google Chrome / Opera / Safari / Internet Explorer).

Lalu masuklah kedalam halaman administrator joomla anda, misalkan http://localhost/joomla/administrator

Pada halaman dashboard pilihlah Extensions – Template Manager

Pada bagian Template Manager, pilihlah / check tema yoububble dan set menjadi default.

 

Langkah 4:

Setelah itu ceklah tampilan website joomla anda, http://localhost/joomla

tampilan website anda seharusnya telah berubah menjadi tema yoububble. :o)

Langkah 5:

Pada langkah berikutnya kita akan membuat halaman about me atau tentang kami.

pertama kita harus membuat artikel baru dengan judul About Me dan memberi isinya dengan Artikel terkait.

perhatikan gambar berikut

Setelah berhasil membuat artikel About Me,

Kita harus membuat menu navigasi yang jika diklik akan menampilkan artikel About Us kita.

Dari menu di admin panel kita pilih MenusMain Menu – New

Lalu anda harus memilih tipe navigasi Articles Article Article Layout

Setelah itu masukkan data seperti judul navigasi dan jangan lupa pilih article yang ingin dituju (About Me)

perhatikan gambar untuk lebih detail

Cek lah halaman website anda, maka seharusnya telah keluar satu navigasi untuk About Me, dan jika di klik akan menampilkan artikel about me.

 

Langkah 6:

Langkah berikutnya kita akan mengganti logo yang terletak disudut atas kanan.

pertama-tama siapkan logo baru dengan ukuran 370px x 85px.

Format PNG disarankan transparant (transparasi penuh).

Dalam contoh ini saya akan menggunakan logo berikut:Lalu langkah selanjutnya beri nama dengan logo.png dan tumpuki file logo yang awal (overwrite)

lokasi logo yang awal ada di C:/ xampp / htdocs / joomla / templates / yoububble / images / gray <paste_disini>

setelah logo.png awal ditumpuk dengan logo.png baru buatan kita sendiri, maka automatis logo pada website joomla anda akan berubah.

Tampilan logo website anda akan seperti ini

Terima kasih telah membaca artikel saya ini, jangan lupa beri komentar dan silahkan bertanya apabila ada yang membingungkan.

Selamat berkreasi dengan website joomla anda 😀

44 Comments

Join the discussion and tell us your opinion.

bikin websitereply
8 Apr 2010 at 10:35 am

Makasih bos ilmunya, aQ coba deh tutorialnya

Christian Chandra
8 Apr 2010 at 5:00 pm
– In reply to: bikin website

Sama-sama 😀

charlles
22 Okt 2012 at 2:23 pm
– In reply to: bikin website

saya seorang pemula dari sebuah instansi pemerintah yang diberikan tugas tuk mengurus web kami, beberapa hari lalu saya sudah migrasikan website kami dari joomla 1.0 ke 2.5. pertanyaanya bagaimana langka2 yg harus saya siapkan untuk melakukan penyusunan ulang tampilan web tersebut, termasuk template, modul, dan lain2nya mohon bantuannya terima kasih :o)

suratnoreply
16 Apr 2010 at 11:34 am

Bos, mau nanya dunk. Kalo dari website.co.cc yang udah jadi seperti ini, kalau mau ganti template apakah harus menulis ulang tiap halamannya? soalnya saya pernah mencoba sekali mengganti template, wah…isi tiap halamannya hilang alias template berubah, tapi halamannya jadi blank. Ya, harus nulis ulang deh jadinya satu per satu halaman. Adakah panduan cara ganti template tapi tanpa nulis ulang gitu?

thx atas bantuannya

Christian Chandra
16 Apr 2010 at 5:45 pm
– In reply to: suratno

Kalo boleh tau, engine website yang anda gunakan apa? membuat sendiri atau menggunakan cms seperti joomla / drupal / wordpress?
kalo misalkan anda menggunakan engine cms, saya ambil contoh joomla, maka untuk mengganti template tidak perlu merubah isi / content dari website tersebut.
Anda hanya perlu menyediakan template untuk joomla lalu masuk ke bagian “Extension” lalu “Template Manager” dan mengubah tampilan dari bagian itu. (isi tidak akan hilang)

Setelah saya kunjungi website anda, saya melihat bahwa anda menggunakan wasilitas website builder dari 000webhost, saya kurang paham bagaimana cara bekerja dari website builder itu sendiri. Kalo saya sarankan kenapa tidak menggunakan joomla / drupal saja. sehingga akan lebih mudah dalam hal manage content dan tampilan :o)

Lili Fadli
24 Mar 2012 at 5:30 am
– In reply to: suratno

:o) Terimakasih wat atikel’y boz…..
oya mo tanya ne boz,,klo mo nampilin foto a/ gambar dihome gimana cara’y ea tolong dijelaskan dunk….???

“ditunggu jwbn’y ya boz mudah”an artikel2 ente selalu bermanfaat”…….thnks

http://pendidikan-rumah.blogspot.comreply
17 Mei 2010 at 2:06 pm

mkasih infonya…tapi k saya coba di web saya tidak jalan y…mohon bantuanya n email ke emak saya…terimakasih

MULKYreply
8 Apr 2011 at 9:53 pm

tolong donk kasih tau cara2 lain dalam merubah web.

chyputreply
27 Jul 2011 at 5:49 am

:-$ muter, akhr ya disni..mudah2 blog.christianchandra.com bisa menyelasaikan masalah yang bikin aku sangat pusing, kadang ampek minder…ma nyamuk yang gigit..uwong tiap malem ngutek2 tapi gak rampung bin sukses.. 😀
Ini loch, aku akan gi semagat banget yang mana nya bikin web pkek Jomla! yang kata nya kan mempunyai kemudahan dalam membuat web dinamis..tapi gak tahu nya?lumayan juga, kan gak enak klu buka jebreet tampilan bawaan instalan.Na, pas pengen ganti tampilan/templete lewat extensions>>instal/uninstal eh gak tahu nya greeeeng ada tulisan warna mereh “Error! Could not find an XML setup file in the package”…
Tulisan sialan itu minggat trus tampilan yang kita ingnkan itu tampil “‘”gimana”” sebulum nya trimakasih… :o)

uchareply
23 Agu 2011 at 11:33 am

makasih bro.. informasi nya sangat bagus dan berguna untuk web site joomla yang aku punya. :o)

Ideas Collectionreply
8 Sep 2011 at 2:37 am

Makasih uda kasih tipsnya. Dari dulu kendala saya adalah merubah tampilan website joomla. Mudah-mudahan ada tips yang seperti ini lagi.

zaireply
8 Sep 2011 at 10:23 am

mantab bos Artikelnya, maju terus……….

oddynereply
24 Sep 2011 at 1:48 pm

Download template dari mana-mana, ganti headernya sudah bisa.
Tapi masalahnya selalu sama, nama headline sama slogannya selalu tidak bisa diganti sesuai dengan keinginan.
Sebagai contoh pake template fringgila dari joomla16, mau ganti nama headline untuk headernya caranya gimana?

company profile – tyareply
30 Sep 2011 at 11:03 am

Mas, kalau ganti tampilan artikel di joomla, misal aku pngennya tampilan artikel itu ada gambar terus read more, ada gambar terus readmore. ngaturnya dimana ya?
mohon bantuannya Mas :o)

ferdyreply
26 Nov 2011 at 12:26 pm

klo mau ganti warna tulisannya gmn mas??

tomyreply
28 Nov 2011 at 8:39 am

mau tnya kalau bikin navigasi halam di joomla gmana ya soalnya saya masih bingung nih :-/ 😎 :-S 😀 :o)

bali websitereply
14 Des 2011 at 2:08 pm

mantaaaap…. saya suka tutorialnya gan! semangat bagi ilmunya…. 😀 (Y)

yogi marzatireply
16 Des 2011 at 10:54 am

mas . .
saya mau nanya tentang cara membuat website dengan joomla nih , ,??
kalau cara menambah menu pada template gmana yah ??
dan
apa bisa template joomla tersebut bisa di edit di macromedia dreamweaver ??
tolong bantuan nya :o) 😀

halimreply
10 Jan 2012 at 5:24 pm

😎 :o) mantap

YOHannisTAMmureply
27 Jan 2012 at 11:53 am

trimakasih infonya gan …. saya lagi cari2 memang template yang gratis …..

siregarsitireply
8 Feb 2012 at 11:43 am

maaf , tapi ko saya pas yg langkah ke-5. itu pas di preview nggak muncul link about me nya yaa ?klo begitu itu knpa ?

edy prasetyo
27 Agu 2012 at 11:45 pm
– In reply to: siregarsiti

betul sekali Sob,, masalahnya sama dengan yang saya alami.bener2 masih newbie nih,,tlng d bls d email saya ya,, ;-(

fandyreply
12 Mei 2012 at 4:02 pm

keren artikelnya terima kasih

adasuarareply
13 Mei 2012 at 9:13 am

gan mau tanya, ane dah pasang plugin all in one SEO pack,,,setelah ane setting dah beres bisa di jalankan,,,ketika ane posting trus posisi plugin all in one SEO pack nya itu di bagian bawah, trus ane drag ke bagian atas pas di bawah kotak untuk posting,,tapiii ketika q reload kok malah nggak muncul,,itu solusinya gmn gan???? mohon bantuannya… 🙁

fandyreply
16 Mei 2012 at 6:06 pm

bos kalo kita menggunakan template yang lain bisa tidak membuat artikel layout?

Andhika Diskartesreply
3 Jun 2012 at 8:13 pm

bos,,ane mau edit website pake html..kira kira gimana caranya..need advise ini..main ke web gw dong buat kasih sara..trims

elhaqreply
16 Jun 2012 at 4:49 pm

tank bangets infonya gan,,,, (Y) 😀

numzreply
20 Jul 2012 at 9:48 pm

thanks tutorialnya

tanreply
28 Jul 2012 at 8:25 pm

Apakah semua website tampilan nya bisa di ganti dengan cara2 ini?
Seperti website .co.cc
Tq

(Y)

randyreply
16 Sep 2012 at 11:37 am

gan, menu nya d joomla wa …

kok hilang ?????

yg ada cman header na ma background ja ????

gimana cara nampilkan menunya gan ???

#mohon jawabannya …

sulaimanreply
5 Jan 2013 at 9:57 am

hahaah bang lo bkin tamplan artikel lbih menarik gmn nie

mampir mas bro http://pasti96.zz.mu :o)

Karunia Multimediareply
19 Mar 2013 at 9:06 am

Thanks…!

Dinoreply
22 Mei 2013 at 12:33 pm

pengen belajar joomala nih tapi lum ada ide 🙂

andiyreply
28 Mei 2013 at 8:46 am

mas mau tanya ddong web saya mnggunakan joomla 15.26 mau upgrade ke 2.5 dan ingin memperindah tampilan web saya,tolong sarannya ya boss

wakhid khoirireply
19 Des 2013 at 10:46 pm

matur thank you mas bro infonya

catur gunareply
8 Jan 2014 at 9:22 am

mauuu nanyaa … kenapa aku ganti header, logo dan footer ga bisaaaa yaa??? waktu pertama bisa tapi itu pun setelah 2 hari baru berubah… ngga langsung… nah terus skrg mau saya ganti lagi, malah udah berhari hari ngga ngeganti ganti … kenapa ya?? apa ada yang salah dengan setting saya??? atau karena saya menggunakan 2 komputer untuk mengolah web ini?

merryreply
18 Feb 2014 at 9:15 am

Ni gan, ane juga ada tutorial Joomla, semoga bermanfaat ya gan. monggo mampir gan http://teknologi.kompasiana.com/internet/2014/02/17/joomla-cara-edit-kode-template-joomla-633810.html.
kalo buat joomla hostingnya bisa mampir ke http://jaringanhosting.com/

web hostingreply
9 Apr 2014 at 4:20 pm

pos yang bagus, saya setuju 100%

arung jeram magelangreply
10 Jul 2014 at 9:14 pm

artikel yang sangat membantu dan bisa langsung menjadi panduan mas untuk belajar joomla, meskipun masih banyak pertanyaan tentang joomla, namun saya coba dulu hal-hal dasar tentang joomla. Jujur saya sering menggunakan wordpress di web saya namun ingin belajar di joomla dan sistem beckendnya sangat berbeda jauh..mohon bimbingan dan kerjasamanya mas..terima kasih dari magelang.

Andrereply
2 Sep 2014 at 10:08 am

tutorial yang ane cari ne gan 😀
thanks gan …

jesicareply
21 Apr 2015 at 11:16 pm

Thankkyou kakk..
tutorialnya membantu project dari kelas web design saya hehe

tempat tidurreply
17 Jun 2015 at 10:11 pm

tutorial yang bagus. terima kasih gan. sukses selalu.

WAHYUDIreply
8 Nov 2016 at 4:14 pm

Mohon infonya gan, cara tersimpel untuk membuat website joomla menjadi lebih responsive apa ya? masih awam banget nih sama jomla. Krn website sy belum responsive atau mobile friendly. Terima kasih sebelumnya

cecereply
3 Mei 2017 at 10:41 am

gan… saya sudah berhasil ganti template, tapi menu2 di template sebelumnya malah gak muncul.. gimana nampilinnya yaaa… makasih (saya pake web dinas)

Leave a reply