Wednesday, September 15, 2010

Designing Your Own Blog Template

Ari ni aku bosan sket. So aku merajinkan diri untuk mengajar korang camne nak design sendiri template untuk blog korang. Senang je nak wat nih. Cuma leceh sket la time nak upload dia nyer html code. Bila gambar yang kita upload tu tak sesuai, kena ubah2 pulak size gambar.

Yang penting dalam designing template ni, korang kena ada akaun photobucket atau yang seangkatan dengan nyer. Supaya korang bole upload image for the template, pastu paste url image itu kat html code. Untuk design template sendiri, korang kena design atau create 7 images yang penting untuk template tersebut. 7 images tersebut adalah seperti berikut:


1. template background
2. background layer
3. header
4. sidebar separation
5. posting symbol
6. post footer
7. template footer


As a basic html code, yang macam aku gunakan, korang bole download kat sini. Lepas download, korang just kena paste url image yang korang create aje. Yang laen biarkan aje.


1. Template background

Template background ni yang background nyer image ler. Mostly aku guna wallpaper je. Recommended size 960 x 960. Tapi kadang2 aku guna je wallpaper yang size lagi besar, without changing its size. Pastu korang bole paste url korang, macam yang kat bawah ni.




Antara contoh background design yang aku design atau amek kat internet.


(960 x 960)

(960 x 960)


2. Background layer

Layer ni yang akan jadi main body untuk template korang sebenar nyer. Kedudukan background layer ni akan berada atas background korang. Recommended size 1000 x 77 je. Tapi dia repetitive sampai ke bawah.




Contoh layer:


(1000 x 77)

(1000 x 92)


3. Header

Header ni la yang paling menarik dan akan menunjukkan kekreatifan korang. Lagi pun, header ni kan memang memainkan peranan penting untuk setiap blog. Jadi, header kena la menarik. Recommended size 1000 x 460.




Antara header design yang wat sendiri.


(1000 x 460)

(1000 x 460)


4. Sidebar separation

Sidebar separation ni more like simbol yang akan separate antara widget2 kat sidebar korang. Recommended size 240 x 14.



Contoh sidebar separation.

(240 x 14)

(232 x 20)


5. Posting symbol

Simbol yang dimaksudkan adalah simbol yang akan muncul kat sebelah title post. Yang ni kalau bole, seragamkan dengan font size title korang. Baru la nampak cantik. Recommended size 75 x 50.




Kat bawah ni antara contoh symbol2 yang aku gunakan untuk template yang aku design sendiri.


(75 x 50)

(46 x 37)


6. Post footer

Post footer adalah footer yang ada kat each post yang korang buat. Just to make korang nyer entri lebih menarik la untuk ditonton. Recommended size 650 x 78.




Dan antara contoh post footer.


(650 x 78)

(650 x 78)


7. Template footer

Template footer ni akan berada kat bawah skali kat blog korang. Sama cam header, footer yang ni pun kena wat cantik2, bagi matching ngan header korang. Recommended size 1000 x 85.




Contoh footer.


(1000 x 85)

(1000 x 85)


Selaen daripada yang kat atas ni, korang pun bole edit beberapa perkara lagi. Tapi tak crucial mana pun. Tak tukar pun takpe. Antara nyer macam yang kat bawah ni.






Lagi satu tips yang aku nak sampaikan adalah berkenaan dengan widget. Tips ni adalah untuk memudahkan korang. Nanti bila korang guna code yang aku bagi ni, takut widget2 korang ada yang hilang lak kan. Jadi nak senang, ikut instruction aku. Korang search kat html code yang korang pakai skang, yang macam gambar kat bawah ni (kalo takde, agak2 yang serupa pun bole kot). Copy, pastu paste je kat coding aku.




Ok. Stakat ni je la yang aku bole bantu. Aku bukan terel pun bab coding2 ni. Yang senang2 je aku reti. Kot2 ada yang lagi pandai, bole la korang bagi link kat aku. Bole aku belajar lak. Yang mana yang terel2 tu, pasti korang lagi terel mengedit coding ni daripada aku.


Untuk link ke template2 yang aku design, korang bole lawati link2 kat bawah ni atau korang bole gi je blog Creativity Beyond Your Limit.



Template Hari Raya
Template Bleach
Template Ai (Love)
Template Donut

3 comments:

pepel said...

mls weh baca....pjg gile

aswadz said...

abg post utk diri sendiri sbnr nyer. hak3... kot2 la yg tulis kat kertas ni ilang. ada backup.

dan kot2 la ada org kat luar sana yg brminat nak wat template, tiba2 terserempak ngan blog abg. kan memberi inspirasi kat diorang.

pepel said...

ewahhhh

Related Posts Plugin for WordPress, Blogger...