AdityaTekno.com - Cara Memasang Iklan dan Related Post (Artikel Terkait) ditengah Postingan atau Artikel. Memasang iklan dan related post (artikel terkait), recommended article di tengah postingan atau artikel, selain akan memicu nilai CTR/jumlah klik pada iklan, juga akan mendongkrak penjelajahan pengunjung terhadap artikel-artikel di blog tersebut. Sehingga nilai Bounce Rate pun akan dapat ditekan.
Nah, bagus kan untuk meningkatkan CTR dan juga bisa mendongkrak penjelajahan pengunjung terhadap artikel kita.
Bagi yang sudah penasaran, langsung ikuti tutorialnya dibawah.
Cara Memasang Iklan dan Related Post/Recommended Article di Tengah Postingan atau Artikel pada Blogger
Untuk membuat widget seperti ini sebenarnya sangatlah mudah, jadi tidak perlu khawatir jika gagal. Kalau gagal ya coba lagi sampe work. Silahkan ikuti tutorialnya berikut ini.
- Buka Blogger.
- Masuk ke Tema >> Edit HTML.
- Copy dan Paste kan kode dibawah tepas diatas kode </head>.
- Klik simpan.
<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>Kemudian lanjut ke langkah selanjutnya.
Cari kode berikut, atau yang mirip (kode pada masing-masing template kemungkinan akan berbeda jadi cari yang mirip saja) :
<b:if cond='data:blog.pageType == "item"'>
<div class='artbody' itemprop='articleBody'><data:post.body/></div>
</b:if><b:if cond='data:blog.pageType == "item"'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if><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>Jangan lupa atur juga jumlah artikel yang akan muncul pada related post dengan mengubah angka pada kode yang ditandai di atas. Letakkan kode iklan di // kode Iklan yang sudah diparse, letakkan disini.
Jika sudah yakin penempatannya sudah benar, silahkan simpan tema.
Buka salah satu artikel di blog anda untuk preview. Jika tidak puas dengan model tampilannya, silahkan ubah CSS di atas.
Baca Juga :
Dengan memasang iklan dan related post tampil secara bersamaan di tengah artikel/postingan, maka tampilan blog post anda akan terlihat seperti JalanTikus.com, IDNtimes.com, Liputan6.com, Bintang.com dan juga MalesBanget.com.
Demikian Cara Memasang Iklan dan Related Post (Artikel Terkait) ditengah Postingan atau Artikel. Good luck dan sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.