Cara Membuat Template Website (PHP, Css & Html)

Kehadiran web generasi kedua atau web 2.0 memang membawa dampak yang cukup besar, terutama bagi para pengembang web (web developer). Web developer dituntut untuk menyajikan web application (website dll) yang senyaman mungkin bagi pengunjungnya. Salah satu faktor kenyamanan tersebut adalah dalam hal tampilan. Saat ini tampilan website di internet sangatlah beragam, pengunjung di banyak situs pun dimanjakan dengan pilihan beragam tampilan sesuai dengan kenyamanan (preferensi) masing-masing. Dari sisi pemilik (pengembang) website, sekarang pun dimanjakan dengan banyaknya pilihan template website atau tampilan situs yang dapat didapatkan dengan mudah di internet, ada yang berbayar ada pula yang gratisan. Untuk mengganti template website juga dapat dilakukan dengan cukup mudah.

Namun dengan banyaknya pilihan template website tersebut, terkadang membuat kita malah bingung sendiri, memilih tampilan yang cocok di hati. Penginnya sih bikin sendiri, tapi apa daya, terkadang kemampuan kita terbatas (curhat nih ). Ternyata beberapa layanan di internet menawarkan solusi bagi Anda yang ingin membuat template website sendiri namun memiliki keterbatasan kemampuan dalam hal web design. Penasaran? Yuk kita coba salah satunya dengan mengikuti langkah-langkah berikut ini.


Langkah #1. Buka Website doTemplate.com, tidak perlu login, mendaftar atau membayar alias gratis.

Langkah #2. Pilih salah satu tampilan template yang tersedia di website tersebut. Tampilan template inilah yang akan menjadi template dasar kita dan dapat kita customize (ubah) sesuai keinginan kita.

Langkah #3. Klik tombol “Customize and download” untuk melakukan pengaturan tampilan sesuai keinginan kita. Akan ditampilkan sebuah window berupa tampilan website sesuai yang kita pilih.

Langkah #4. Klik pada bagian header (gambar 2) untuk mengedit tampilan bagian header (judul situs, gambar dan background). Selanjutnya akan muncul gambar 3.

Gambar 2. Template Website

 

(gambar telah hilang di curi alien)

Gambar 3. Customize bagian header

Pada gambar di atas terlihat bagian-bagian dari header website. Bagian (1) adalah judul (title) utama. Kita dapat mengganti text (tulisan), jenis font, ukuran dan warna teks. Bagian (2) adalah Slogan 1 dan Slogan 2 dimana kita juga dapat mengatur teks, jenis font, ukuran dan warnyanya. Bagian (3) adalah gambar (foreground image), kita dapat menggunakan gambar yang sudah tersedia, ataupun mengupload gambar kita sendiri. Kita juga dapat mengatur beberapa properties dari image seperti blur di sekitar image. Bagian (4) adalah warna background. Bagian (5) adalah pilihan pengaturan untuk masing-masing bagian. Bagian (6) kita dapat klik tombol “Apply” untuk melihat perubahan pengaturan.

Langkah #5. Setelah mengatur header, klik pada bagian menu (navigasi) atas dan akan ditampilkan pilihan pengaturan untuk bagian menu. Kita dapat mengatur warna background menu, warna tulisan menu dan warna hover menu. Klik Apply untuk menyimpan perubahan.

Gambar 4. Customize bagian content

Selanjutnya lakukan hal yang sama untuk bagian website yang lain. [Gambar 4] Untuk bagian content (isi) kita dapat mengatur warna tulisan, judul tulisan dan juga warna link. Untuk mempermudah pemilihan warna, tersedia juga “font gallery” yang merupakan kombinasi warna standar web.

Gambar 5. Customize bagian Sidebar

[Gambar 5]. Untuk bagian sidebar (menu samping) kita dapat mengatur ukuran lebar dari sidebar dalam pixel. Dapat juga diatur warna teks, warna link dan warna separator menu.

Gambar 6. Customize Footer

[Gambar 6]. Untuk bagian footer, kita dapat mengatur tinggi dari footer serta warna teks dan link.
Langkah #6. Jika sudah selesai melakukan perubahan terhadap tampilan template (customize), klik tombol download dan file template akan didownload ke komputer kita. Terdapat 3 (tiga) pilihan format template yaitu XHTML template jika template akan kita gunakan untuk website kita sendiri (tidak menggunakan framework tertentu), Blogger template untuk mendownload template dalam format blogger dan WordPress template untuk menjadikan template compatible dengan WordPress. Sayang pada saat tutorial ini dibuat, pilihan WordPress temlate belum bisa digunakan.

Download Template

Selanjutnya file akan didownload dan siap untuk digunakan. Gampang kan?? Semoga bermanfaat.