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.
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.
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.
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
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 z, 0 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:
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 :
Menjadi disini:
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