Cara Membuat Kolom Widget di Bawah Posting Artikel Home Page

Sobat. Jika rekan-rekan ingin memodifikasi template, khususnya ada tambahan kolom widget di bawah posting artikel pada bagian home pages (halaman depan), akan ane berikan ulasanya sore ini.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKGqJrKfUcVtBwtxaC5nVeAFNcphntyKZMsRoRCamXYMoiRECx65CxmJDTigTc-I05iS2oeGSKLYwID0o8r2tFj7gnaCUdQE74HgR062H6ycVsmvuQVoirvQfGnkirOZNgDvGQR1HsKc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKGqJrKfUcVtBwtxaC5nVeAFNcphntyKZMsRoRCamXYMoiRECx65CxmJDTigTc-I05iS2oeGSKLYwID0o8r2tFj7gnaCUdQE74HgR062H6ycVsmvuQVoirvQfGnkirOZNgDvGQR1HsKc/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>

7. Save template

Setelah melakukan langkah di atas, silakan buka layout (tata letak), akan muncul dua buat kolom widget di bawah home page (halaman utama) seperti ilustrasi di bawah ini:

Untuk menggunakan dua kolom widget tersebut, sama persis dengan menambahkan widget baru kok. Berikut live demonya.

Keren kan?

Demikian tips SEO kali ini. Semoga menambah wawasan dan ilmu tentang ngeblog, aamiin.

Salam.(http://forumblogindo.blogspot.com/).*

Sumber:

http://contohblognih.blogspot.com/2015/02/menambah-dua-kolom-widget-di-bawah-blog-posts.html