About munkz Ariez: Pasang Widget Dibawah Posting

Subscribe RSS Feed ReTweet Share on Facebook Add to Technorati

Kali ne saya mendapatkan ilmu lagi dari Blog KR yaitu membuat widget di bawah poatingan.

Wah kayaknya seru dan menarik y?

Widget di bawah posting bisa di isi kode iklan, tulisan, atau yang lainnya seperti artikel berkaitan dan sebagainya.,.,., Kata Kang Rohman prinsip awal yang perlu di ingat adalah sobat harus mengetahui kode posting blogger, kodenya di bawah ini :

<data:post.body/>

Secara logika, jika anda ingin menyimpan sesuatu seperti iklan, tingal masukan kode nya di bawah kode diatas, misal seperti kode dibawah ini :

<data:post.body/>

< simpan kode iklan anda disini >

Sangat simpel.,., tapi belum sempurna. Nah ini pelajaran dari Kang Rohman untuk lebih sempurna harus ditambah kode seperti dibawah ini agar waktu di halaman muka atau Home iklan tidak muncul dan muncul jika di baca posting keseluruhan, simak tutorial berikut ini,

Contoh kode yang di tambahkan yang berwarna biru sebagai berikut :

<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

< simpan kode iklan anda disini >

</b:if>

Tambah lagi jika ingin menambahkan warna background atau dengan gambar, maka sobat bisa menggunakan kode div class, misal seperti ini :

<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

< simpan kode iklan anda disini >

</div>

</b:if>

Dari contoh diatas, class yang digunakan di beri nama bawahpost, dari sini kita bisa mengatur berbagai tampilan yang berada diantara div dengan menambahkan berbagai property didalam CSS :

.bawahpost{

tambahkan berbagai property disini

}

Misalkan tampilan yang diinginkan adalah mempunyai warna latar biru dan pinggirnya mempunyai garis border serta tulisan didalamnya tidak ingin rapat dengan dinding luar, maka contoh CSS yang di buat seperti ini :

.bawahpost{

padding:10px;

margin:10px 0px;

background:#eeeeee;

border:1px solid #eeeeee;

line-height:1.6em;

}

Kode yang berwarna biru bisa dirubah sesuai selera sobat asal sobat mengenal dasar-dasanya kode CSS. Kode atas tersebut disimpan diatas kode ]]></b:skin> Hasinya seperti ini

.bawahpost{

padding:10px;

margin:10px 0px;

background:#eeeeee;

border:1px solid #eeeeee;

line-height:1.6em;

}

]]></b:skin>

Cara memasukan kode diatas pada template :

1. Login ke blogger dengan ID anda

2. Klik Tata Letak / Layout

3. Klik Tab Edit HTML

4. Backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap. Mengantisipasi jika penambahan kode salah.

5. Klik kotak kecil disamping tulisan Expand Widget Template.

6. Carilah kode ]]></b:skin>, Untuk memudahkan tekan ctrl F / F3 kemudian copy paste kode di bawah ini persis diatasnya :

.bawahpost{

padding:10px;

margin:10px 0px;

background:#eeeeee;

border:1px solid #eeeeee;

line-height:1.6em;

}

7. Carilah kode berikut :

<data:post.body/>

8. Kemudian masukan kode di bawah ini persis di bawah kode diatas :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='separator'
style='clear: both; text-align: justify;'> <a
href='http://www.lintasberita.com//images/wid-mod3.gif' imageanchor='1'
style='margin-left: 1em; margin-right: 1em;'><img border='0'
src='http://www.lintasberita.com//images/wid-mod3.gif'/></a>  <strong>««</strong> Silahkan
temen-temen masukan voting jika merasa artikel ini bermanfaat dan ingin
bisa di baca orang banyak di LintasBerita.com.</div>
<noscript>Powered by www.lintasberita.com visit <a
href='http://www.lintasberita.com/'>Lintas
Berita</a></noscript>

</div>

</b:if>

9. Klik tombol SIMPAN TEMPLATE.

Kode warna biru adalah kode iklan atau apa saja yang sobat ingin masukan.

Maka jadinya seperti gamabr bibawah ini :