Membuat 2 kolom dibawah Postingan II

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat 2 kolom dibawah Postingan II dan semoga artikel ini bermanfaat.

---

Membuat 2 kolom dibawah Postingan II, setelah beberapa hari yang lalu saya membuat tutorial Cara Membuat 2 kolom widget dibawah postingan sekarang saya akan berbagi  Membuat 2 kolom dibawah Postingan dengan cara yang kedua, pada cara yang kedua ini ada kelebihan dimana pemasangan widgetnya tidak secara langsung di halaman edit HTML melainkan berada di halaman Tata letak sehingga kalau sudah memasang cara ini kita akan secara mudah memasang widgetnya ditambah lagi dengan cara ini kita bisa memasang beberapa widget langsung pada tiap elemennya.biar tidak panjang lebar kita langsung saja ke pokok bahasan saja. berikut langkah-langkahnya ;

• Seperti biasa saja login ke blogger
• klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
• Klik edit HTML klik lanjutkan  kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

#bawahpost h2{
font-size:13px;
font-weight:bold;
color:#000;
border-bottom:2px solid #000000;
padding-left:5px;
}
#bawahpost{
width:600px;
}
#bawahleft{
width:290px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#bawahright{
width:290px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

• kode berwarna merah itu sesuaikan dengan lebar halaman postingan sobat yang biasanya lebar postingan berada pada kode CSS "main-wrapper" kemudian lihat kode yang berwarna biru itu lebar kolom yang akan dibuat dimana ukurannya yaitu kode yang berwarna merah dibagi 2 setelah dikurangi margin/padding.
• Selanjutnya sobat cari kode dibawah ini, biar kodenya akan tampil seperti dibawah ini maka sobat jangan mencentang Expand Template Widget yang ada di atas.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

• Setelah ketemu kode seperti diatas sobat tambahkan kode dibawah ini tepat dibawah kode yang berwarna merah.

<div id='bawahpost'>
<b:section class='bawahleft' id='bawahleft' showaddelement='yes'/>
<b:section class='bawahright' id='bawahright' showaddelement='yes'/>
</div>

        Dan tampilannya akan seperti dibawah ini.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='bawahpost'>
<b:section class='bawahleft' id='bawahleft' showaddelement='yes'/>
<b:section class='bawahright' id='bawahright' showaddelement='yes'/>
</div>
</div>

• Setelah selesai simpan template sobat.
• kemudian sobat buka halaman tata letak maka pada halaman tersebut sudah ada 2 kotak elemen tambah gadget, selanjutnya sobat tinggal memasukan kode widget yang mau dipasang dengan cara seperti biasa waktu menambah widget.

Cara ini bisa sobat gunakan untuk menambah 2 kolom diatas postingan caranya hanya dengan merubah penempatan posisi kode yang berwarna biru tepat menjadi diatas kode yang berwarna merah.

sehingga seperti ini;

<div id='main-wrapper'>
<div id='bawahpost'>
<b:section class='bawahleft' id='bawahleft' showaddelement='yes'/>
<b:section class='bawahright' id='bawahright' showaddelement='yes'/>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Demikian tutorial kali ini, semoga berhasil.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat 2 kolom dibawah Postingan II kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 11:09