Facebook

Kamis, 23 Agustus 2012

Membuat 2 Kolom di Bawah Posting

send email
print this page


Membuat 2 kolom di bawah posting, saya mengambil tutorial ini dari template saya. Karena saya yakin anda pasti ingin kolom seperti saya, alasannya agar terlihat elegan, agar sama seperti template kang rohman, dll.Langsung ke intinya. Nantinya kamu akan mendapatkan widget seperti ilustrasi berikut ini
Langkah untuk membuatnya sebagai berikut :
1. Loggin ke blogger
2. Pergi ke Rancangan ==> Edite html
3. Klik expand
4. Klik download template lengkap
5. Cari kode ini ]]></b:skin>
6. Lalu hapus kode tersebut dan ganti kodenya dengan kode di bawah ini

Live Demo Download
/* ---------------[ Related Posts on Single Post Page ]--------------- */

#related {
    background:#fff url(http://img62.imageshack.us/img62/3792/dotl.gif) 45% 0 repeat-y;
    border:1px solid #ddd;
    padding:15px;
    margin: 20px 0 10px;
    }

#related .related-kanan {
    font-weight:bold;
    width: 53%;
    float:right;
    }

#related .related-kanan p {
    margin:0;
    }

#related .related-kanan h3, #related .related-kanan h2, #related .related-kanan h1 {
    margin:0;
    font-size:12pt;
    letter-spacing:0;
    }

#related .related-kanan ol {
    font-weight:normal;
    margin:2px 0 0 25px;
    }

#related .related-left {
    width: 43%;
    float:left;
    }

#related .related-left p.intro {
    font-weight:bold;
    }
]]></b:skin>
7. Cari kode seperti ini <data:post.body/> (kode pertama) 
8. Lalu hapus kode tersebut dan ganti dengan kode ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
                 <div class='related-kanan'>
                     Masukan kode iklannya disini                 
                 </div>

                 <div class='related-left '>
                  masukan kode iklan disini
                 </div>
             </div>   
           </b:if>

Ditulis Oleh : yomaricoy17 Hari: 21.49 Kategori:

0 comments:

Posting Komentar

 

Bloggrol

Exchange Link

Widget

http://2.bp.blogspot.com/_W4BgN_rLRKo/TTcjl6RB-LI/AAAAAAAAAGs/BHVPUTPgikA/s1600/image_ad.jpg