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 Colom Di Post Body

Alangkah seronoknye mengedit template ni..nak pula bila berhasil kan.. mesti senyum sorang2.. sebenarnya kod2 HTML ni mudah je untuk difahami, kalau hari2 duk mengadap je.. Ok, kali ini Ana nak kongsi cara menambah elements pada post body. Dah lama nak publishkan tapi masa tak mengizinkan. Caranya begini yer.. Disarankan untuk Download Full Template bagi yang masih baru sebagai langkah berjaga2.

1. Masuk ke Edit HTML, tambahkan kod dibawah sebelum kod ]]></b:skin>

/*Kotak Post
-----------------------------*/
#kotakpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#kotakpost{
width:530px;
}
#kotakkiri{
width:250px; /*lebar kotak kiri*/
float:left;
margin:4px;
}
#kotakkanan{
width:250px; /*lebar kotak kanan*/
float:right;
margin:4px;
}


2. Perhatikan kod yang berwarna merah diatas, pastikan sama dengan lebar main-wrapper di blog Antum. Kalau nak tahu lebarnya cari kod ini.

#main-wrapper {
width: 410px;


3.Seterusnya bahagikan kotak kiri dan kanan, perhatikan kod biru diatas yer.

4. Selesai langkah pertama, seterusnya cari kod berikut.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


5. Ini paling penting, tambahkan kod dibawah ini. Lihat contoh.

<div id='kotakpost'>
<b:section class='kotakkiri' id='kotakkiri'/>

<b:section class='kotakkanan' id='kotakkanan'/>
</div>


6.Untuk dua kotak dibawah post body tambah begini.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='kotakpost'>
<b:section class='kotakkiri' id='kotakkiri'/>

<b:section class='kotakkanan' id='kotakkanan'/>
</div>
</div>


7. Untuk dua kotak diatas post body tambah begini.

<div id='main-wrapper'>
<div id='kotakpost'>
<b:section class='kotakkiri' id='kotakkiri'/>

<b:section class='kotakkanan' id='kotakkanan'/>
</div>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


8. Alhamdulillah selesai dan klik save... Insyaallah akan muncul 2 kotak diatas atau dibawah post body Antum pada page elements.

Selamat mencuba..

Tips² Terkait



10 Komentar:

H@Fez94 March 8, 2009 at 8:19 AM  

nak tanya..apa guna menanbah colum di post body? Macam mana nak tengok? Boleh bagi contoh?

AlmansuQie™ March 8, 2009 at 8:56 AM  

contoh macam blog ana ni la...atas dan bawah post ade colom yg ana isikan dengan widget2..kira blh jimatkan ruang di sidebar.

Ana,  April 15, 2009 at 7:35 PM  

salam...

kalau nak tambah satu kotak saja atas post, apa yang perlu di edit pada html yang di tunjukkan?

AlmansuQie™ April 15, 2009 at 9:24 PM  

cuba buang salah satu kotak.. pastu pada kotak yg tinggal tu panjangkan lebarnya.

Sayanik August 4, 2009 at 1:36 PM  

sy tak pandai nak tambah..tak jumpe nak tambah kod kotak kat mane. b:skin...kat mane ea..

Sayanik August 4, 2009 at 6:09 PM  

susah betul nak tambah column. Langkah pertama sy tak dapat buat. adekah b:skin tu di bawah 'head'?

rue_3tee August 9, 2009 at 3:08 AM  

nak senang cari code.. tekan ctrl+F pastu isi code yg korg nak cari..

ABUNAWAS December 6, 2009 at 6:30 PM  
This comment has been removed by the author.
noor December 1, 2010 at 7:38 AM  

salam....akak nk tanya cam mana akak nk masukkan configure page list boleh ajarkan akak dengan teperinci....sb akak dah cuba tp x boleh pun...

Akademi Telkom Jakarta February 28, 2015 at 1:04 PM  

makasih infonya seputar colom di post body

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