Cara Mudah Menambah Kolom Widget Di Atas Postingan Blog

Mungkin sobat merasa bingung karena jika sobat menggunakan template default dari blogger, itu tidak menyediakan kolom di atas postingan, nahh sekarang Blog Pintasku akan memberikan Tutorial Cara Menambah Kolom Widget Di Atas Postingan Blog. Dengan menambahkan kolom widget di atas postingan ini sobat bisa menambahkan hiasan atau fitur blog. Oke langsung saja ke tutorialnya berikut ini.

Menambah Kolom Widget Di Atas Postingan Blog

Untuk menambahkan kolom widget di dalam blogger, kita harus membuat struktur HTML dan Tag Blogger, ikuti tutorialnya dibawah ini.

1. Masuk ke menu Templates > Edit HTML
2. Jika sudah masuk, sekarang kita cari kode <div id='main-wrapper'>
3. Terus sekarang kita copy lalu letakan kode berikut ini tepat di atas <div id='main-wrapper'>
Jika ingin menambahkan 1 kolom maka gunakan kode berikut ini.


<b:section class='atas-posting' id='atas-posting' preferred='yes'/>

Nahh jika ingin menambahkan 2 kolom, gunakanlah kode berikut ini.


<div id='atas-posting'>
<b:section class='kolom-kiri' id='kolom-kiri/>
<b:section class='kolom-kanan' id='kolom-kiri'/>
</div>

4. Jika sudah diletakan, sekarang kita cari kode ]]></b:skin> untuk meletakan kode CSSnya
5. Lalu kita copy dan letakan kode berikut ini, dan letakan tepat di atas kode ]]></b:skin>
Jika sobat menggunakan kode 1 kolom maka gunakan kode CSS berikut ini.


.atas-posting{width: 100%;padding:10px 0px 10px 10px;background:#fff;margin:0px 0px 10px 0px;text-align:left;}
.atas-posting .widget{}

Jika sobat menggunakan kode 2 kolom maka gunakan kode CSS dibawah ini.


#atas-posting h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#atas-posting{
width:600px; /*Sesuaikan ukuran kolomnya*/
}
#kolom-kiri{
width:295px; /*Ukuran Dari kolom Kiri*/
float:left;
margin:4px;
}
#kolom-kanan{
width:295px; /*Ukuran Dari kolom Kanan*/
float:right;
margin:4px;
}

6. Save templates dan lihat hasilnya

Oke sekian Tutorial Cara Mudah Menambah Kolom Widget Di Atas Postingan Blog, semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih