Cara Membuat Dua Kolom Widget Diatas Postingan

Cara Membuat Dua Kolom Widget Diatas Postingan merupakan kelanjutan dari artikel sebelumnya yaitu cara membuat satu kolom widget diatas postingan yang hanya membaginya menjadi dua kolom widget seperti yang dijelaskan pada artikel ini, cara membuat dua kolom widget diatas postingan

Berikut Cara Membuat Dua Kolom Widget Diatas Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   #twoupperposting{margin:10px 0;padding:0px;width:100%;}
   #twoupperpostingleft{width: 45%;float: left;}
   #twoupperpostingright{width: 45%;float: right;}
5. Cari kode <div id='main-wrapper'>
6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
   <div id='twoupperposting'>
   <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twoupperpostingright'

style='width: 45%; float: right; margin:0; text-align: left;'>
<b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
</div>
</div>

Sehingga hasilnya seperti ini

<div id='main-wrapper'>
<div id='twoupperposting'>
<div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
<b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
</div>
<div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
<b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
</div>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='main' id='mainbottom' showaddelement='yes'/>
</div>

Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Kode diatas bekerja di template blog saya dan setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Alangkah senangnya saya jika anda berkenan untuk meninggalkan komentar anda dalam artikel cara membuat satu kolom widget diatas postingan ini karena saya akan menjadi Follower blog anda. Terimakasih telah membaca artikel ini, Cara Membuat Dua Kolom Widget Diatas Postingan

Cara Membuat Dua Kolom Widget Diatas Postingan 2013-01-16T11:03:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni