Membuat 4 kolom di bawah header blogger responsive -->

Kategori Berita

Iklan Semua Halaman




Template

Iklan Halaman Depan

Iklan Halaman Depan

Membuat 4 kolom di bawah header blogger responsive

Cara mudah menambah 4 kolom widget di bawah header yang responsive untuk platform blogger/blogspot

Kolom widget yang dimaksud adalah kolom untuk menaruh iklan iklan atau cuplikan postingan atau apa saja yg mau di pajang di web blog anda masing masing

Contoh kolom widget dengan 4 kolom di bawah header seperti dalam foto bawah ini


Kolom 4 widget dibawah header


Yang pertama Taruh kode di bawah ini di bawah kode ]]></b:skin>


#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;

 

ke 2 taruh kode di bawah ini di bawah  <body>


<div id='box-main-container'>
<div id='box1' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 24%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
   
 <div id='box3' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='box4' style='width: 24%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col4' preferred='yes' style='float:right;'/>
</div>  
      
<div style='clear:both;'/>
</div>
  


kemudian simpan template anda dan selesai.salam suara hati semoga bermanfaat