Catatan Belajar Dari Kendawangan

  • RSS
  • Delicious
  • Facebook
  • Twitter

Twitter

Widget di Bawah Posting Dua Kolom

Posted by AWAN THE KILL - -

Setelah kemaren kita belajar  Membuat Link di Sorot Ada Keterangannya tentunya tampilan blog kita lebih cantik dari sebelumnya dan rasanya belum puas akan tampilan tersebut makanya kita  jalan - jalan lagi  ke Blognya kang Rohman dan sebagai salah satu masternya dibidang blogger blognya itu sangat membantu dan menginspirasi blog ini, selain itu, disitu juga dijelaskan bagaimana cara membuat Membuat Widget dibawah Posting menjadi dua kolom itu.
Sebagai napak tilas saja bagaimana cara membuat Membuat Widget dibawah Posting menjadi dua kolom itu makanya ini kembali saya tulis dalam sebuah posting sebagai pembelajaran saya sendiri nantinya.
Sebenarnya  cara mengatur tata letak kolom-kolom tersebut kang rohman menggunakan kode CSS. Dimana dengan kode CSS tersebut beliau mengatur lebar kolom, warna dasar kolom dan lain-lain. Disini  kang Rohman mencontohkan dengan pemanggilan CSS dengan kolom Utama dengan kolom kiri  dinamakan bawahkiri sedangkan kolom kanan diberinya nama bawahkanan. (lebih jelasnya perhatikan gambar sisamping)

LANGKAH MEMBUAT WIDGET DIBAWAH POSTING MENJADI DUA (2) KOLOM

1. Login ke blogger dengan ID ANDA
2. Klik Tata Letak
3. Klik Tab Edit HTML
4. Klik kotak kecil disamping tulisan Expand Widget Template.
expand
5. Silahkan cari  kode ini :  ]]></b:skin> kemudian copy paste kode di bawah ini persis diatasnya ingat diatasnya.
.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

6. Kemudian Cari kode <data:post.body/> Lalu copy paste kode dibawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bawahpost'>
           <div class='bawahkiri'>
            Kode Iklan anda yang ingin ada di sebelah kiri disini
           </div>
          <div class='bawahkanan'>
          Kode Iklan anda yang ingin ada di sebelah kanan disini
           </div>
</div>
</b:if>
7.  Klik tombol SIMPAN TEMPLATE.
8. S E  L E S A I

Dan hasilnya bisa sobat lihat dibawah artikel ini memang tidak secantik yang aslinya tapi lumayanlah dari pada tidak kata orang melayu... heee... hee....