Cara Mudah Menambah Kolom di bawah Sidebar Blog

Cara Mudah Menambah Kolom di bawah Sidebar Blog

Cara Mudah Menambah Kolom di bawah Sidebar Blog - Pada postingan kali ini kita akan sama-sama belajar Bagaimana cara menambahkan kolom di bawah sidebar. Tentunya ini akan menambahkan tempat letakknya widget diblog kita. memperindah tampilan blog yang kita tekuni. Baiklah disini akan kita bahas 2 cara metode penambahan widget di bawah sidebar langsung saja ke poinnya.

Cara Menambah 1 Kolom Baru di bawah Sidebar Blog 

1. Login ke blogger sobat
2. Pada dasboard blog pilih template dan klik pada Edit HTML-nya
3. Tekan kontrol F cari seperti di bawah ini (biasanya berada di atas ]]></b:skin>)

#sidebar-wrapper{width:350px;float:right;word-wrap:break-word;overflow:hidden}

4. Tambahkan kode di bawah ini dibawahnya (Poin 3)

#bottom-col{width:350px;float:right;word-wrap:break-word;overflow:hidden}

5. Penerapannya leboh kurang seperti dibawah ini :

#sidebar-wrapper{width:350px;float:right;word-wrap:break-word;overflow:hidden} #bottom-col{width:#bottom-col{width:350px;float:right;word-wrap:break-word;overflow:hidden}

6. Cari kode seperti di bawah ini :

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML4' locked='false' title='' type='HTML'/>

</b:section>

</div>

7. Letakkan kode di bawah ini di bawah </b:section>

<b:section class='sidebar' id='bottom-col' preferred='yes'>

Penerapannya lebih kurang seperti di bawah ini :

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML4' locked='false' title='' type='HTML'/>

</b:section>

<b:section class='sidebar' id='bottom-col' preferred='yes'>

</div>

Cara Menambah 2 Kolom Baru di bawah Sidebar Blog 

1. Login ke blogger sobat
2. Pada dasboard blog pilih template dan klik pada Edit HTML-nya
3. Tekan kontrol F cari seperti di bawah ini (biasanya berada di atas ]]></b:skin>)

#sidebar-wrapper{width:350px;float:right;word-wrap:break-word;overflow:hidden}

4. Tambahkan kode di bawah ini dan letakkan diwah kode di atas (Poin 3)

#left-col{width:170px;float:left;word-wrap:break-word;overflow:hidden}#right-col{width:170px;float:right;word-wrap:break-word;overflow:hidden} 

Penerapannya seperti dibawah ini :

#sidebar-wrapper{width:350px;float:right;word-wrap:break-word;overflow:hidden}#left-col{width:170px;float:left;word-wrap:break-word;overflow:hidden}#right-col{width:170px;float:right;word-wrap:break-word;overflow:hidden}

 5. Kemudian cari kode seperti dibawah ini :

<div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='HTML4' locked='false' title='' type='HTML'/></b:section></div>

6. Letakkan kode berikut pas di bawah </b:section>

<b:section class='sidebar' id='left-col' preferred='yes'><b:section class='sidebar' id='right-col' preferred='yes'>

Penerapannya seperti di bawah ini :

<div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='HTML4' locked='false' title='' type='HTML'/></b:section><b:section class='sidebar' id='left-col' preferred='yes'><b:section class='sidebar' id='right-col' preferred='yes'></div> 

Demikian Cara Mudah Menambah 1 dan 2 Kolom di bawah Sidebar Blog silahkan dipraktekkan dalam blog sobat.

Tweet