Cara Menambah Dua Kolom/Elemen di Bawah Header - Blog Kang Fatur

    Social Items

/ / / / / / Cara Menambah Dua Kolom/Elemen di Bawah Header
Tutorial kali ini kembali kita akan belajar dsain template, sebelumnya saya pernah membahas tentang "Menambah Elemen Halaman Widget di Bawah Header" Nah sekarang kita akan belajar tentang Cara Menambah Dua Kolom/Elemen di Bawah Header menjadi dua kolom. Hal ini hanya semata untuk menyediakan tempat Widget/Aksesoris di tempat kita apalagi template sobat yang fasilitasnya tidak memadai.

Baik kalau para sobat (pemula) yang belum paham apa yang akan kita bahas kali ini lihat gambar seperti dibawa ini :



Caranya sangat mudah, dan simpel tinggal sobat ikuti langkah - langkah berikut ini :

1. Seperti biasa Log In ke blog sobat
2. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

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


Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

3. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode berikut tepat diatasnya :

<div id='box-main-container'>
<div id='box1' style='width: 50%; 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: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


4. Selanjutnya simpan Template dan lihat hasilnya di bagian elemen halaman, jika sobat berhasil maka akan melihat ambah gadget 2 di bawah header seperti pada gambar di atas.

Selamat mencoba semoga bermanfaat, Amiin

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Menambah Dua Kolom/Elemen di Bawah Header

Tutorial kali ini kembali kita akan belajar dsain template, sebelumnya saya pernah membahas tentang "Menambah Elemen Halaman Widget di Bawah Header" Nah sekarang kita akan belajar tentang Cara Menambah Dua Kolom/Elemen di Bawah Header menjadi dua kolom. Hal ini hanya semata untuk menyediakan tempat Widget/Aksesoris di tempat kita apalagi template sobat yang fasilitasnya tidak memadai.

Baik kalau para sobat (pemula) yang belum paham apa yang akan kita bahas kali ini lihat gambar seperti dibawa ini :



Caranya sangat mudah, dan simpel tinggal sobat ikuti langkah - langkah berikut ini :

1. Seperti biasa Log In ke blog sobat
2. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

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


Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

3. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode berikut tepat diatasnya :

<div id='box-main-container'>
<div id='box1' style='width: 50%; 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: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


4. Selanjutnya simpan Template dan lihat hasilnya di bagian elemen halaman, jika sobat berhasil maka akan melihat ambah gadget 2 di bawah header seperti pada gambar di atas.

Selamat mencoba semoga bermanfaat, Amiin

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI
Blogger Dsain Template dsign template Tips Trik Blog Tutorial Blogger

15 comments:

  1. agus setiawanNovember 24, 2010 at 9:45 PM

    saya sudah pernah mencoba tp gagal, mungkin ndak cocok dg template saya.

    ReplyDelete
  2. Kang FathurNovember 28, 2010 at 5:49 PM

    @agus setiawanApa salahnya di coba lagi sob, mudah2an kali inimah berhasil

    ReplyDelete
  3. l_muktyJanuary 2, 2011 at 6:37 AM

    aslmlkum kang........
    Q lg blajr ngeblog ni,pingin +2 elemen itu tp nyari
    div id='main-wrapper'
    di template q ga ada
    (template simple, josh peterson)

    ReplyDelete
  4. Kang FathurJanuary 4, 2011 at 1:53 PM

    @l_mukty Coba aja sob letakkan di atas div class='descriptionwrapper'
    mudah2an aja berhasil OK

    ReplyDelete
  5. karimJanuary 11, 2011 at 6:04 PM

    gak bisa mas?
    mohon bantuannya untuk membuat 4 kolom dbawah header?????

    ReplyDelete
  6. Tole ne ToudanoJanuary 17, 2011 at 6:15 PM

    INFONYA MANTAP GAN!BUAT AKU YANG NEWBIE

    ReplyDelete
  7. Bram PragaFebruary 12, 2011 at 12:44 AM

    WAH SAYAHMAH LIEUR BIKIN BLOOG TEH KUMAHA ATUHNYA HAYANG DI AJAR

    ReplyDelete
  8. hisyam yahyaFebruary 6, 2012 at 5:19 PM

    wah kogh gug bisa ya kak ditemplate saya itu gug muncul..?

    ReplyDelete
  9. Alya SorayaMarch 11, 2012 at 12:35 PM

    Kang Fathur anu kasep, mau numpang tanya nih gimana cara membuat widget buat menampilkan kategori berbentuk folder seperti yang ada pada direktori dmoz dsb. Mohon bantuannya ya kang.. hatur nuhun sebelumnya

    ReplyDelete
  10. Kang FaturMarch 11, 2012 at 5:06 PM

    @Alya Soraya Coba mungkin yang ini Gan klik aja

    ReplyDelete
  11. AnonymousJune 10, 2012 at 10:17 AM

    makasih infonya, happy blogging

    ReplyDelete
  12. rifkyJune 16, 2012 at 7:28 PM

    hihihi berhasil om..makasih ya :d

    ReplyDelete
  13. Kang HilmanJuly 2, 2012 at 4:44 PM

    Artikel yang sangat bagus mas..
    Nice share info mas..

    kunjung balik n comment balik ya mas, hehe.. ^_^

    ReplyDelete
  14. Abed SaragihSeptember 25, 2013 at 4:58 PM

    Kodenya mantap ini bisa dipraktekkan di blog baru saya sekarang ini.

    ReplyDelete
  15. ace maxsJanuary 17, 2015 at 8:18 AM

    mantap dah artikelnya

    ReplyDelete

Subscribe to: Post Comments (Atom)

Subscribe Our Newsletter

Notifications

Disqus Logo