Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Memasang Related Post Dan Iklan Google Adsense Di Tengah Postingan Blogger. Dengan memasang related post dan iklan google adsense akan tampil secara bersamaan di tengah artikel atau postingan.
Maka tampilan postingan blog anda akan terlihat seperti JalanTikus.com, IDNtimes.com, Liputan6.com, Bintang.com ataupun MalesBanget.com dan situs besar lainnya.
Memasang related post dan iklan google adsense di tengah postingan blogger akan memicu nilai CTR atau jumlah klik pada iklan dan juga akan menambah minat pengunjung terhadap artikel-artikel di blog tersebut. Sehingga nilah Bounce Rate pun akan dapat ditekan.
Pada tutorial ini terdapat sedikit penambahan script untuk related post (recommended article), yang berfungsi untuk menampilkan beberapa artikel terkait paling terbaru secara otomatis dari artikel yang tengah dibaca oleh pengunjung. Jika anda tertarik memasang related post dan iklan google adsense di tengah postingan blogger, berikut adalah ulasannya.
Cara Mudah Memasang Related Post Dan Iklan Google Adsense Di Tengah Postingan Blogger
1. Login Bloger > Edit HTML
2. Temukan kode </head> atau </head><!--<head/>--> lalu letakkan kode barikut ini di atas kode tadi.
2. Cari kode berikut ini, atau yang mirip (kode pada masing-masing template kemungkinan akan berbeda).
3. Lalu ganti dengan kode di bawah ini.
4. Tambahkan kode berikut ini di bawah kode tadi.
Sumber Referensi : Bungfrangki
<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>2. Cari kode berikut ini, atau yang mirip (kode pada masing-masing template kemungkinan akan berbeda).
<b:if cond='data:blog.pageType == "item"'>
<div class='artbody' itemprop='articleBody'><data:post.body/></div>
</b:if>3. Lalu 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>4. Tambahkan kode berikut ini di bawah kode tadi.
<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>
Note : Atur jumlah artikel yang akan muncul pada related post dengan mengubah angka pada kode yang ditandai warna merah di atas.
5. Setelah yakin penempatannya sudah benar, silahkan simpan tema.Demikian penjelasan dari saya bagaimana Cara Mudah Memasang Related Post Dan Iklan Google Adsense Di Tengah Postingan Blogger. Jika ada hal yang kurang dipahami silahkan tinggal kan pesan anda di kolom komentar, semoga informasinya bermanfaat dan sampai jumpa di postingan berikutnya.
Sumber Referensi : Bungfrangki