Cara Menambah 1 Kolom dan 2 Kolom dibawah Sidebar

Pada postingan kali ini mengenai cara menambah 1 kolom dibawah sidebar blog dan yang satu lagi cara menambah 2 kolom dibawah sidebar blog. Penambahan elemen / kolom baru di sidebar ini berguna untuk meletakkan widget yang menurut anda penting dan menarik. Ya udah langsung saja pada topik pembahasan cara menambah 1 kolom baru dibawah sidebar dan menambah 2 kolom dibawah sidebar blog.

Membuat 1 elemen baru dibawah sidebar
1. Login ke blogger
2. Pada dasbor, pilih Template => Edit HTML
3. Tekan Ctrl+F, lalu cari kode yang mirip dibawah ini, biasanya ada diatas ]]></b:skin>


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

4. Tambahkan kode ini dan letakkan dibawahnya


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

Penerapannya seperti dibawah ini :


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

5. 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 dibawah kode </b:section>


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

7. Penerapannya 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>
<b:section class='sidebar' id='bottom-col' preferred='yes'>
</div>

8. Kalau dilihat di Tata Letak seperti ini

Cara Menambah 1 Kolom, 2 Kolom dibawah Sidebar Blog

Membuat 2 elemen baru dibawah sidebar
1. Login ke blogger
2. Pada dasbor, pilih Template => Edit HTML
3. Tekan Ctrl+F, lalu cari kode yang mirip dibawah ini, biasanya ada diatas ]]></b:skin>

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

4. Tambahkan kode ini dan letakkan dibawahnya

#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. 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 dibawah kode </b:section>

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

7. Penerapannya 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>
<b:section class='sidebar' id='left-col' preferred='yes'>
<b:section class='sidebar' id='right-col' preferred='yes'>
</div>

8. Kalau dilihat di Tata Letak seperti ini

Nah demikianlah Cara Menambah 1 Kolom, 2 Kolom dibawah Sidebar Blog, semoga bermanfaat, happy blogging

tutorial blog

Terlintas

Cara Menambah 1 Kolom dan 2 Kolom dibawah Sidebar

Related Posts

Entri Populer