Saturday, November 13, 2010

Tutorial Post,Sidebar Widget Divider & Note Below Post

Salam . Hari nie nak buat 3 tutorial . HAHA , semua tutorial nie direquest oleh Young Hyun alaa yeobu/honey Minho tuu . Tak kenal ke ? Pergi laa blog dia , tapi lepas tengok tutorial nie oke ! I'll make it as brief as I can .


First tutorial ; Post Divider .

Oke , nie laa post divider aku .
  • Dashboard > Design > Edit HTML > Tick Expand Widget Templates
  • Press ctrl + f and search
<div class='post-footer-line post-footer-line-3'/>
  • Dah jumpa ? Then copy kod dekat bawah nie
<center><img height='20' src='URL OF YOUR PICTURE'/></center>
  • Paste kod tersebut di bawah kod <div class='post-footer-line post-footer-line-3'/>
  • Nanti akan jadi macam gambar bawah nie
  • Tukar URL OF YOUR PICTURE dengan kod gambar korang oke .
  • Preview and kalau jadi SAVE .

Second Tutorial ; Sidebar Divider .

Nie Sidebar Divider aku .

  • Dashboard > Design > Edit HTML > Tick Expand Widget Templates
  • Press CTRL + F and search
.sidebar .widget, .main .widget {
border-bottom:1px dotted;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
  • Then , separate it into 2 parts and dia akan jadi mcm bawah nie
.main .widget {
border-bottom:1px dotted;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.sidebar .widget {
border-bottom:1px dotted;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
  • Lepastu tambah kod dekat bahagian .sidebar .widget { sikit .
  • And bahagian tuu akan jadi mcm nie
.sidebar .widget {
border-bottom:0px dotted;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://i33.tinypic.com/34eq9sl.jpg);
background-position: bottom;
background-repeat: no-repeat; 
}
  • BLUE ; kita kena tukar sikit padding dia so divider tuu akan terletak elok je !
  • ORANGE ; bahagian yg kita dah tambah tadi .
  • PURPLE ; korang tukar laa dengan divider yg korang dah cari . And akan jadi mcm nie
  • Preview and kalau jadi Save Templates .

Third Tutorial ; Note Below Post .

Nampak kan benda tuu lepas post aku ?
  • Dashboard > Design > Edit HTML > Tick Expand Widget Templates
  • CTRL + F and search 
<data:post.body/>
  • Copy kod dekat bawah nie
<hr/><center>Do Like and Comment :)</center><hr/>
  • Then paste dekat bawah kod <data:post.body/> 
  • So dia akan jadi mcm nie
  • Preview and save templates !
  • Ada orang tanya macam mana nak tukar colour tulisan nie . Oke senang jee ^^
  • Just tambah 
<p style="colour:#ff6699"> your words </p>
  • So nanti semua code akan jadi macam nie
<hr/><center><p style="colour:#ff6699">Do Like and Comment :)</p></center><hr/>

  • Yang aku highlightkan hitam tuu korang tukar lah dengan color code korang sendiri dekat sini .

Perghh , tiga tutorial sekaligus . Takpe , sharing is caring kan ? So dah try comment laa kalau jadi oke . =)


27 comments:

Young-Hyun said...

young hyun laa sayang . bukan hoon .
mcm bihoon jea . nh sedey nh :(

Azmiera said...

@Young-Hyun oppss , sorry darl . oke i tukar , jgn sedih . hahah =)

Zahidah Rustan said...

assalamualaikum ! saye cube nk bwat post divider yg mcm u tnjuk
tp did not success..
x bleh amik HTML code keh ?
then i copy image url tp xjadi jugak ...
blog saye ade bnyk kekurangan .. saye x suke blog saye :(((
can u help me dear nice blogger ?
thanks .. :))

Azmiera said...

@Zahidah Rustan yes dear . but blog u yg mana satu eh ? saya boleh tolong kalau awak nak =)

Zahidah Rustan said...

@Azmiera
really ? syukran .. :))
awk nk url blog sye keh ?

Azmiera said...

@Zahidah Rustan yes , i'm ok . betol ke nie awk bg sy buat ? :11

Zahidah Rustan said...

@Azmiera bgi url blog jew dh ckup ? okeh .. :)) http://aquagurl96.blogspot.com/
saye nk isi blog ni dgn kisah2 pngajaran .. by the way trime kasih untok awak .. im appreciate it ..:))

Azmiera said...

@Zahidah Rustan ahaha , kena laa bg pass and email . btw , awk ada fb tak ? bg smua tuu through fb keh ? :06

Zahidah Rustan said...

@Azmiera fb? Ade .. ade .. awak search je zahidah rustan .. x pown search email saya zahidahzahidah@yahoo.com thanks yaa ! nnti kite brhubung di Facebook ;))

Azmiera said...

@Zahidah Rustan okies , ^^

qeen.qeen.qeen. said...

hyepp! nice blog mehh. saye try wat poat divider tuhh,tp x jadi ponn.
aiseehhh.sdeh nie. hee.
boleh ajar takk? nak nice kan blog larhh.
thanx

Azmiera said...

@qeen.qeen.qeen. yeke takk jadi ? hmm , org len buat oke jee . tapiikalau awak nak tolong saya buat saya oke jee . yang lain buat jadi kee ?

qeen.qeen.qeen. said...

hee.takpe la.pas spm nanti saya try ag oke?
klaw tak jadi jugak,awak tlong. hoo.
nway,thanx!

Azmiera said...

@qeen.qeen.qeen. okep , try your best and good luck for your spm sis . :01

Nadia said...

sis , nape saye buat x jadi ? mase preview , gambar keluar , tp kecik pastu ade garisan keliling divider tu .. mcm mane nk buang eh ?

Azmiera said...

@Nadia dear , pasal height tuu boleh tukar 20 jadi 30 or bape yg kamu nak . yang pasal border tuu nanti akak cari cara nak buang dia oke . ^^

Nadia said...

sis , mcm mane nk tukar colour note bwh post ya ?

Azmiera said...

@Nadia dear , kamu ada fb . kena bagi melalui fb sebab dekat comment nie tak diterima . apelah blog nie =.="

Syakira Qaisara said...

awk, yang sidebar divider toh, tak jadik, tolong buatkan boleh tak, and and, add kite kat fb, SYAKIRA QAISARA

Myesha Aqillah said...

akak kat mane boleh cri ? post divider ?

Azmiera said...

@Myesha Aqillah dear , sorry late . boleh cari dekat photobucket . taip jee divider ^^

Yana AmaneenA said...

awk,awk boley tlg tgkan blog sye..blog sye ta cntek la... srba kkurangan..n stu lagi,sye na wat header tpi laptop sye ta de adobe photoshop la. :13

Azmiera said...

@Yana AmaneenA sure dear . awk nk sy tolong buat ape ? hmm , pasal header tuu sy x boleh nk tolong awak sbb lappy sy pon x de PS . sorry ehh tanya lah kawan2 yg pandai buat , mintak dorg tolong ^^

haswani said...

takjadi pon post divider tu.sediih ni.

Azmiera said...

@haswani dah ikut betul-2 ke ? maybe saiz dye kot atau salah letak kod ?

haru_maki said...

camne nak tukar colour tulisan tu?

Azmiera said...

@haru_maki saya dah tambah dekat tutorial tuu mcm mna nak tukar color tulisan tuu . dekat comment tak boleh tunjuk . adehh =.='