Caranya tidak terlalu susah kok, cuma butuh energi dan kemauan aja. Tips desain kali ini saya sampaikan, karena untuk menambah cukup ruang bagi tampilan blog Sobat. Fungsi penambahan kolom widget ini nantinya akan menambah link internal dan eksternal, dan tentu bisa meningkatkan SEO blog.
Berikut langkah-langkahnya:
1. Baca do’a dulu njeh
2. Masuk akun blogger
3. Pilih template > edit HTML
4. Copas kode di bawah ini tepat di atas kode ]]</b:skin>
#post-kiri{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;}.post-kiri a, post-kanan a {color:#555;font-size:13px}.post-kiri ul {list-style: none;color: #EAE9E8;margin: 0;padding: 0;}.post-kiri li {background: url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;}.post-kiri h2 {font-size: 15px;font-family: Oswald;}
#post-kanan{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;}.post-kanan a, post-kanan a {color:#555;font-size:13px}.post-kanan ul {list-style: none;color: #EAE9E8;margin: 0;padding: 0;}.post-kanan li {background: url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;}.post-kanan h2 {font-size: 15px;font-family: Oswald;}
5. Cari (Ctrl+F) kode <div id=’main-wrapper’> dan biasanya seperti di bawah ini:
<div id=’main-wrapper’><b:section class=’main’ id=’main’ showaddelement=’no’><b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/></b:section></div>
6. Copas kode di bawah ini tepat di bawah kode </b:section> atau sebelum kode </div>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<b:section class=’post-kiri’ id=’post-kiri’ preferred=’yes’/>
<b:section class=’post-kanan’ id=’post-kanan’ preferred=’yes’/>
</b:if>