Membuat iklan muncul sesuai dengan kategori posting

Trik

Trik ini masih menggunakan tag Conditional yang telah saya tulis sebelum untuk "Membuat tampilan template berbeda dengan tag Conditional" dalam setiap kategori, perbedaannya hanya syntax atau exsekusi yang di tujukan adalah sebuah element. dengan mengatur munculnya iklan sesuai kategori akan membuat pengunjung lebih mudah mlihat iklan anda terutama untuk template toko online.

Contoh seperti ini: Anda mempunyai beberapa iklan banner. Masing-masing iklan banner tersebut berbeda target pengunjungnya, misal iklan banner satu target pengunjungnya seputar ekonomi, iklan banner dua target pengunjungnya seputar politik maka iklan banner yang kesatu hanya ingin muncul pada kategori ekonomi, dan banner yang kedua ingin muncul hanya pada kategori politik.

Hal-hal yang dicontohkan diatas bisa sobat coba lakukan dengan kode if conditional category seperti di bawah ini:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;kategori satu&quot;'>
Kode iklan 1 yang diinginkan
<b:else/>
<b:if cond='data:label.name == &quot;kategori dua&quot;'>
Kode iklan 2 yang diinginkan
</b:if>
<b:else/>
<b:if cond='data:label.name == &quot;kategori tiga&quot;'>
Kode iklan 3 yang diinginkan
</b:if>
</b:if>
</b:loop>

Di atas adalah tag conditional yang memuat tiga contoh kategori yang masih kosong. kemudian simak contoh di bawah ini:

Contoh Pertama

Iklan google adsense hanya muncul pada saat kategori uang di kunjungi, selain kategori itu yang muncul adalah iklan tokobaguscom :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;uang&quot;'>
Kode iklan adsense yang ada
<b:else/>
Kode iklan tokobaguscom
</b:if>
</b:loop>

Contoh kedua

Iklan google adsense tidak ingin muncul khusus pada saat kategori blogger dikunjungi :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;blogger&quot;'>
<b:else/>
Kode iklan adsense yang ada
</b:if>
</b:loop>

Praktek sedikit untuk memperjelas trik ini:

Saya memiliki dua banner yang berbeda { lihat gambar di bawah }



Kemudian, saya ingin memunculkan banner pertama hanya pada kategori teknologi dan banner kedua pada kategori kuliner, maka kode tag conditional yang saya buat adalah:

untuk kode banner:

<a href='http://www.yuuhu.info/' title='gadget yuuhu'><img alt='gadget info' border='0' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2OogE2aJXpN4eaB3VaanP5uaYVNmSL21P6UHlwT4aXzmGxkgLy9yyQvdRR1ynEn9gXkWoU8eGCxEmcf9-Fa9lJl9Eg7mols8i3en0vDzF8jHtKOeJydpvjfnbjTyFNLVeW2Lr8ylDc8/s1600/gadget.png' /></a>

<a href='http://www.yuuhu.info/' title='Kuliner Yuuhu'><img alt='kuliner yuuhu' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnKNgAzaLI1deTFPyGFhGYPwA-14BrqnmvlF4K4N4F3mqZFUQKaQpQU-9SZmRtkOF2YLHOw-ABGp3op7Ni3sT8tLarLje-dRkTTwE0dCKqha9lYRQxlUPcMFA5hsopCZQm5AwW0JSVuVY/s1600/kuliner.png' /></a>

untuk kode tag conditionalnya seperti berikut:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;teknologi&quot;'>
<a href='http://www.yuuhu.info/' title='gadget yuuhu'><img alt='gadget info' border='0' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2OogE2aJXpN4eaB3VaanP5uaYVNmSL21P6UHlwT4aXzmGxkgLy9yyQvdRR1ynEn9gXkWoU8eGCxEmcf9-Fa9lJl9Eg7mols8i3en0vDzF8jHtKOeJydpvjfnbjTyFNLVeW2Lr8ylDc8/s1600/gadget.png' /></a>
<b:else/>
<b:if cond='data:label.name == &quot;kuliner&quot;'>
<a href='http://www.yuuhu.info/' title='Kuliner Yuuhu'><img alt='kuliner yuuhu' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnKNgAzaLI1deTFPyGFhGYPwA-14BrqnmvlF4K4N4F3mqZFUQKaQpQU-9SZmRtkOF2YLHOw-ABGp3op7Ni3sT8tLarLje-dRkTTwE0dCKqha9lYRQxlUPcMFA5hsopCZQm5AwW0JSVuVY/s1600/kuliner.png' /></a>
</b:if>
</b:if>
</b:loop>

