free download

nonton youtube dibayar,daftar gratis dapet dollar

Paid2YouTube.com

Bisnis Sukses Internet

Monday, July 23, 2007

membuat 3 Kolom

di sini kita akan menambah kolom blog kita menjadi 3,dari berbagai alasan para blogger ingin menambah kolom blognya menjadi 3 kolom,di sini di tuliskan 2 cara penambahan kolom yaitu di sebelah kanan dan kiri kolom posting.yang pertama di sebelah kanan dulu...


pertama tama beckup dulu template anda untuk mengantisipasi kesalahan cara masuk ke template>>>>Edit HTML>>>>klick download full template.setelah selesai baru kita mulai.
jangan lupa centeng dulu kotak kecil yang ada di kanan atas (widget)
kemudian cari kode di bawah ini (untuk memudahkan mencarinya tekan Ctrl+f lalu ketik namaa yang anda cari)oh iya ini untuk blog beta lo ya...


#outer-wrapper {
width: 660px;
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;
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 */
}



gimana...!!udah ketemu pastinya..kode di atas merupakan 1 sidebar-wrapper saja.sekarang kita tambahkan sidebar baru dan untuk memaksimal kan panjang dan lebarnya pun kita harus ganti seperti di bawah ini





#outer-wrapper
{
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}


#main-wrapper {
width: 400px;
margin-left: 25px;
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: 150px;
float: right;
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 */
}


#newsidebar-wrapper {
width: 150px;
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 */
}


nah kemudian karna sudah menambah sidebar baru maka body dan layout nya pun harus kita tambah...cara seperti di bawah





/** Page structure
tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}


body#layout #outer-wrapper {
width: 750px;
}


nah sekarang sisa peletakannya kalau mau meletakkannya di sebelah kanan copy kode yang berwarna merah di bawah ini di atas sepertin di bawah ini





<div
id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


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


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


nah kalau mau meletakkannya di sebelah kiri liat di bawah ini



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


<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


yang terakhir sisa merubah nilai





#header-wrapper
{
width:660px;

#footer {
width:660px;

menjadi....







#header-wrapper
{
width:750px;

#footer {
width:750px;

kemudian silahkan anda liat hasilnya...
selamat mencobaa..

0 komentar:

Bisnis rumahan Internet

Tomodachi banner link

Tampilkan Yahoo emoticons

YAHOO! Emoticons untuk blog anda
silahkan gunakan icon yahoo ini untuk blog anda,klick icon yang anda inginkan.lalu liat dan copy kodenya pada box di bawah..

click icon yang anda inginkan


silahkan copy code di bawah ini...



Collection Blog Archive

There was an error in this gadget

  © Syamcollection 2010kiat SUKSES Optimalkan WEBSITE/BLOG, Otak atik BLOG,SEO,freeAFFILATE,freePROGRAM,freeSOFTWARE

Back to TOP