Menempatkan Iklan Di Kiri Atau Kanan Awal Postingan

Menempatkan Iklan Di Kiri Atau Kanan Awal Postingan

Bola Hero Gawai

Menempatkan Iklan Di Kiri Atau Kanan Awal Postingan

Menempatkan iklan di kiri atau kanan awal postingan - Kali ini saya coba menjawab pertanyaan dari mbak +Indri Lidiawati  tentang cara menempatkan slot iklan di sisi kiri atau kanan di awal postingan dan iklan tersebut hanya muncul di halaman postingan.

Untuk memunculkan sesuatu dalam hal ini iklan hanya di postingan, tentunya di sini kita menggunakan tag conditional sehingga dengan ini iklan tidak muncul di post homepage dan tidak mengganggu tampilan homepage. Sebenarnya trik menyimpan iklan di awal postingan sudah banyak di share di Google namun tentunya di sini saya share cara Kompi Ajaib sendiri.


Slot Iklan Di Kiri Atau Kanan Awal Postingan

Untuk menempatkan script iklan di dalam HTML template blog, tentunya yang pertama kali kita lakukan adalah mem-parse script iklannya. Anda bisa mem-parse script iklannya DI SINI.

Kemudian silahkan copy CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau kode </style>. Dengan menggunakan CSS ini kita meminimalisir penggunakan CSS inline di dalam template blog agar tidak terlalu mempengaruhi loading blog.

Kode CSS untuk iklan di sebelah kiri:


.post-ontop{width:300px;height:250px;float:left;margin:0 20px 20px 0;padding:0;background:#fff}

Kode CSS untuk iklan di sebelah kanan:


.post-ontop{width:300px;height:250px;float:right;margin:0 0 20px 20px;padding:0;background:#fff}

Kemudian cari kode seperti di bawah ini atau kira-kira mirip seperti di bawah ini


    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Kemudian tambahkan kode di bawah ini tepat di bawah tag conditional untuk postpage ini <b:if cond='data:blog.pageType == &quot;item&quot;'>


<div class='post-ontop'>
KODE IKLAN DI SINI
      </div>

Sehingga setelah penambahan kode di atas akan tampak seperti di bawah ini


    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-ontop'>
KODE IKLAN YANG TELAH DIPARSE DI SINI
      </div>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Selesai... silahkan save templatenya dan lihat hasilnya.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

60 Comments Add Comment

pertamax...
nyimak aja lahh..:D

Balas

Gimana Kang kalo di awal udah postingan udah ada gambarnya, apa harus dipindahin dulu kang...

Balas

belum ada dan belum niat pasang iklan di blog mas
tetep silahturrahmi ,membaca dan ambil ilmunya yang bermanfaat ini,makasih

Balas

Silahkan mas :)

Balas

Betul mas harus dirubah format postingannya agar tampilan postingannya enak dilihat.

Balas

Mkasih Kang... ntar coba pindahin gambarnya satu2...

Balas

Iya silahkan mas, mudah2an bisa dimengerti

Balas

jadi rajin ngepost nih hehe :]

Balas

selamat siang
nyimak aja kang
soalnya belum bisa pasang iklan.

Balas

saya malah ketinggalan tiga postingan dari mas adhy :-bd jika misalnya kita menggunakan gambar penuh seperti postingan saya, apakah iklan tersebut akan lari kebawah mas?

Balas

Hehehehe ngebales absen kemarin mas :)

Balas

Wah, nge-post lagi..rajin banget Kang. hehehe.... nyimak dulu kang. :)

Balas

Selamat siang juga mas :)
Silahkan disimak mas :)

Balas

Jika kita menggunakan gambar penuh di awal postingan maka postingannya yang akan turun ke bawah, nah untuk mengatasi area kosong di sebelah iklan kita bisa atasi misalnya dengan menambahkan widget subscribe atau mungkin sharing box.

Balas

Hehehe iya itung-itung ngebales absen kemarin sambil mencoba menjawab satu-satu pertanyaan sahabat2 KA :)

Balas

dengan menempatkan iklan di dalam postingan, apakah tidak mengganggu pengunjung membaca artikelnya mas ?
thanks mas, maklum masih oot :)

Balas

Sepertinya kalau di awal postingan atau mungkin di akhir postingan tidak akan mengganggu pembaca asal penempatannya rapih dan jelas. Mungkin iklan yang penempatannya ditengah-tengah postingan yang mungkin akan mengganggu pembaca.

Balas

makasih banyak mas adhy, tipsnya segera saya prakltekkan di blog saya :)
sekali lagi makasih banyak mas Adhy krn telah dibuatkan artikel tentang tips memasang iklan disamping artikel :-bd

Balas

ngak dipindah juga bisa, asal kodi clear:boot dihapus pada div class='sparator' yang ada di gambar

Balas

baru sadar...! kalau foto mas adhy ganti lagi...!, tu umur berapa mas...??!!!

Balas

Sama-sama mbak Indri :) semoga bisa dimengerti :)

Balas

Hehehehe iya mas :) itu photo sekarang mas :)

Balas

oh ya mas, iklannya kenapa ngak nyoba idBlogNetwork, infolink atau chitika?, dari pengalaman saya tu situs CTR-nya lumayan, bahkan nilai klik dari negara tertentu lebih tinggi dari Adsense (menurut pengalaman saya lo ya...!).

Balas

berarti tidak bisa ya mas biar iklan itu yang turun kebawah, bararti harus pake cara manual ya.

