Online Web Tutorial

Membuat Iklan di Tengah Artikel dengan JQuery

Membuat Iklan di Tengah Artikel dengan JQuery

FSodic.ID - Halo para omnivora, gimana tethering temen lancar? Atau temen mulai pelit dimintain tetheringan? sabar saja kalo begitu Posting akhir bulan kali ini adalah tentang memindahkan iklan ke lokasi-lokasi yang lebih strategis. Yup, karena ditemplate wapblog sendiri kita tidak bisa memaksa memasukan iklan kedalam tag/function yang sudah tersedia, maka kita harus memindahkan iklannya secara manual melalui Client-Side.

Nah, ngebahas mindahin iklan kemarin atau beberapa hari lalu ada nih yang nanya diforum wapblog bagaimana cara memindahkan iklan dibagian tengah artikel (https://forum.wapblog.id/lainnya/tak-berkategori/1288/cara-pasang-iklan.htm). Dan disitulah saya terfikirkan untuk membuat artikel ditengah-tengah sibuknya saya

Langsung saja kita mulai, sebagai contoh disini saya menggunakan yllix.com. Untuk mendaftar, saya tidak menjelaskan bagaimana rinciannya, silahkan mendaftar sendiri

Oke pertama kalian siapkan dahulu template yang akan kalian gunakan, dan pastikan memiliki JQuery apabila belum memiliki jquery silahkan dipasang untuk tutorial JQuery bisa cari di Google. Pasang javascript berikut dibawah javascript JQuery:

<script>$(document).ready(function(){
blogAds();
});
function blogAds(){
  var __lDa = window.location.pathname, __lDb = $('.ikn').html();
  if(__lDa.match(/\/([a-z0-9\-]+).xhtml/g)){
    var __typePage = 'article'
  } else {
    var __typePage = 'index'
  }

  if(__typePage == 'index'){
    $('.blog-article article').each(function(iXa){
      if(iXa == 0){
        $(this).after('<div class="ikn-me ikn-index">'+__lDb+'</div>');
        $('.ikn').remove();
      }
    });
  } else if(__typePage == 'article'){
    $('article .article-content p').each(function(iXb){
      if(iXb == 1){
        $(this).after('<div class="ikn-me ikn-article">'+__lDb+'</div>');
        $('.ikn').remove();
      }
    });
  }
}</script>

Catatan kecil, saya menempatkan iklan dalam html dengan class ikn, yang mana html dalam kelas tersebut akan kita salin kebagian yang diinginkan.
Membuat Iklan di Tengah Artikel dengan JQuery

Selanjutnya kita bahas tentang lokasi, disini saya menggunakan Dev tools yang tersedia di browser untuk melihat lokasi yang akan saya targetkan sebagai tempat menindahkan iklan yllix saya. Kita mulai dari Index.
Membuat Iklan di Tengah Artikel dengan JQuery

Diatas, posting saya terletak tepat didalam .blog-article (class blog-article) dengan tag article. Yang mana kita akan lihat dalam code tadi $('.blog-article article').each yang artinya tag tersebut akan diloop (tapi tidak ada eksekusi dari kode).
Variable iXa sendiri adalah integer dari loop each. dalam code javascript diawal artikel kalian akan melihat iXa == 0 yang memerintahkan iklan akan dieksekusi pada perintah ini.
Lanjut kebagian bawahnya, $(this).after  memerintahkan html pada class ikn (bagian paling awal code) diletakan setelah .blog-article article - 1 (loop default dimulai dari 0, 1, 2, 3 ...).

Oke, bagian index sudah cukup jelaskan? bagi yang belum jelas silahkan direnungi dan dicoba sendiri agar paham

Nah apabila code kalian benar, ketika membuka bagian index, kategori atau halaman 1, 2, 3 kalian akan melihat iklan kalian pindah kebagian ini.
Membuat Iklan di Tengah Artikel dengan JQuery

Sekali lagi saya ingatkan, bahwa artikel posting tergantung pada template masing-masing yang kalian gunakan pada blog, pastikan untuk menganalisa dan mencari sendiri kriteria dari posting index kalian.

Oke kita lanjut kebagian artikel, konten atau posting. Tapi sebelumnya saya lupa menjelaskan bagian berikut yang harusnya saya sampaikan diawal
Membuat Iklan di Tengah Artikel dengan JQuery

Nah gambar diatas adalah code yang kita gunakan untuk menentukan dimana posisi atau halaman apa yang sedang kita buka saat ini. Untuk posting-posting blog di WapBlog.ID semuanya memiliki url http://subdomain.example.com/url-posting.xhtml yang sama persis dari blog satu ke blog lain. Sehingga kita menggunakan Regular Expression (atau kalian lebih mengenal sebutan Regex) diawali tanda /, lalu a hingga z0 sampai 9 dan simbol - dan diakhiri .xhtml. Untuk menentukan apakah saat ini sedang membuka posting atau index blog.

Oke, pada bagian artikel kurang lebih sama cara mengeksekusi code untuk memindahkan iklan:
Membuat Iklan di Tengah Artikel dengan JQuery

Pada blog saya, semua artikel menggunakan tag paragraft <p> dari article .article-content sehingga saya memindakan iklan kebagian paragraft  ke 2. Nah bagian ini tidak terlalu panjang karena penjelasannya sudah sama persis dengan penjelasan diawal. Dan iklan saya akan berpindah dari :
Membuat Iklan di Tengah Artikel dengan JQuery
Menjadi disini:
Membuat Iklan di Tengah Artikel dengan JQuery

Oiya, code yang saya bagikan merupakan contoh diblog saya ini. Sehingga kalian harus melakukan analisa sendiri dimana target iklan blog kalian akan kalian pasang. Kalian bisa menggunakan cara manual didalam posting untuk dengan class sendiri sehingga lebih mudah menentukan posisi iklan kalian.

Oke cukup sekian posting saya kali ini, kita berjumpa lagi di episode yang akan datang