Cara Memasang Iklan Dan Related Post Di Tengah Postingan
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 mendongkrat penjelajahan pengunjung terhadap artikel-artikel di blog tersebut. Sehingga nilah Bounce Rate pun akan sanggup ditekan.
(Baca : Cara mengatur arahan iklan Secara Otomatis dengan tag HTML Heading)
Artikel ini masih sangat berafiliasi dengan tutorial sebelumnya, terkait cara terbaru memasang iklan di tengah postingan, 100% work! Silahkan baca terlebih dahulu artikel tersebut.
Hanya saja pada tutorial ini terdapat sedikit penambahan script untuk related post (recommended article), yang berfungsi menamilkan beberapa artikel terkait paling terbaru secara otomatis dari artikel yang tengah dibaca oleh pengunjung. Demonya menyerupai pada blog ini.
Untuk menciptakan widget menyerupai ini gotong royong sangat mudah, silahkan ikuti tutorial berikut ini secara melek.
Temukan kode
Cari arahan berikut ini, atau yang menyerupai (kode pada masing-masing template kemungkinan akan berbeda):
Lalu ganti
Tambahkan arahan berikut ini di bawah arahan tadi:
Atur jumlah artikel yang akan muncul pada related post dengan mengubah angka pada arahan yang ditandai warna merah di atas.
Setelah 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.
Dengan memasang iklan dan related post tampil secara bersamaan di tengah artikel/postingan, maka tampilan blog post Anda akan terlihat menyerupai JalanTikus.com, IDNtimes.com, Liputan6.com, Bintang.com ataupun MalesBanget.com dan lainnya.
Demikian cara memasang iklan dan related post di tengah postingan pada Blogger/Blogspot. Semoga work 100% dan terima kasih! (Sumber By:Bungfangkri) Sumber https://www.britablogger.com/
(Baca : Cara mengatur arahan iklan Secara Otomatis dengan tag HTML Heading)
Artikel ini masih sangat berafiliasi dengan tutorial sebelumnya, terkait cara terbaru memasang iklan di tengah postingan, 100% work! Silahkan baca terlebih dahulu artikel tersebut.
Hanya saja pada tutorial ini terdapat sedikit penambahan script untuk related post (recommended article), yang berfungsi menamilkan beberapa artikel terkait paling terbaru secara otomatis dari artikel yang tengah dibaca oleh pengunjung. Demonya menyerupai pada blog ini.
Memasang iklan dan related post/recommended article di tengah postingan pada Blogger.
Untuk menciptakan widget menyerupai ini gotong royong sangat mudah, silahkan ikuti tutorial berikut ini secara melek.
Temukan kode
</head> atau </head><!--<head/>--> lalu letakkan arahan barikut ini di atas arahan 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 arahan berikut ini, atau yang menyerupai (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>
Lalu ganti
<b:if cond='data:blog.pageType == "item"'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>
Tambahkan arahan berikut ini di bawah arahan tadi:
<b:if cond='data:blog.pageType == "item"'>(Baca : Cara Memasang Adsense Di Bagian Tengah Posting Blogger)
<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>
// arahan 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 sasaran = 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>
Atur jumlah artikel yang akan muncul pada related post dengan mengubah angka pada arahan yang ditandai warna merah di atas.
Setelah 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.
Dengan memasang iklan dan related post tampil secara bersamaan di tengah artikel/postingan, maka tampilan blog post Anda akan terlihat menyerupai JalanTikus.com, IDNtimes.com, Liputan6.com, Bintang.com ataupun MalesBanget.com dan lainnya.
Demikian cara memasang iklan dan related post di tengah postingan pada Blogger/Blogspot. Semoga work 100% dan terima kasih! (Sumber By:Bungfangkri) Sumber https://www.britablogger.com/