Balas

Mungkin bisa saja sis :) coba lakukan beberapa percobaan agar gambar tetap di atas.

Balas

Iya mas saya coba dari Chitika :)

Balas

ijin tes kang..
tapi belum punya iklan :p

Balas

boleh juga nih triknya,,, pasti bisa dapat penghasilan lebih nih,,,
makasih kang,, tapi ini mau cari iklan dulu... hehe

Balas

Cari dulu iklannya mas hehehe :)

Balas

Silahkan mas cari iklan dulu :)

Balas

tidak bisa mas, saya sudah coba dan tidak berhasil, secara logika gambar dan text saling berdempatan, apakah mas adhy ada cara aktenatif lainya. hampir kriting otak saya mas hehehe..

Balas

akhirnya dapat chitika ang,, mau praktek nih,,,

btw mau tanya nih:
kang gimana caranya supaya setelah menekan tombol/link download entar muncul lightbox dengan pesan "Terima kasih sudah mendownload di situs kami..." ?? bikinin tutornya dong.. hehe

Balas

Tutorial yang bermanfaat buat sobat yang suka pasang IKLAN Ya Kang

Balas

maaf kang mau tanya kalau untuk iklan dari GA jika di parse apa tidak menyalahi aturan ya kang...???
selama ini saya belum berani otak atik iklan apalagi diparse :(

Balas

saya coba dulu kang :)

Balas

Iya kang ini buat yang suka pasang Iklan :)

Balas

Jika iklannya disimpan melalui tata letak, maka scriptnya tidak usah diparse. Tapi jika iklannya disimpan melalui edit HTML, maka scriptnya di parse dulu karena biasanya jika tidak diparse iklannya tidak jalan.

Balas

Silahkan mas :)

Balas

di parse ngak masalah mas...! (tidak melagar peraturan) dan bisa berjalan normal.

Balas

Kang untuk Template KompiMales Webfont Icons nya kok tidak muncul yah ? :)

Balas

ok terima kasih kang Adhy n kang Andre atas pencerahannya... :) :-bd

Balas

terima kasih banyak mas atas penjelasannya, sekarang saya sudah lebih paham :)

Balas

Iklan GA ku kok ngga muncul" yah mas, saya taruh dalam post tapi yang lain cepet.

Balas

berapakali bolak balik kesini, tapi iklannya malah ngga muncul, sekali waktu muncul, page malah ngga keluar...sepertinya ada yang ngga pas saat nempelin kodenya nih...:p

Balas

Oh gitu ya... nanti saya lihat :)

Balas

Silahkan mas :)

Balas

Iklan 728x90 sama yang di postingan kiri atas masih berat kang karena belum mendukung asynchronous tapi sudah saya sarankan ke pihak penyedia iklnnya agar scriptnya menggunakan asynchronous. Sedangkan untuk yang Chitika saya menambahkan asynchronous pada scriptnya.

Balas

kalau dibawah posting gimana mas?

Balas

nyimak gan ane pake templet inii

Balas

oya maaf mas Adhy saya merepotkan lagi =D gimana ya caranya menambahkan tulisan teks dibawah judul postingan dan di atas artikel melalui sumber HTML :)

saya ingin menambahkan kalimat satu paragraf bawah judul postingan tapi terhalang iklan :( bagaimana agar bisa menaruh tulisan teks di atas iklan dan di bawah judul postingan :) makasih bantuannya :)

Balas

tambahkan tulisannya di atas class post-ontop seperti ini mbak
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:left;margin-bottom:10px;'>Contoh tulisan di sini</div>
<div class='post-ontop'>
<div class='ad-title'>Advertisement</div>
KODE IKLAN
</div>
<data:post.body/>
</b:if>

untuk text-align dan margin-nya sesuaikan dengan kondisi.

Balas

makasih banyak mas Adhy, sdh saya praktekkan dan hasilnya benar2 100% sesuai dengan yg saya harapkan :-bd

Balas

Setelah sy coba tutor kang Adhy di atas ternyata tidak muncul iklannya @@, jd inget kang adhy dulu pernah bisikin kl tidak mencoba2 tidak akan bisa, hehe mmg bener beda template pasti beda rasa =D dan akhirnya pun ketemu, sy cb tempatkan kode yg sdh di phrase tsb pas di atas kode 'post-body entry-content' dan taraaa munculah si iklan kesayangan... makasi banyak kang Adhy :-bd

Balas

muup ralat maksud sy di tempatkan di atas data:post.body/ nya hehehe =D muup kang Adhy faktor terlalu bersemangat koment...

Balas
This comment has been removed by the author.

Mantep gan, klo ane simpennya diatas <data:post.body/>. Klo cara diatas kagak muncul-muncul. Thx gan tutornya

Balas

untuk responsivenya gimana kang

Balas

Kalau boleh tanya ni mas, jika postingan blog ada gambar yang letakkanya disamping, kemudian kita memasang iklan disamping, apakah akan otomatis atau malah bentrok mas, kemudian untuk iklan adsense, boleh ngak ya diparse. Maaf ya jika banyak tanya

Balas

Biasanya gambar dan postinga akan turun ke bawah mas, jadi kita perlu memperbaiki postingan yang memiliki gambar di awal samping. Sepertinya bisa mas karena parse adalah bukan merubah kode namun merubah tanda baca tertentu menjadi kode html sehingga akan lebih aman di edit html.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×