Rekatambah Widget Pada Blog Layout (selesai)

[malaynux 0]

Salam all.. dan selamat hari pekerja.

Saya ada blog dan guna template 'pihak ketiga' - download dari btemplates.com.
Bila saya buka layout, ada sedikit sahaja 'tempat/lubang2 add a gadjet' dan tak banyak seperti template yang disediakan oleh pihak Google.

Gambar asal. Ada dua tempat sahaja 'add a gadjet'.

[img]http://s18.postimage.org/yf1gxs0ax/Widgetasal.jpg[/img]

Jadi.. kalau boleh saya mahu tambah sendiri ruang 'add a gadget'. gambaran lebih kurang seperti di bawah.. Tambah tiga lagi contohnya.

[img]http://s15.postimage.org/52fobk9nv/widget_add.jpg[/img]

Oleh itu, saya mohon putranians yang ada kepakaran atau tahu bab perihal reka dan tambah ruang 'add a gadjet' ni.

Wassalam.... Edited May 8, 2012 by malaynux

[malaynux 0]

Jumpa setelah di godek2 dalam alam maya :

Caranya :

- Masuk ke blogger > [b]Layout[/b] >[b] Edit HTML[/b]
- cari (search)[b] ]]></b:skin>[/b]
- pastekan kod dibawah [b]SEBELUM[/b] kod[b] ]]></b:skin>[/b] tadi

[CODE]
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
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;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
[/CODE]

- kemudian cari (search)[b] </body>[/b] dan pastekan kod dibawah di[b] ATAS[/b] kod </body> (yg dicari tadi)

[CODE]
<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 style='clear: both;'/>
</div> </div>
[/CODE]

- Save template anda dan boleh semak.

Nota :
Benda-benda yang boleh di ubah mengikut kesesuaian:

1. [b]background:#333434; [/b]
2. [b]width: 960px;[/b]
3. [b]background:#fff;[/b] and [b] width: 32%;[/b]
4. [b]color:#0084ce; [/b]- ubah warna tajuk
5.[b]font: bold 14px Arial, Tahoma, Verdana;[/b] - ejus tulisan
6. [b]border-bottom:3px solid #0084ce;[/b]
7. [b]border-bottom: 1px dotted #ccc;[/b]