Monday, May 14, 2012

Cara Buat 2 Kolom Di Bawah Postingan

Setelah ngobrol ngobrol di salah satu tempat nongkrong online yang bisa saya kunjungi, ada yang menanyakan cara buat dua kolom di bawah postingan? Awalnya saya menyuruh orang tersebut mencari di tempat tongkrongan namun tidak ketemu. Dari pada dia pusing tujuh keliling gak ketemu - ketemu mending tak bantu dengan menulis artikel ini. Sebenarnya Membuat dua kolom di bawah postingan sudah banyak yang share namun karena ini permintaan makannya saya buat.

Instalasi Pada template Blogspot

  1. Login ke blogger
  2. masuk ke Rancangan >> Edit HTML
    Rancangan
    Elemen halaman
  3. centang kotak kecil di samping tulisan Expand Widget Template
    Expand
  4. kemudian cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat diatasnya

    #bawahpost{background:#262626 url(http://oketrik.googlecode.com/files/borderbg.gif) 49% 0 repeat-y;text-shadow:none;border:1px solid#4d4d4d;padding:15px;margin:0 0 10px;color:#a6a6a6}
    #bawahpost .related-posts{font-weight:bold;width:48%;float:right}
    #bawahpost .related-posts p{margin:0}
    #bawahpost .related-posts ul{font-weight:normal;margin:2px 0 0 10px}
    #bawahpost .langganan{width:46%;float:left;color:#a6a6a6}
    #bawahpost.langganan form{margin:0;padding:0}
    .clearfixed:after{content : ".";display:block;height:0;clear:both;visibility:hidden}.clearfixed  {display : inline-block;}
    bawah post
  5. Setelah itu cari lagi kode <data:post.body/> (NB: klo kamu sudah memasang fasilitas Read more otomatis pilih kode yang kedua) dan taruh kode di bawah ini tepat di bawahnya

    <div class='clearfixed' id='bawahpost'>
    <div class='langganan'>
    Taruh Widget disini (kiri)
    </div>

    <div class='related-posts'>
    Taruh Widget disini (kanan)
    </div>
    </div>


    NB : kode atau tulisan yang berwarna biru tersebut dapat kamu ganti dengan kode widget yang akan kamu pasang di bawah post misal widget lagganan form dan related post(postingan terkait)
    data
  6. Setelah itu simpan dan lihat hasilnya
Tanyakan kembali apabila kamu bingung dengan langkah Membuat dua kolom di bawah postingan (Request) ini dengan meninggalkan pesan di kotak komentar di bawah ini

No comments:

Post a Comment