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

 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 2 (Dua) Kolom Elemen di Bawah Postingan Blog.

 Sekedar wawasan untuk sobat, Kolom Elemen itu berbeda dengan Kolom biasa, Bedanya sobat bisa melihat di Elemen laman. 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 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 disini.

Berikut di bawah ini adalah contoh gambar Dua Kolom Elemen yang berada pada Tata Letak (element Laman).

 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 >> Lanjutkan.
3. Jangan lupa sobat "Centang" >> Expand Template Widget.
4. 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
  }

5. 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 kodenya jadi 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;
}

6. 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>

7. 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 kodenya jadi 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 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 saya yang sudah berhasil Membuat Dan 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.

Update:

• Jika 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.

---

| Supported by http://kuc0pas.blogspot.com |

---