Posted by AlmansuQie™

Emoticon Di Post Entry

Emoticon Yahoo! Messenger..Sebenarnya dah ramai yang buat tutorial ni.. Ana tulis balik untuk simpanan peribadi..Ok untuk yang ini, caranya begini..

Posted by AlmansuQie™

Blogspot Dengan Gaya Wordpress

Pernah tengokkan wordpress?? Kali ini kita buat template kita macam wordpress skit. Kita main sorok-sorok widget.

Posted by AlmansuQie™

Cara Membuat Favicon

Assalamualaikum..ok..Kalau kita buka sesuatu website atau blog maka kekadang kita tengok ada gambar atau icon pada address bar (kat tempat alamat url tu).

Posted by AlmansuQie™

Membuat Label Flash (Blogumus)

Ha tutorial ni Ana ambil dari Blogger Buster. Cantik kalau dapat buat label macam ni..Ini untuk simpanan Ana, kalau Antum minat boleh ikut tutorial ni..

Posted by AlmansuQie™

The Cutest Blog On The Block

Teringin untuk menggunakan transparent background macam ini??Menarik kan?? Ada bayak lagi..Boleh dapatkannya di LamanIni. Untuk menampalnya di blog senang saja.

Posted by AlmansuQie™

Cara Membuat Menu Tab View

Apakah makhluk yang bernama Menu Tab View ni?. Boleh tengok sebelah kanan blog ni. Ana isikan dengan tips2/artikel2 di dalamnya. Kotak menu ni sangat berguna.

Menambah Lowbar Pada Template

Atas permintaan dari seorang sahabat yang ingin menambah beberapa colom dibahagian bawah template. Macam blog ni la. Sekaligus dapat menjimatkan ruang yang terhad pada sidebar. Ok terus kepada cara penanaman kod yer..

1. Macam biasa loggin dan terus ke bahagian Edit HTML.

2. Tambahkan kod css ini dimana yang Antum suka, yang penting sebelum kod ]]></b:skin>.

/* ----- LOWER SECTION ----- */
#lower-wrapper {
margin: 0px 0px 0px 0px;
padding: 0;
width: 865px; /* Panjang kotak utama */
font: georgia;
color: #0066cc;
background: #000000; /* Background Kotak Utama */
border: 3px solid #F2F2F2; /* Border Kotak Utama */
}
#lowerbar-wrapper {
float: left;
margin-left: 10px;
padding: 0px 0px 0px 0px;
width: 200px; /* Panjang Lowerbar */
line-height: 1.0em;
background: #D8D8D8; /* Background Lowerbar */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 840px;
text-align: center;
background: #D8D8D8;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {
float: left;margin-left: 10px;
padding:0px;
}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 10px 0px 0px 0px;
}
.lowerbar h2 {
margin-left: 7px;
padding: 5px;
color: #ffff66;
font: georgia;
font-weight: bold;
font-size: 10px;
border: 3px ridge #F2F2F2;
text-align: center;
text-transform:none;
background:#000000;
}
.lowerads h2 {
margin-left: 7px;
padding: 5px;
color: #ffff66;
font: georgia;
font-weight: bold;
font-size: 10px;
border: 3px ridge #F2F2F2;
text-align: center;
text-transform:none;
background:#000000;
}
.lowerbar ul {
list-style:none;
margin-left:0px;
padding:5px;
}
.lowerbar ul li {
list-style: none;
background: url(alamat icon Antum) no-repeat;
margin:0;
padding:0px 0 2px 19px;
line-height: 1.3em;
}
.lowerbar a {color: #006699; text-decoration: bold;}
.lowerbar a:hover {text-decoration: none;color: #C94093;
}
.lowerbar a:visited {text-decoration: none; color: #6131BD;}


3. Perhatikan kod2 diatas, cuba suaikan dengan template Antum. Tengok kod2 berwarna merah. Kod Warna Disini. Seterusnya cari kod ini..

<div id='footer-wrapper'>


4. Dah jumpa tambahkan kod berikut diatasnya.

<div id="lower-wrapper">
<div id="lowerads-wrapper">

<b:section class="lowerads" id="lowerads" preferred="yes">
</b:section>
</div>

<div style="clear: both;">

<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> <!-- end lower-wrapper --></div></div>



5. Selesai bahagian penanaman kod..Sebelum save lebih baik Preview dulu. Kalau berhasil Alhamdulillah, jika tidak, jangan sedih.. Mesti ade perbezaan pada kod template Antum..Cuba alihkan kod pada step 4..Mesti Berani mencuba yer..

p/s : Kalau ade kemusykilan, nyatakan pada komen dibawah yer...

Tips² Terkait



6 Komentar:

kembara™ May 8, 2009 at 11:03 AM  

salam..
mekasih banyak2..Baarakallahufiik..
alhamdulillah,jadi jugak..tapi xla perfect mane..insyaAllah akan diperbaiki..:D:X

AlmansuQie™ May 8, 2009 at 6:54 PM  

wasalam...
sesama..ok la tu berjaya..biasakn dgn kod CSS tu.. nati perfect la tu.. ;)

azwanalaman May 12, 2009 at 4:32 PM  

Ada masa saya akan cuba... :D

CIKGU NAMAN August 28, 2009 at 12:39 AM  

salam..saya punya ada background hitam..pastu kalau customize yang 3 gadget bagi besar sikit@ nak buat 2 je mcm mana??TQ

WaK JeNg September 19, 2009 at 8:31 PM  
This comment has been removed by the author.

Post a Comment

1. Berilah Teguran/Komen Walau Sepatah Kata..
2. Komenlah Dengan Nama dan Blog Sendiri
3. Boleh Guna Kod² Seperti Ini <b>, <i>, <a>

© Hak Cipta Terpelihara 2008 [:: AlmansuQie ::]
http://almansuqie-tips.blogspot.com
Template Designed By: AlmansuQie™

Paparan Lebih Kemas Dengan Firefox