Situs Tutorial Komputer dan Buku Panduan Gratis | http://achmatim.net MEMBUAT TEMPLATE WEBSITE DENGAN MUDAH DAN CEPAT 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.com1, 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.
1
http://dotemplate.com
Tutorial ini dibuat oleh Achmad Solichin | http://achmatim.net
Page 1
Sittus Tuto orial Ko omputeer dan Buku Panduan P n Gratis | achmatim.nett h http:// Klik tom mbol “Custtomize and d download� untuk melakukan m pengaturaan tampilan n sesuai keinginan kita. Akaan ditampilkan sebuah h window berupa b tampilan websiite sesuai yang kita pilih.
Gambar 1. Customize and d download
Langkah 3. Klik paada bagian header (gambar 2) untuk u menggedit tampiilan bagian header (judul situs, gambaar dan background).
Gambar 2. Tampilan templa ate yang dipilih
Tutoriall ini dibuat oleh o Achmad Solichin | http://achm matim.net
Page 2
Sittus Tuto orial Ko omputeer dan Buku Panduan P n Gratis | achmatim.nett h http://
Gambar 3. Mengedit Header website
Pada gaambar di atas a terlihatt bagian‐baagian dari header h web bsite. Bagiaan (1) adalaah judul (title) utama. u Kita dapat mengganti text (tulisan), je enis font, ukuran dan w warna teks. Bagian (2) adalah Slogan 1 dan Slogaan 2 diman na kita juga dapat men ngatur teks,, jenis font,, ukuran dan waarnyanya. Bagian B (3) adalah a gam mbar (foreground imagge), kita daapat mengggunakan gambarr yang sudaah tersediaa, ataupun menguploaad gambar kita sendiri. Kita juga dapat mengattur beberap pa properties dari imaage seperti blur di sekkitar image.. Bagian (4)) adalah warna background d. Bagian (5) adalah pilihan pe engaturan untuk u masiing‐masing bagian. Bagian (6) kita dap pat klik tombol “Apply”” untuk melihat perubaahan pengaturan.
Langkah 4. Setelaah mengatu ur header, klik pada bagian meenu (navigaasi) atas daan akan ditampilkan pilihan n pengaturaan untuk baagian menu. Kita dapatt mengatur warna backkground menu, warna w tulisaan menu daan warna ho over menu. Klik Apply untuk u menyyimpan perubahan.
Langkah 5. Selanju utnya lakukkan hal yangg sama untuk bagian website w yan ng lain. [Gambar 4] Untuk bagian b conttent (isi) kitta dapat meengatur warna tulisan,, judul tulissan dan juga warna link. Un ntuk mempermudah pemilihan p w warna, terse edia juga “ffont galleryy” yang merupakan kombin nasi warna standar s web b. Tutoriall ini dibuat oleh o Achmad Solichin | http://achm matim.net
Page 3
Sittus Tuto orial Ko omputeer dan Buku Panduan P n Gratis | achmatim.nett h http:// nu sampingg) kita dapaat mengaturr ukuran lebar dari [Gambaar 5]. Untuk bagian sidebar (men sidebarr dalam pixeel. Dapat jugga diatur waarna teks, warna w link dan d warna sseparator menu. m
[Gambaar 6]. Untuk bagian fo ooter, kita dapat d menggatur tinggii dari footeer serta warrna teks dan linkk.
Gambar 4. 4 Edit typograffi bagian isi
Tutoriall ini dibuat oleh o Achmad Solichin | http://achm matim.net
Page 4
Sittus Tuto orial Ko omputeer dan Buku Panduan P n Gratis | achmatim.nett h http://
Gambaar 5. Mengatur Sidebar
Gambar 6.. Pilihan custom mize Footer
Tutoriall ini dibuat oleh o Achmad Solichin | http://achm matim.net
Page 5
Sittus Tuto orial Ko omputeer dan Buku Panduan P n Gratis | achmatim.nett h http:// t ttampilan te emplate Langkah 6. Jika sudah seelesai melaakukan perubahan terhadap (custom mize), klik tombol dow wnload dan file template akan didownload d ke komputter kita. Terdapaat 3 (tiga) pilihan format templaate yaitu XHTML X template jika ttemplate akan kita gunakan untuk website w kitaa sendiri (ttidak mengggunakan framework tertentu), Blogger templatte untuk mendownloa m ad templatte dalam fo ormat bloggger dan W Wordpress te emplate untuk menjadikan m n template compatiblee dengan Wordpress. W Sayang pad da saat tuttorial ini dibuat, pilihan Wo ordpress tem mlate belum m bisa digun nakan.
Selanjutnya file akan didownload dan siaap untuk diggunakan. Gaampang kan n??
Gambaar 7. Tombol Do ownload
Gambar 8.. Pilihan Forma at Template
Tutoriall ini dibuat oleh o Achmad Solichin | http://achm matim.net
Page 6