Cara Bikin Blog
Tips ini saya tuliskan dengan tujuan agar sahabat yang mengalami kesulitan dalam menata
blog / web nya bisa ter atasi. Cara ini bisa pula dijadikan dasar untuk mulai membuat atau mendesain template sendiri.
Saya katakan aman , karena proses utak-atiknya tidak akan mengganggu web kita yg sedang online.
Dan saya katakan mudah karena kita cukup hanya “Mencontek” dari template yang sudah ada.
Cara Sederhana : Kita hanya menggunakan tool seadanya ( Yg ada di komputer kita )
Yaitu :
1.
Browser Mozilla Firefox
2. Microsoft Paint
3. Microsoft Office Picture Manager
4.
Template Blog dengan CMS Blogspot/themes wordpress.org
5. Notepad/microsoft Frontpage
Nah..yg kita bahas adalah cara yg kedua ini ya
Langkah pertama :
1. Buka web/blog kita yang mau di edit tampilan
Layout (Themes/template ) nya
2. Cari web lain yang menurut kita bagus, atau yg ingin kita tiru tampilannya . Atau bisa juga dengan mendownload nya
Langkah Kedua :
1. Di halaman
website kita , klik Tab ” File” di browser mozilla ,
2. Klik “Save as” dan simpan dengan nama terserah anda misalnya kita simpan dengan nama “Webku-edit” . Lalu web orang lain juga disimpan (Save as) dengan nama misalnya “Webcontoh-edit” (tanpa tanda petik”)
3. Simpan di folder di hardisk kita,
Lakukan hal yg sama dengan halaman web yg akan ditiru
4. Setelah di save as , maka akan tersimpan satu file ber ekstensi HTML (file HTML) dan satu folder yang isinya adalah semua yang dibutuhkan oleh “layout bayangan” (Folder isi )web kita agar bisa dibuka di browser
5. Kemudian klik dua kali file ber ekstensi HTML agar bisa terbuka di browser . maka “layout bayangan” web kita akan tampil sama persis dengan web asli nya.
Jika kita sedang online , maka semua nya akan tampil sempurna. Tapi jika tidak online ,maka ada beberapa image yang tidak akan muncul.
Solusinya , coba kita copy image yang ada di themes kita ke dalam folder
(Folder isi ) .
6. Kemudian untuk memulai mengedit nya . Kita klik kanan “File HTML ” tadi lalu klik “edit” , atau bisa juga dengan Klik kanan + Open with : pilih dengan notepad atau dengan MS front page.
PS : jadi file HTML ini kita buka dua kali , yaitu dibuka dengan browser mozilla agar bisa terlihat tampilan aslinya , dan juga dibuka dengan Notepad /frontpage , agar bisa di edit.
Untuk merubah dan menggeser misalnya lebar sidebar ,lebar postingan , footer , header dll , maka kita buka file style.css yang ada di (Folder isi) , yg tadi ter download.
Bandingkan dengan tampilan yg ada di web yg ingin kita tiru , baik itu file HTML nya , dan juga file style.css nya.
Catatan : Jika dihalaman web kita ada iklan adsense nya , maka ubahlah dulu angka pub id nya dengan huruf xxxxxx
contoh : PUB -ID : xxxxxxxxxx
Nah… sekarang saat nya kita coba2 untuk merubah atau mengedit , plus sekalian belajar men desain web dengan cara yang sederhana.
Sacara umum , template/themes itu biasanya terbagi menjadi :
Bagian keseluruhan halaman
Bagian Header
Bagian Sidebar
Bagian Body
artikel
Bagian Footer
Untuk keseluruhan halaman , pengaturannya akan ditandai dengan awalan :
body
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #body atau .body
Untuk Header , pengaturannya akan ditandai dengan awalan :
header
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #header atau .header
Untuk Sidebar pengaturannya akan ditandai dengan awalan :
sidebar
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #sidebar atau .sidebar
Untuk Body artikel pengaturannya akan ditandai dengan awalan :
post atau kadang content
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #post atau .post
Untuk Footer pengaturannya akan ditandai dengan awalan :
footer
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #footer atau .footer
Untuk Tab Navigasi… ini optional , tapi kadang kita perlukan.
nah Untuk Navigasi , pengaturannya akan ditandai dengan awalan :
navigaton atau kadang menu
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #navigaton atau .navigaton
Oke..itu dasar2 yg ada di themes/template kita…
Sekarang kita bahas struktur kode2 nya
Untuk Themes yg ada di wordpress.org (domain berbayar) sebenarnya lebih mudah , karena biasanya sruktur antara body, header,sidebar,post,dan footer , dan style.css semua nya dipisah
Yang agak sulit di blogspot , karena semua struktur file dijadikan satu halaman. yakni sbb :
<?xml version=”1.0″ encoding=”UTF-8″ ?>
………………………….dst..dst…
(disini tempat keterangan asal CMS)
<head>
……..disini berisi title blog dengan meta tag sllnya
<b:skin><