Pertama sekali,ini adalah versi Bahasa Malaysia yang dialih dari satu laman web jerman..wah2..haha..
Pertama sekali kita perlu menambah CSS kod ke dalam blogger anda dan kemudian di HTML. jADI
tanpa melengahkan masa,mari ikuti langkah ini, Ikuti satu persatu,kalau silap sikit,ia tak akan menjadi- Pergi ke Blogger > Design > Edit HTML
- Backup Template anda
- Cari ]]></b:skin> (tekan ctrl+F)
- Just above ]]></b:skin> paste the code below,
/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
5. Kemudian,cari </body>cari kod berikut,dan paste above </body>
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
6. Save template dan anda dah selesai!
Sekarang pergi ke Page Elements dan tambah widget anda di kotak yang baru kelihatan,seperti ini ,
Di atas.anda perhatikan ada 4 default dan anda boleh menambah sebanyak mana widget yang anda mahu di setiap column. Jika anda ingin menambah atau mengurangkan bilangan kotak yang menegak,ikut langkah ini.
Bagaimana nak Customize Widget ini?
Saya akan permudahkan. Satu-satunya yang anda perlu ubah bergantung kepada template anda ialah lebar widget dan jumlah kolum menegak.
1. Untuk mengurangkan atau meningkatkan kesemua lebar widget hanya perlu tukar width: 960px;
2. Jika hendak mengurangkan bilangan widget kepada tiga ,anda hanya perlu padamkan bahagian kod ini .
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
3. Atau anda hendak menambah kolum tambahan then tambah sahaja kod seperti di bawah <div style='clear: both;'/>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>
Ingat bahawa lowerbar# merujuk kepada bilangan kolum . Jika anda ingin menambah 5 kolum,anda hanya perlu ganti lowerbar# kepada lowerbar5.
Setelah anda menambah kolum kelima anda perlu tukar width: 23%; kepada width: 17%;
Anda akan ulangi langkah 3 untuk sebanyak mana kolum yang anda mahukan . tapi tiga dan empat dan lima kolum adalah yang standard. Menambah bilangan kolum lebih dari jumlah tersebut membuatkan template anda menjadi huduh.
