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(http://3.bp.blogspot.com/-VIXwkxXi92I/Th7oWhOkEnI/AAAAAAAAAJU/ErdWeUoqkdk/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 paste 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>

Klik save, sekarang kamu sudah mempunyai widget 3 kolom diatas posting dan sidebar.
Semoga Bermanfaat…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s