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 Menus – Main 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.
Makasih bos ilmunya, aQ coba deh tutorialnya
Sama-sama 😀
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)
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
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)
: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
mkasih infonya…tapi k saya coba di web saya tidak jalan y…mohon bantuanya n email ke emak saya…terimakasih
tolong donk kasih tau cara2 lain dalam merubah web.
:-$ 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)
makasih bro.. informasi nya sangat bagus dan berguna untuk web site joomla yang aku punya. :o)
Makasih uda kasih tipsnya. Dari dulu kendala saya adalah merubah tampilan website joomla. Mudah-mudahan ada tips yang seperti ini lagi.
mantab bos Artikelnya, maju terus……….
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?
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)
klo mau ganti warna tulisannya gmn mas??
mau tnya kalau bikin navigasi halam di joomla gmana ya soalnya saya masih bingung nih :-/ 😎 :-S 😀 :o)
mantaaaap…. saya suka tutorialnya gan! semangat bagi ilmunya…. 😀 (Y)
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) 😀
😎 :o) mantap
trimakasih infonya gan …. saya lagi cari2 memang template yang gratis …..
maaf , tapi ko saya pas yg langkah ke-5. itu pas di preview nggak muncul link about me nya yaa ?klo begitu itu knpa ?
betul sekali Sob,, masalahnya sama dengan yang saya alami.bener2 masih newbie nih,,tlng d bls d email saya ya,, ;-(
keren artikelnya terima kasih
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… 🙁
bos kalo kita menggunakan template yang lain bisa tidak membuat artikel layout?
bos,,ane mau edit website pake html..kira kira gimana caranya..need advise ini..main ke web gw dong buat kasih sara..trims
tank bangets infonya gan,,,, (Y) 😀
thanks tutorialnya
Apakah semua website tampilan nya bisa di ganti dengan cara2 ini?
Seperti website .co.cc
Tq
(Y)
gan, menu nya d joomla wa …
kok hilang ?????
yg ada cman header na ma background ja ????
gimana cara nampilkan menunya gan ???
#mohon jawabannya …
hahaah bang lo bkin tamplan artikel lbih menarik gmn nie
mampir mas bro http://pasti96.zz.mu :o)
Thanks…!
pengen belajar joomala nih tapi lum ada ide 🙂
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
matur thank you mas bro infonya
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?
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/
pos yang bagus, saya setuju 100%
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.
tutorial yang ane cari ne gan 😀
thanks gan …
Thankkyou kakk..
tutorialnya membantu project dari kelas web design saya hehe
tutorial yang bagus. terima kasih gan. sukses selalu.
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
gan… saya sudah berhasil ganti template, tapi menu2 di template sebelumnya malah gak muncul.. gimana nampilinnya yaaa… makasih (saya pake web dinas)