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

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.

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.

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:

• Apabila kode diatas tidak ada pada template blog sobat, solusinya silahkan sobat baca artikel postingan saya tentang Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog.

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.