Langkah selanjutnya adalah untuk menentukan iklan itu akan disimpan di element mana? Sebagai contoh iklan tersebut ingin ditempatkan diatas posting dan hanya muncul pada single post (di halaman depan tidak muncul), maka kode tag conditional yang sesuai adalah seperti berikut:

<b:if cond='data:blog.pageType == "item"'>
<p>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;teknologi&quot;'>
<a href='http://www.yuuhu.info/' title='gadget yuuhu'><img alt='gadget info' border='0' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2OogE2aJXpN4eaB3VaanP5uaYVNmSL21P6UHlwT4aXzmGxkgLy9yyQvdRR1ynEn9gXkWoU8eGCxEmcf9-Fa9lJl9Eg7mols8i3en0vDzF8jHtKOeJydpvjfnbjTyFNLVeW2Lr8ylDc8/s1600/gadget.png' /></a>
<b:else/>
<b:if cond='data:label.name == &quot;kuliner&quot;'>
<a href='http://www.yuuhu.info/' title='Kuliner Yuuhu'><img alt='kuliner yuuhu' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnKNgAzaLI1deTFPyGFhGYPwA-14BrqnmvlF4K4N4F3mqZFUQKaQpQU-9SZmRtkOF2YLHOw-ABGp3op7Ni3sT8tLarLje-dRkTTwE0dCKqha9lYRQxlUPcMFA5hsopCZQm5AwW0JSVuVY/s1600/kuliner.png' /></a>
</b:if>
</b:if>
</b:loop>
</p>
</b:if>

Kode tersebut harus ditempatkan persis diatas kode <data:post.body/>.
Dan simpan. semoga berguna dan bermanfaat...

Artikel Terkait

  • Breadcrumb Microdata valid HTML5
    Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan. Hal ini terbukti dari beberapa postingan blog sesepuh seperti, kang ismet,…
  • Pencarian dengan tombol bersihkan
    Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda. Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link i…
  • Membatasi jumlah posting di halamam label
    Seringkali terkadang jumlah posting yang muncul di halaman search label blogger melebihi jumlah yang sudah kita terapkan di pengaturan dasar, ketik kita telah mengatur jumlah posting yang muncul di halaman beranda blogger dengan jumlah maksimal misalkan sepuluh posting maka poating yang akan muncul di halaman label akan tetap berada di jumlah…
  • Cara membuat penomoran otomatis pada tag pre
     Setelah sebelumnya saya share cara membuat header judul pada tag pre kali ini saya mau berbagi tentang cara bagaiman memberi urutan nomor pada tag pre yang bisa langsung hanya dengan menambahkan css saja dan sedikit penambahan kode html pada elemen tag pre. untuk bagaimana hasilnya silahkan di lihat di blog ini. langsung ke topik pembah…
  • Responsive Video, Embed, Object dan img
    Masih tentang responsive, kali ini sesuai dengan judul saya shara cara membuat responsive pada Video, Iframe, Embed dan Object dan img. membuat responsive Untuk video, iframe, embed dan object pada intinya hampir sama yaitu tetap memberi satuan %. Saat ini embed video yang paling banyak digunakan adalah Youtube, namun terlepas dari youtube ada…
  • Cara membuat judul header untuk tag pre
    Selamat malam sobat blogger kali ini saya mau berbagi tentang cara dan trik membuat judul pada tag pre demo lihat blog ini, biar blognya tambah keren dan terlihat bagus. untuk demo dan hasilnya silahkan lihat di blog ini. cara dan langkahnya cukup mudah silahkan saja ikuti trik di bawah ini. pertama silahkan buka editor template blogger sobat…

3 komentar

  1. mau nanyak gan...... kode yang anda berikan kog tidak cocok di template saya / error...
    apakah ada cara yang lain mengenai trik tersebut gan?
    mohon jawabannya

    BalasHapus
    Balasan
    1. errornya dima sob, kalo bisa kasih ssnya. biar saya lihat :)

      Hapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...