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:0px 0;padding:0px;width:100%;}
   #twoupperpostingleft{width: 50%;float: left;}
   #twoupperpostingright{width: 50%;float: left;}
5. Cari kode <div id='main-wrapper'> atau <div class='main-outer'>
6. Letakkan kode warna biru berikut ini tepat dibawah kode warna merah ini ;

<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

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

Sehingga hasilnya kurang lebih seperti ini :

<div class='main-outer'>
xxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxx
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
<div id='twoupperposting'>
<div id='twoupperpostingleft' style='width: 50%; float: left; margin:0; text-align: center;'>
<b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:left;'/>
</div>
<div id='twoupperpostingright' style='width: 50%; float: left; margin:0; text-align: center;'>
<b:section class='main' id='twoupperpostingright' preferred='yes' style='float:left;'/>
</div>
</div>

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

sumber :  Panduan Template Blog

Tweet