Tuesday 12 February 2013

Cara Menambah 2 Dua Kolom Dibawah Header Judul

Disini kita membahas cara menambah membuat 2 dua kolom dibawah header judul membuat dua column kotak box tepat setelah judul blog, Bisa berguna sebagai tempat iklan anda atau aplikasi lain nya milik anda. Perhatikan caranya dibawah ini.

Membuat atau menambah 2 dua kolom dibawah header judul blog, disini kita akan coba dengan dua cara, pilih salah satu yang mana berhasil diterpakan ke blog anda karena setiap template biasanya memiliki bahasa kode html yang berbeda. Perhatikan contoh gambar dibawah ini.
Untuk membuat atau menambah 2 dua kolom dibawah header pada gambar diatas, perhatikan caranya dibawah ini:

Disini kita mencoba dengan dua cara, silahkan dicoba cara yang mana dapat berhasil diterapkan ke blog anda dan ingat sebelum edit template sebaiknya anda back up dulu template anda untuk menghindari error. Jika tidak ada yang berhasil anda cari kode - kode yang hampir serupa karena setiap template memiliki kode bahasa html yan berbeda tapi tetap sama artinya.

- Cara Pertama 
  • Log in blog anda
  • Ke menu template, edit html, klik expand widget
  • Cari kode ]]></b:skin> kemudian copy kode dibawah dan paste kan tepat diatas kode ]]></b:skin> . Copy kode nya dibawah ini:
#box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }
  • Kemudian cari kode <div id='main-wrapper'> atau <div id="main-outer"> . Setelah itu copy kode dibawah dan paste kan tepat diatas kode <div id='main-wrapper'> atau <div id="main-outer"> . Copy kode nya dibawah ini

</div>
<div id='box-kolom-widget'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
  • Finish
- Cara Kedua
  • Langkah awal sama seperti cara pertama
  • Cari kode ]]></b:skin> kemudian copy kode dibawah dan paste kan tepat diatas kode ]]></b:skin> . Copy kode nya dibawah ini:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
  • Kemudian cari kode <div id='main-wrapper'> atau <div id='content-wrapper'> , copy kode dibawah dan paste kan tepat diatas kode <div id='main-wrapper'> atau <div id='content-wrapper'> . Copy kode nya dibawah ini:

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='Raxter1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='Raxter2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
  • Finish
Note: Anda juga bisa membuat 3 kolom dibawah header atau membuat gadget diatas header judul blog atau membuat gadet diatas postingan blog. Silahkan baca artikel nya dibawah ini:


Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang Cara Menambah 2 Dua Kolom Dibawah Header Judul

No comments:

Post a Comment