Tuesday, May 17, 2011

Tutorial : Cara Tambah 2 Column Bawah Post.

Salam. Entri tutorial ni khas untuk haiqal, si jiwa gua. Tadi dia ada komen tanya pasal 2 column bawah post ala ala Beautifulnara. Aku pun godek sikit...senang je nih. Menarik gak kalau ditambah kat blog..Smart siot.Wokeh, papehal pun, pergi terjah blog testing aku ni dulu untuk lihat demo : Silampuneonpic

Yang ni la yang direkues..



Cara Tambah 2 Column Bawah Post.

Langkah 1
  • Go to Design >> Edit Html >> Expand Widget Template
  • Tekan keyboard Ctrl + F dan cari kod ini :   
  • ]]></b:skin>
  • Next, copy kod dibawah : 
  • #magazine-left {
    width: 285px;
    float: left;
    }
    #magazine-right {
    width: 285px;
    float: right;
    }
  • Paste kod tersebut atas kod  ]]></b:skin>
  • Sila edit sendiri Width tu untuk kelebaran column korang nanti.

Cara Tambah 2 Column Bawah Post.

Langkah 2
  • Tekan keyboard Ctrl + F dan cari kod ini :   
  • b:widget id='Blog1'
  • Dah jumpa kod tu ? Good job !
  • Anyway keseluruhan code akan nampak seperti dibawah : 
  • <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
    </b:widget>
    </b:section></div>
  • Untuk meletakkan dua column di bawah post korang, sila copy Code Column dibawah : 
  • <b:section class='sidebar' id='magazine-left' showaddelement='yes'>
    <b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
    </b:section>

    <b:section class='sidebar' id='magazine-right' showaddelement='yes'>
    <b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
    </b:section>
  • Paste kod tersebut antara </b:section> dan </div>. Contoh macam kat bawah ni :
  •        <div id='main-wrapper'>
            <b:section class='main' id='main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
            </b:widget>
            </b:section>Paste Code Column Disini</div>
  • Pastikan kod korang nampak macam ni kedudukannya : 
  • Part ni akan melecehkan kalau korang tak jumpa dua bijik kod ni </b:section></div> So, aku harap korang scroll bawah dan bawah lagi cari kod pengakhir </b:section> tuh ok.
  • Save dan siap !
 Selamat maju jaya beb. Inspirasi : Tutorial Melayu




 

Designed by Alieff Artwork