Pasang Iklan Di Akhir postingan

Seperti judul yang tertera diatas,untuk kesempatan kali ini saya ingin berbagi cara memasang Iklan disetiap akhir postingan yang tentunya telah di sesuaikan dengan bentu template blogger..

 

Sengaja memberi contohnya dari blog nya kang rohman, karena kang rohman inspirasi saya,, lanjut deh,, Prinsip awal yang perlu di ingat adalah anda harus mengetahui kode posting blogger, dan kodenya adalah sebagai berikut :

 
<data:post.body/>

Secara logika, jika anda ingin menyimpan sesuatu katakanlah Iklan, maka anda tidak usah pusing, simpan saja kode iklannya di bawah kode tadi, misal ilustrasinya seperti ini :

 
<data:post.body/>
< simpan kode iklan anda disini >

Sangat sederhana bukan? namun itu belum sempurna. Kondisi yang kurang nyaman adalah iklan anda akan muncul setelah posting, namun iklannya akan terlihat juga di halaman depan sehingga pemandangan kurang sedap terhadap blog anda. Solusi yang sederhana adalah anda harus menambahkan sedikit kode tambahan seperti ini :

<data:post.body/>

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

< simpan kode iklan anda disini >

</b:if>

Kode tambahan yang dicetak hijau akan membuat iklan anda tidak akan muncul di halaman depan dan hanya akan muncul pada halaman penuh artikel saja. Sampai disini sebenarnya sudah selesai, namun untuk menambah keindahan misalkan widget yang dipasang mempunyai warna background atau dengan gambar, maka anda bisa menggunakan kode div class, misal seperti ini :

<data:post.body/>

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

<div class=’bawahpost’>

< 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:#e1f2ff; 

border:1px solid #ddd; 

line-height:1.6em; 

}

Kode yang berwarna merah bisa anda kreasikan sesuai dengan imajinasi anda, namun tentu saja anda harus sedikit menguasai dasar-dasar CSS. Lalu dimana kode tersebut disimpan? cara mudah adalah anda meletakkannya di atas kode ]]></b:skin> karena kode tersebut adalah kode penutup CSS pada template blogger.

.bawahpost{ 

padding:10px; 

margin:10px 0px; 

background:#e1f2ff; 

border:1px solid #ddd; 

line-height:1.6em; 

}

]]></b:skin>

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{

padding:10px;

margin:10px 0px;

background:#e1f2ff;

border:1px solid #ddd;

line-height:1.6em;

} 

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

Bagi yang ingin bertanya <strong>PHP / HTML / MySQL</strong> tentang blogging langsung, Deevro rekomendasikan anda belajar <a href='http://www.Deevro.co.cc' rel='nofollow' target='_blank'><strong>di sini</strong></a> &#160;&#160;<strong>&#171;&#171;</strong>&#160;Monggo di klik...

</div> 

</b:if>

* Klik tombol SIMPAN TEMPLATE.

* Selesai.