Berlatih Mengubah Tampilan Blog Sendiri

WordPress

Meskipun banyak sekali tersedia theme gratis untuk WordPress, mungkin banyak blogger yang tergelitik untuk mengubah tampilan blognya agar sesuai dengan keinginannya seperti warna dan jenis font yang digunakan. Jika blogger tersebut sudah berpengalaman dalam desain website, hal ini tentunya tidak menjadi masalah. Namun, bagaimana dengan blogger yang belum mengerti seluk beluk desain website?

Langkah 1 : Mempelajari kode HTML dan CSS

Hal pertama yang harus dilakukan tentu saja adalah mempelajari kode HTML dan CSS sehingga Anda akan mengerti apa yang akan Anda lakukan. Jika Anda sudah lebih mengerti tentang hal ini, maka lanjutkan dengan langkah kedua.

Langkah 2 : Menyiapkan file yang akan diubah

Mengubah kode HTML dan CSS secara offline perlu untuk dilakukan agar kita tidak merusak layout blog kita yang ada. Web designer profesional biasa meng-install webserver dalam komputer mereka untuk melakukan tes offline. Namun, untuk berlatih mengubah tampilan blog sendiri, ada cara lain yang bisa digunakan.

1. Simpan halaman tampilan salah satu artikel pada blog Anda sebagai file HTML. (File->Save As)
2. Simpan semua gambar dan background yang digunakan dalam blog.
   Jika Anda menggunakan Firefox 3, buka menu Tools->Page Info. Klik pada tab media, dan simpan semua file yang muncul pada daftar.
3. Simpan juga file CSS yang digunakan.
   Lihat halaman HTML yang disimpan, cari baris seperti ini:

   <link rel="stylesheet" href="http://domain.com/style.css" type="text/css" media="screen" />

   Arahkan browser pada URL yang disebutkan pada kode tersebut. Lalu simpan kode yang ditampilkan.

4. Kumpulkan semua file yang disimpan pada satu folder. Atur struktur folder agar sesuai dengan struktur yang digunakan pada blog Anda. Simpan semua file seusai struktur folder yang digunakan pada blog Anda.
5. Ubah semua URL pada halaman HTML yang telah disimpan menjadi URL lokal. Misalnya, http://domain.com/images/gambar.gif ubahlah menjadi ./images/gambar.gif. Ini perlu dilakukan agar gambar yang digunakan pada saat pengubahan secara offline adalah gambar yang telah tersimpan pada komputer Anda.
6. Buka file HTML yang disimpan pada browser, apabila tampilan telah sama dengan tampilan blog Anda secara online, maka Anda bisa memulai langkah ketiga.

Langkah 3 : Mengubah kode pada file CSS

Pada prinsipnya, mengubah tampilan blog sendiri dengan cara ini hanya mengubah file CSS yang digunakan dan membiarkan struktur theme apa adanya sebagaimana telah saya perkenalkan pada artikel sebelumnya tentang Desain Website dengan CSS. Setelah persiapan file telah selesai maka yang perlu Anda lakukan adalah mencari hubungan kode HTML dan CSS dan mengubah kode CSS yang tepat. Berikut contohnya;

• Jika pada halaman HTML tertulis:
  maka, layout untuk ini pada file CSS terletak pada baris yang dimulai dengan kode #header.
• Jika tertulis:
  , maka terletak pada .pagetitle.

Ubah baris per baris dan refresh tampilan halaman HTML pada browser untuk melihat perbedaannya.

Langkah 4 : Upload file CSS

Setelah puas dengan hasil ubahan tampilan, silakan upload file CSS yang telah diubah menggunakan FTP ke server blog Anda. Sebelumnya jangan lupa untuk melakukan backup terhadap file CSS yang digunakan.

Tips CSS dan kode-kode yang biasanya digunakan dalam desain tampilan website, akan saya jelaskan pada artikel saya selanjutnya.