Menambah Widget 3 Kolom Diatas Posting Blogger

Widget adalah elemen yang sangat penting dalam sebuah blog, dengan widget kamu bisa mengoptimalkan blog dengan menyimpan elemen-elemen yang menurut kamu penting untuk dipasang seperti yang saya sudah ulas pada postingan saya terdahulu tentang desain blog.
Jika template yang kamu gunakan masih kurang untuk menampung elemen yang dibutuhkan ada baiknya kamu menambahkan widget, dan dalam potingan ini saya akan mengulas cara menambah widget 3 kolom, kenapa harus 3 kolom? menurut saya dengan mempunyai widget 3 kolom akan sangat membantu tampilan blog lebih dinamis dan menghindari terlalu panjangnya tinggi blog.

Seperti biasanya silahkan sobat masuk kedalam halaman rancangan di akun blogger kamu.

/*atas --*/
#atas {background: #ffffff;margin-top:10px auto;width:930px;height: 275px;overflow:hidden;font-size:12px;padding:10px;}

#atas h2 {background:# url() repeat;font-size:14pt; font-weight:400;text-align:center;font-style:bold;line-height:1.3em;color:#000000;padding:5px;margin-top:-10px;margin-left:-10px;margin-right:-10px;border-bottom:2px solid #000000;margin:0 0 10px;padding:0 0 5px 20px;}

#atas ul {color:#000000;margin:0;padding:0;}

#atas ul li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMRuQ9_tN6rj3GZOsV3YCSqzgnQavRjEv-gFOnD1cuXsMV1l_LIsxg3MO7juuMxxzvouT-AiOCo3qNvrj_EqTIMpo3Yx7zVjysiJkcbLTmwFy6YRu7zYqeMqOwQvt7xLsio_VYnVTYBU/s1600/5.jpg) left no-repeat;list-style-type:none;border-bottom:0px dotted #000000;margin:0 0 10px;padding:0 0 5px 20px;}

#atas ul li a:hover {margin:0px 0px 5px;padding:0px;}

#atas-tengah {width:250px;float:left;margin-right:10px;background:#ffffff;padding:10px;}

#atas-kiri {width:250px;float:left;margin-left:10px;background:#ffffff;padding:10px;}

#atas-kanan {width:300px;height:250px ;float:right;margin-left:10px;background:#ffffff;padding:10px;}

Copy kode diatas dan sematkan diatas kode ]]</b:skin>

Sekarang sobat cari kode <div id='main-wrapper'> kalau sudah ketemu sisipkan kode dibawah ini tepat dibawah <div id='main-wrapper'>

<div id='atas'>
    <b:section class='atas' id='atas-kiri' preferred='yes' showaddelement='yes'/>

    <b:section class='atas-tengah' id='atas-tengah' preferred='yes' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>

    <b:section class='ats-kanant' id='atas-kanan' preferred='yes' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
    </div>