1.6.13

Tutorial : Pasang Template Sendiri (Denim)

Author : Nabila Medan Time : 6/01/2013 04:53:00 PM Total Comment : 31 Label :

Assalamualaikum.
Okay, hari tu ada yang tanya macam mana nak pasang template sendiri.. Jadi, nab cubalah nak tolong korang. Pastikan korang dah buat template korang dekat photoshop, dah crop bahagian header, body dan footer dia eh? Sudah?? Nab bagi contoh ya. Yang atas template siap, yang gambar bawah tu, template yang sudah dicrop ok

PASTIKAN KORANG DOWNLOAD FULL TEMPLATE DAHULU SEBELUM TERJADI APA-APA YANG TIDAK DIINGINI
Cara Pasang Header Blog
1. Dashboard > Layout > Edit Header > Choose File *header korang* > Dah siap loading > Save
macam biasa korang upload header. Faham??
2. Dashboard > Template > Edit HTML > Ctrl + F, search code #header {
klik kotak code sebelum korang tekan Ctrl + F tu, kotak search akan timbul dekat dalam kotak code. Faham??
3. Dah jumpa code #header { ? Buang segala anak-anak code nya. Ganti dengan code baru ni
width tu berdasarkan width header korang okay.
width: 1000px;
margin: 0 auto;
color: transparent;
padding: 0;
font: $headerFont;
4. Preview dan save template

Cara Pasang Body Blog
1. Dashboard > Template > Edit HTML > Ctrl + F, search code #content-wrapper {
klik kotak code sebelum korang tekan Ctrl + F tu, kotak search akan timbul dekat dalam kotak code. Faham??
2. Cara yang sama, buang anak code tu dan ganti dengan code baru ni..
Upload gambar body blog korang dekat imgur.com dan ambil direct linknya. Width tu pun berdasarkan width korang okay
width: 1000px;
background: url(DIRECT LINK BODY BLOG KORANG) repeat-y;
background-position: center top;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
3. Preview dan save template

Cara Pasang Footer Blog
1. Dashboard > Template > Edit HTML > Ctrl + F, search code #footer {
klik kotak code sebelum korang tekan Ctrl + F tu, kotak search akan timbul dekat dalam kotak code. Faham??
2. Cara yang sama diguna sekali lagi.. buang anak codenya dan ganti dengan code baru ni
Upload gambar footer korang dekat imgur.com dan ambil direct linknya. Width dan height berdasarkan korang punya width dan height footer tu.
clear: both;
text-align: center;
background: url(DIRECT LINK FOOTER KORANG) no-repeat;
height: 58px;
background-position: center;
3. Bawah code #footer { tu ada code #footer. widget { kan? Buang semua anak code tu.
4. Preview dan save template

Dah siap!! Ada apa-apa masalah? Komen eh!

31 comments

Saturday, June 01, 2013 5:06:00 PM Delete! [Reply Comment]

Menarik lah tuto ni !~

Saturday, June 01, 2013 5:10:00 PM Delete! [Reply Comment]

Akak, cemana nak tau anak-2 code dia tuu? :)

Saturday, June 01, 2013 5:18:00 PM Delete! [Reply Comment]

cara nak pasang template tu camne? saya nak header + footer tu lah

Saturday, June 01, 2013 5:39:00 PM Delete! [Reply Comment]

Kak Nab bagi freebies boleh ? Hehe

Saturday, June 01, 2013 5:45:00 PM Delete! [Reply Comment]

kena try ni

Saturday, June 01, 2013 6:02:00 PM Delete! [Reply Comment]

hye,, aka mcam mne nak buat template sendiri.. mcam panjang dan lebar tu.. nak berapa??

Saturday, June 01, 2013 6:12:00 PM Delete! [Reply Comment]

serius, comel sangat. suka tgk. nak buat tp kena ubah bnyk. tggu masa yg sesuai. :D

Wah menarik akan ku cuba..Thanks Nab sbb kongsi tuto ni :)
Memula kita ken design full template kat PS yer.Kemudian bru kt crop kepada 3 bhg ek.header,content & footer camtu ke?

Saturday, June 01, 2013 7:31:00 PM Delete! [Reply Comment]

Wah! Interesting! Thanks Nabila bagi tutor ni.. =)

Saturday, June 01, 2013 7:40:00 PM Delete! [Reply Comment]

bagus nyer tuto niy :) anyway thx dear :)

Saturday, June 01, 2013 8:26:00 PM Delete! [Reply Comment]

rajinlah nabila ni..:D

Saturday, June 01, 2013 8:30:00 PM Delete! [Reply Comment]

thanks^^

Saturday, June 01, 2013 8:47:00 PM Delete! [Reply Comment]

tq nabila...terbaik..inilah tuto yang kathy tunggu2 selama ini..

Saturday, June 01, 2013 9:20:00 PM Delete! [Reply Comment]

hai,kenapa tak jadi,bahagian body tu?

Saturday, June 01, 2013 10:33:00 PM Delete! [Reply Comment]

@Jannatul Ainnianak-anak code yang bawah dia SEBELUM tanda "}"

Saturday, June 01, 2013 10:33:00 PM Delete! [Reply Comment]

@Farsya Izzati Widodo buat dulu template awak..

Saturday, June 01, 2013 10:34:00 PM Delete! [Reply Comment]

@Aina Misha biasa width 1000px

Saturday, June 01, 2013 10:35:00 PM Delete! [Reply Comment]

@Aina Misha takjadi macam mana, dia senget ke apa

Saturday, June 01, 2013 11:26:00 PM Delete! [Reply Comment]

x,bukan..tapi..dia jadi jarak-jarak,pastu macam rosak

Sunday, June 02, 2013 9:59:00 AM Delete! [Reply Comment]

waa.. BLEH TRY NI.. NAK LETAK HEADER KUCENG..

done follow sini lama dh..

dari segmen :
http://honeyoyeke.blogspot.com/2013/06/3rd-annivesary-ga-blog-by-emas-putih.html

Sunday, June 02, 2013 3:53:00 PM Delete! [Reply Comment]

salam dari bunda...

Sunday, June 02, 2013 5:55:00 PM Delete! [Reply Comment]

wa..!!! thanks akak menjadi.. tapi saye gune template akak yang 'Love is Simple' tu.. pastu saye tkar2.. hehe.. tpi akak, mcam mne nak nak bagi post tu.. center arr..?? :)

Sunday, June 02, 2013 9:27:00 PM Delete! [Reply Comment]

Thanks tutorial ni! Tapi, tak perlu nak revert template dulu ke sebelum masukkan code sendiri ni? Ke terus masukkan je?

Monday, June 03, 2013 12:40:00 PM Delete! [Reply Comment]

@Aina Nasha♥ post mana??

Monday, June 03, 2013 11:36:00 PM Delete! [Reply Comment]

thanks sharing

Wednesday, June 05, 2013 11:33:00 AM Delete! [Reply Comment]

tak jadi lah :( makin rosak blog saya

Saturday, June 08, 2013 5:43:00 PM Delete! [Reply Comment]

wah menarik ! tapi macam mana nak buat template sendiri kat ps ? please ajar saya :(

Sunday, June 09, 2013 1:44:00 AM Delete! [Reply Comment]

salam nabila. klau boleh tau brapa yew weight utk buat template sendiri kat ps tu yew? :)

Saturday, September 21, 2013 11:34:00 PM Delete! [Reply Comment]

Nab.. Akak dah cuba buat.. Part Header & footer okay.. Tapi part body tu kenapa tak jadi ekk? Help please.. Huhu..

Sunday, November 03, 2013 1:27:00 PM Delete! [Reply Comment]

bagi freebies mcm atas tu blh?

Post a Comment
Related Posts Plugin for WordPress, Blogger...