Blogger – Membuat 2 Widget Di Bawah Posting

Tuesday, January 26, 2010 19:05
Posted in category 2.Tutorial Blogger

Prinsip dasar yang harus diingat adalah anda membuat satu kolom utama yang ukuran lebarnya sama dengan lebar kolom posting, kemudian kita membuat lagi dua buah kolom di dalamnya, yang satu diatur agar berada disebelah kiri dan kolom yang satu lagi berada disebelah kanan. Berikut ilustrasinya :

Dari ilustrasi di atas terlihat ada 3 buah kolom, dalam kenyataannya kolom tersebut bisa memakai garis pinggir agar terlihat kolom-kolomnya atau bisa juga tidak ditampilkan sehingga tidak akan terlihat bahwa disitu adalah merupakan gabungan dari 3 buah kolom.

Bagaimana cara mengatur tata letak kolom-kolom tersebut? jawabnya yaitu dengan kode CSS. Dengan CSS kita dapat mengatur semua itu, baik lebar kolom, warna dasar kolom dan lain-lain. Sebagai contoh, kolom utama akan dinamakan .bawahpost kolom kiri akan dinamakan .bawahkiri, kolom kanan akan dinamakan .bawahkanan. CSS class nya akan seperti ini :

.bawahpost {

}

.bawahkiri {

}

.bawahkanan {

}

Yang harus anda perhitungkan pertama kali adalah anda harus mengetahui berapa ukuran lebar kolom posting anda, sehingga nanti bisa menentukan berapa lebar kolom kiri serta kolom kanan. Sebagai contoh misalkan kolom posting adalah sebsar 550px, maka kolom kiri dan kanan tinggal di bagi dua, namun anda juga harus memperhitungkan besarnya padding serta margin, maka sebagai contoh kolom kiri akan kita jadikan 265px dan kolom kanan sebesar 265px. Contoh kode CSS nya seperti ini :

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}   

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

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

Untuk contoh kode CSS sudah beres, selanjutnya tinggal kode HTML untuk memanggil fungsi CSS tadi. Karena dalam kode tadi yang dipakai adalah tanda titik ( . ) maka ini adalah fungsi class, sehingga contoh kode HTML nya seperti 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>

Sebagai contoh sederhana, berikut cara-cara mengimplementasikan kode diatas pada template anda :

  • Login ke blogger dengan ID anda
  • Klik Tata Letak
  • Klik Tab Edit HTML
  • Silahkan backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap.
  • Klik kotak kecil disamping tulisan Expand Widget Template.

* Carilah kode ]]></b:skin>, lalu copy paste kode di bawah ini persis 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;
}

* Lalu carilah kode berikut :

<data:post.body/>

* Kemudian copy paste kode di bawah ini persis di bawahnya :

<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>

* Klik tombol SIMPAN TEMPLATE.

* Selesai.

Langkah diatas hanya sebagai contoh, dan mudah-mudahan anda memperoleh sebuah gambaran prinsip dasar. Karena jika anda sudah faham akan prinsip dasarnya, membuat berbagai variasi pun akan sangat mudah. Satu sebagai tambahan, jika anda menginginkan lebar kolom yang leboh dinamis, anda bisa menggunakan satuan persen ( % ) bukan memakai satuan pixel ( px )

Selamat mencoba.

You can leave a response, or trackback from your own site.

450 Responses to “Blogger – Membuat 2 Widget Di Bawah Posting”

  1. FiverrEarn says:

    January 3rd, 2024 at 8:15 AM

    FiverrEarn

    […]Every when in a while we pick out blogs that we study. Listed below would be the most recent websites that we pick […]

  2. Generator Repair near me Yorkshire says:

    February 6th, 2024 at 5:58 PM

    Generator Repair near me Yorkshire

    […]that would be the finish of this article. Right here you will uncover some web-sites that we assume you will appreciate, just click the hyperlinks over[…]

  3. cheap sex cams says:

    February 7th, 2024 at 3:28 AM

    cheap sex cams

    […]we came across a cool web page that you just may well get pleasure from. Take a appear for those who want[…]

  4. fullersears.com says:

    February 17th, 2024 at 1:29 AM

    fullersears.com

    […]Here are a number of the web sites we recommend for our visitors[…]

  5. fullersears.com says:

    February 17th, 2024 at 2:12 AM

    fullersears.com

    […]that may be the end of this write-up. Here you will obtain some web-sites that we assume you’ll enjoy, just click the links over[…]

  6. fullersears.com says:

    February 17th, 2024 at 4:12 AM

    fullersears.com

    […]below you’ll obtain the link to some sites that we think you’ll want to visit[…]

  7. dog probiotics says:

    February 21st, 2024 at 12:16 AM

    dog probiotics

    […]Here are a few of the web-sites we advocate for our visitors[…]

  8. french bulldog says:

    February 21st, 2024 at 1:10 AM

    french bulldog

    […]Wonderful story, reckoned we could combine a couple of unrelated information, nonetheless seriously worth taking a search, whoa did one master about Mid East has got far more problerms also […]

  9. rare breed-trigger says:

    February 29th, 2024 at 5:19 AM

    rare breed-trigger

    […]Every once inside a whilst we pick blogs that we read. Listed beneath are the newest websites that we pick […]

Leave a Reply

You must be logged in to post a comment.