Cara Pasang Iklan Dan Related Artikel Terkait Ditengah Postingan Blogspot

Memasang iklan dan related post (recomended artikel) serta artikel terkait ditengah postingan blogspot tidak cuma bakal membawa dampak jumlah klik atau angka CTR pada iklan, serta bakal meningkatkan penjelajahan user kepada artikel- artikel di website Anda. Selain itu Bounce Rate juga akan bisa ditekan.

Hanya saja pada tutorial kali ini ada sedikit perhitungan script bagi related post atau recommended article, yang berperan menunjukkan sebagian artikel terkait sangat terkini dengan cara otomatis dari artikel yang tengah dibaca oleh user.

Pemasukan dari iklan adsense pastinya tidak terbebas dari banyaknya jumlah klik serta pula seberapa kerap iklan itu tampak pada postingan yang didatangi. Buat jumlah klik pastinya bakal lebih penting hasilnya sebab adsense sendiri ialah tipe promosi CPC( Cost Per Click) yang maksudnya publisher bakal dibayar pada saat terdapat orang yang melaksanakan klik pada suatu iklan.

Begitu juga sebaliknya buat jumlah iklan yang tampak hasilnya bakal cukup besar kala iklan itu timbul pada 1000 tayangan postingan yang dibaca pengunjung ataupun sebutan yang lain yakni CPM( Cost Per Million).

Bagi para blogger yang telah berhasil dari Blogging posisi iklan yang kerap sekali memperoleh klik merupakan promosi yang terletak di tengah postingan. sebab, bila promosi diletakan diposisi itu sehingga iklan itu bakal nampak berpadu dengan konten serta berpotacensi pula memperoleh klik.

Contoh iklan dan related post pada blogspot bisa dilihat pada gambar dibawah ini :

Tentukan Jenis Iklan

Nah jika Anda hendak memasang iklan pastinya Anda harus menentukan terlebih dahulu platform advertisernya, Anda bisa menggunakan platform seperti google adsense, mgid, atau bahkan Anda bisa membuat iklan banner sendiri.

Kali ini penulis memilih menggunakan platform google adsense karena banyak digunakan oleh kalangan blogger. Jenis iklan pada google adsense terdiri dari iklan display, iklan dalam feed, iklan dalam artikel dan multipleks.

Jika Anda hendak memasukan iklan di dalam artikel maka pilihlah iklan dalam artikel, klik saja menu box iklan dalam artikel. Kemudian silahkan setting atau sesuaikan dengan keinginan Anda, namun kami lebih menyarankan centang saja opsi gaya yang di optimalkan google. Kemudian simpan dan dapatkan kode.

Pasang Iklan dan related artikel pada blogspot

Temukan dan cari kode </head> atau </head> kemudian letakkan kode dibawah ini di atas dari kode tadi:

<b:if cond=’data:blog.pageType == "item"’>
<style type=’text/css’>
/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>

<script type=’text/javascript’>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’alternate’){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write(‘<ul>’);while(i<relatedTitles.length&&i<3){document.write(‘<li><a href=”‘+relatedUrls[r]+’”>’+relatedTitles[r]+'</a></li>’);if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write(‘</ul>’);document.write();};
//]]>
</script>
</b:if>

Cari dan temukan kode dibawah ini, atau yang mirip dengan kode dibawah (kode pada template atau thema memiliki perbedaan):

<b:if cond=’data:blog.pageType == "item"’>
<div class=’artbody’ itemprop=’articleBody’><data:post.body/></div>
</b:if>

Kemudian ganti dengan kode di bawah ini:

<b:if cond=’data:blog.pageType == "item"’>
<div class=’widget-middle’ id=’widget-middle’ itemprop=’articleBody’><data:post.body/></div>
</b:if>

Tambahkan kode berikut ini di posisi bawah kode diatas:

<b:if cond=’data:blog.pageType == "item"’>
<div class=’inline_wrapper’ id=’inline_wrapper’>
<div class=’related_inline_wrapper’ id=’related_inline_wrapper’>
<!– Related posts inline –>
<div class=’related-post-by-title’ id=’related-post-by-title’>
<h4>Baca juga:</h4>
<b:loop values=’data:post.labels’ var=’label’> <b:if cond=’data:label.isLast != "true"’/> <b:if cond=’data:blog.pageType == "item"’> <script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"’ type=’text/javascript’/></b:if> </b:loop> <script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
<!– Related posts inline –>
</div>
<div class=’ads_middle’> <!– ADS MIDDLE POST –>
<span>Advertisement</span>
// kode Iklan yang sudah diparse, letakkan disini
</div>
</div>
<script type=’text/javascript’>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById("inline_wrapper");var target = document.getElementById("widget-middle");
var opsi1 = target.getElementsByTagName("br");if (opsi1.length > 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName("blockquote");if (opsi2.length > 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName("h2");if (opsi3.length > 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Anda bisa menyesuaikan dan mengatur jumlah artikel terkait yang akan muncul pada related post dengan mengganti angka 3 (warna merah) pada kode di atas. Setelah itu jika sudah yakin benar penempatannya, silahkan simpan tema blogspot Anda.

Ketika Anda sudah menyimpan thema, maka buka artikel di blog Anda untuk melihat perubahan. Dan jika masih tidak puas dengan tampilan dan modelnya, silahkan modifikasi CSS di atas sesuai dengan style Anda.