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:
- Silahkan sobat >> Login/Masuk >> ke akun blog sobat.
- Pada Dashboard tampilan blog baru, pilih dan klik menu >> Template >> Edit HTML.
- Kemudian silahkan sobat cari kode #main-wrapper { (Gunakan CTRL+F untuk mempermudah pencarian).
#main-wrapper {
width: 500px;
float: $startSide;
margin:20px
}
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;
}
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;
}
#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;
}
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;
}
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>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<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>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>
<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>
<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>
- width: 225px adalah Lebar kolom yang sobat buat, silahkan sobat atur nilainya agar sesuai dengan Template atau keinginan 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.
Tidak ada komentar:
Posting Komentar