Menambah Kolom elemen di bawah posting

Menambah kolom elemen di bawah posting itu lah topik kita hari ini. karna posting sebelumnya membahas tentang design tamplate yaitu:

Menambah kolomelemen di atas footer

Menambah kolom elemendi bawah sidebar

Membagi Headermenjadi dua bagian

Nah biar lebih complate sekarang bagai mana pula cara untuk menambah kolom elemen di bawah posting. untuk membuatnya anda sedikit menambahkan kode CSS ke dalam tamplate. ikuti langkah-langkah di bawah ini.

Seperti biasa Log in dulu ke blogger

Tata letak

Edit HTML

Download tamplate anda terlebih dahulu untuk menghindarkan hal-hal yang tidak diinginkan.

Beri tanda centang di kotak kecil atas

Kemudian cari kode

#main-wrapper {
width: 410px;
float:$startSide;
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 */
}

Tambahkan kode berikut di bawah kode tadi

#mainbottom {
background:#ffffff;
border:1px solid #0B610B;
margin:0 0 0.5em;
padding:0.5em;
}

Sekarang kita membuat id untuk mainbottom tersebut. Cari kode ini:

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

Sisipkan kode berikut di bawah </b:section>

<b:section class='main' id='mainbottom' showaddelement='yes'/>

sehingga menjadi seperti ini

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

Sekarang simpan tamplate anda dan lihat hasilnya

pencerahan ilmu:

Author : Admin FO

Share this

Related Posts