Cara Membuat Dua Kolom Sidebar Di Kanan

Yayan Seo - Tak Bosan - bosannya berbagi Trick Blogger dengan sahabat blogger semu.nya...

ya kali ini saya akan membagi trick tentang Cara Mmbuat Dua  kolom Di Sidebar kanan .. YUK simak Tutorial Di bawah Ini..

  • 1.  Login Ke Blogger Masing - Masing.
  • 2 .Lalu klik edit Template .
  • 3.lalu cari Code yang mirip dengan Ini 

 /* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}


  • 4. Kalo sudah ketemu Tinggal tambahin Code di bawah ini tepat di bawah Code #sidebar-wrapper {
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
  • 5. Sehingga Codenya MENJADI seperti InI .
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
} 
  • 6. sEtelah trick di atas Sudah Terlaksana . Sekarang KIta tinggal Mencari kode Yng mirip code di bawah
<div id='sidebar-wrapper'>
..........
........
</b:section>
      </div>
  • 7. Sekarang tinggal masukan code di bawah ini Tepat Di bawah kode </b:section> 
    </div>  
ini codenya...
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
  • 8. sehingga kodenya menjadi seperti di bawah Ini...  
<div id='sidebar-wrapper'>
..........
........
</b:section>
      </div>
 <div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
9. Simpan Template nya.
Semoga Tutorial Ini bermanfaat Bagi kawan-kawan Semua.
Terimakasih kalo kalian sudah menyimak artikel ku iNi..

Follow Us On :

2 komentar:

Aditia Novit mengatakan...

terima kasih gan atas tipsnya..
datang berkunjung kembali yah :D

ArsipFank mengatakan...

Tamks akan saya coba semoga berhasil....

Posting Komentar

Theme by BloggerThemes | Sponsored by DLN