Home » , , » Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen Di Bawah Postingan Blog

Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen Di Bawah Postingan Blog

Written By Ku Copas on Tuesday, 7 August 2012 | 8/07/2012 10:41:00 pm

KUCOPAS - Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog. Setelah cukup lama saya tidak update posting blog, kali ini saya akan kasih trik lagi seputar tutorial blog, yaitu Cara Membuat Dan Menambah Dua Kolom Elemen Di Bawah Postingan Blog.

Sekedar wawasan untuk sobat, Kolom Elemen itu berbeda dengan kolom biasa, perbedaannya sobat bisa melihat pada menu Elemen Laman (Tata Letak) blog sobat. Kalau kolom elemen pada elemen laman akan muncul elemen baru yang bisa sobat pasangi widget (Add Gadget atau Tambah Gadget) dan pastinya sobat bisa tanpa perlu edit HTML didalam Template lagi, namun kolom element tidak bisa di pasang dalam artikel atau postingan, sedangkan kolom biasa adalah sebaliknya dan sobat bisa membaca artikel postingnya tentang Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog.

Berikut di bawah ini adalah contoh gambar Dua Kolom Elemen yang berada pada Tata Letak (Element Laman) dan posisinya berada dibawah postingan blog.

Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

Jika sobat tertarik ingin membuat dan memasangnya di blog sobat, disini saya akan menerangkan secara detail Cara Membuat Dan Menambah Dua Kolom Elemen di Bawah Postingan Blog. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
  1. Silahkan sobat >> Login/Masuk >> ke akun blog sobat.
  2. Pada Dashboard tampilan blog baru, pilih dan klik menu >> Template >> Edit HTML.
  3. Kemudian silahkan sobat cari kode #main-wrapper { (Gunakan CTRL+F untuk mempermudah pencarian).
Kurang lebih kodenya seperti dibawah ini.
#main-wrapper {
  width: 500px;
  float: $startSide;
margin:20px
  }
4. Letakkan atau taruh semua kode berikut, setelah atau di bawah kode #main-wrapper {
#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}
Sehingga susunan kodenya menjadi seperti di bawah ini.
#main-wrapper {
  width: 500px;
  float: $startSide;
margin:20px
  }
#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}
5. Langkah yang selanjutanya masih dalam Edit HTML, silahkan sobat cari lagi kode <div id='main-wrapper'> (Gunakan CTRL+F untuk mempercepat pencarian).

Kurang lebih kodenya seperti dibawah ini.
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
      </div>
6. Lalu silahkan sobat sisipkan atau letakkan kode berikut, di bawah atau setelah kode </b:section>
<b:section class='main-left' id='main-left' style='width: 225px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>
Sehingga susunan kodenya menjadi seperti di bawah ini.
<div id='main-wrapper'>
<div id='main'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='main-left' id='main-left' style='width: 225px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>
</div>
Catatan:
  • width: 225px adalah Lebar kolom yang sobat buat, silahkan sobat atur nilainya agar sesuai dengan Template atau keinginan sobat.
7. Sebelum sobat klik Simpan, ada baiknya sobat klik >> Preview atau Pratinjau terlebih dahulu, agar bisa antisipasi jika terjadi kesalahan eror saat Edit HTML dalam Template blog sobat.

8. Jika Preview atau Pratinjau tidak mengalami eror, silahkan sobat klik >> Simpan dan lihat hasilnya pada menu Tata Letak atau Elemen Laman.

9. Jika sudah ada dua kolom Add Gadget atau Tambah Gadget di bawah postingan, berarti trik yang sobat buat berhasil dengan sempurna. Lihat contoh gambar screenshot saya yang sudah berhasil menambah dua Kolom Elemen di bawah postingan blog.

Cara Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

Setelah berhasil membuat dan menambah dua kolom di bawah posting blog, sekarang sobat bisa bebas mengisinya dengan widget atau apapun dengan cara langsung klik Add Gadget atau Tambah Gadget seperti yang sobat inginkan.

Note:
Demikian tutorial blog yang mengulas tentang Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen Di Bawah Postingan Blog, semoga trik ini bisa bermanfaat untuk sobat KUCOPAS semua.

Artikel Terkait:

thumbnail Title: Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen Di Bawah Postingan Blog
Posted by:Ku Copas
Published :2012-08-07T22:41:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen Di Bawah Postingan Blog
Comments
9 Comments

9 comments:

  1. hmm.. menarik juga tuh sob.. untung saya mah bawaan dari templatenya sob jd ngga di otak-atik lagi..
    hhehehe :)

    ReplyDelete
  2. mantaplah gan aq hampir mirip pke kayk gituan,,, tapi tergantung template juga menurut aq karna susunan masing2 template berbeda

    ReplyDelete
  3. @ Adytiya AHP >>> Iya... Semoga Keberuntungan seLaLu mEnyeRtaimu Sob...

    @ Ahmad Fawzan Rohman >>> Iya Gan... yang penting bisa di atur...

    ReplyDelete
  4. gan ane ga bisa nemuin kode :
    #main-wrapper { maupun div id='main-wrapper'>.
    gmn solusinya?

    ReplyDelete
  5. @ 9berita >>> Jika kode di atas tidak ada pada template blog sobat, Solusinya silahkan sobat kunjungi posting saya tentang Cara Membuat dua Kolom Widget di bawah posting blog
    semoga membantu.

    ReplyDelete
  6. ini masalahnya ane mau bikin kolom dulu biar nanti ga ribet lagi kalo ganti widget lain, jadi bukan langsung widget dalam html.

    bisa dibantu gan!

    ReplyDelete
    Replies
    1. Template apa yang kamu gunakan sob... biar nanti saya bantu...

      Delete
  7. keren juga ya sob..
    di tunggu kunjungan balik'a..
    http://system70mb.blogspot.com

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger