Number of 666

October 15, 2010

Mengubah Tampilan Blog Sendiri

Filed under: Adi666 — adiprayit @ 9:15 am

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
. 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://domainanda.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:

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: