Mac 17, 2011
Apa itu Column ?? Column tu yang Add a Gadget tu lah.. kat sini aku nak tunjuk cara nak Tambah Column nie jadi 3..
Okeh, sekarang aku nak tunjukkan macam mana cara nak tambah Column kat Blogger Footer kita.. Kalau korang guna Default Templates, korang mesti perasan kan kat bawah (Footer section), korang cuma ada SATU je kan horizontal Add a Gadget kat Blogger Footer korang macam gambar kat bawah nie..
Aku boleh buat lebih baik. Jom kita Tambah lagi 3 Column kat Blogger Footer, dan letakkan Column yang asal kat bawah...
Apa yang BEST ?? :
► korang boleh letak banyak Widgets (Gadgets)
► Ubah je kat mana korang suka
► Widgets korang yang lambat sangat nak Loading tu boleh la letak kat bawah (Footer baru nie) supaya Laju Blog korang nak Loading nanti
Ok, jom kita buat. Kali nie, korang cuma perlu Copy-Paste je. ambik masa 7 minit je. Sebelum korang mula, Backup dulu Template korang (1 minit).
1. Kalau korang ada letak widgets (gadgets) kat Footer tu, padam dulu:
Pergi ke :
LAYOUT ► check tengok kot-kot korang ada letak Gadget kat Footer tu ► Kalau ada, klik kat Edit dan ► Remove
ATAU, korang cuma ubah Gadget tu letak kat tepi (Sidebar) dulu. Bila dah siap nanti korang boleh letak balik kat tempat asal dia.
2. Pergi ke LAYOUT ► EDIT HTML ► dan cari Kod HTML kat bawah nie (Ctrl+F untuk Shortcut :
]]></b:skin>
</head>
</head>
..Ok, Copy Kod HTML kat bawah nie lepas tu korang Paste kan kat ATAS ]]></b:skin> tu :
#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}
...Itu untuk gaya CSS yang baru untuk Footer korang.border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}
3. Sekarang, kebetulan korang dah kat LAYOUT ► EDIT HTML ► tu kan, korang cari Kod HTML kat bawah nie :
<b:section class='footer' id='footer'/>
...korang kena PADAMkan ia, dan GANTIkan dengan Kod HTML kat bawah nie :<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>
...Simpan Template..<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>
Itu saje !! Kalau ada masalah, bagitau yek ^_^
Senyum! ^_^
dik... akak baru tukar template... dan template ni mmg takde footer.. camne nak tambah footer mcm dlm blogspot template tu? satu kolum dah le.. camne eh...
BalasPadamGreat Site I Love This Site,Beautiful Template's Great Tutorial's Great Design's And All Feature's :-)
BalasPadamFree Blog