Blog e arek Mblitar..
ISLAM CORNER | HANDPHONE | WINDOWS TRICK | SEO | SOFTWARE | VIRUS | ISENG | CBOX TRICK | CSS TUTORIAL | HACKING | BLOGGING TIPS | INTERNET | HTML TUTORIAL |

Cara Memasang Iklan di Setiap 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..

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.
Langkah diatas hanyalah sebagai contoh saja, kata-kata yang berwarna merah tentu saja bisa diganti sesuai keperluan anda. Hasilnya nanti adalah akan terlihat sebuah kotak berwarna biru pada setiap akhir posting anda.



Hasilnya adalah widget dibawah post satu kolom, jika ingin membuat dua kolom berdampingan diperlukan sedikit variasi pada kode CSS nya. Semoga dapat sedikit difahami.

8 comments:

mencobasukses said...

Blog walkingkawan

ekoOk said...

salam kunjungan :D nice info

Gaptek said...

Warnanya gak ada tuh di postingan mu sob??



he

SAlam kenal Dri blogger Gaptek

Mbahnya ILmu said...

agak membingungkan gan, tp saya coba dulu dah.. makasih gan :)

Zarnadi said...

gan aku mau tanya ni diblog aku kok nggak ada nya ya.....? gimana solusinya....?
http://gudangilmu-zarnadi.blogspot.com

putroe intan said...

bisa di praktekkan, trima kasih banyak sharing nya :)

kunjungi juga blog ku ya mas putroe intan

Leadership Developmant Training said...

kunjungan gan .,.
saat kau kehilangan arah ingatlah masih ada yang menolong mu
dan tetap berdoa mengharap untuk menemukan jalanmu.,.
di tunggu kunjungan balik.na gan.,.

sherlina halim said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : asianbet77@yahoo.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
http://asianbet77.com/

TULIS KOMENTAR ANDA..!!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger