menu melayang

POP UP NOTIFIKASI PEMBELI

Rabu, 06 September 2017

Cara Memasang iklan dan Related post di tengah Postingan Blogger

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 dapat ditekan.

Hanya saja pada tutorial ini terdapat sedikit penambahan script untuk related post (recommended article), yang berfungsi menampilkan beberapa artikel terkait paling terbaru secara otomatis dari artikel yang tengah dibaca oleh pengunjung. 

Demonya seperti pada blog ini :

Cara Memasang Iklan dan Related Post di Tengah Postingan

Memasang iklan dan related post/recommended article di tengah postingan pada Blogger

Untuk membuat widget seperti ini sebetulnya sangat mudah, silahkan ikuti tutorial berikut ini secara melek.

Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; lalu letakkan kode barikut ini di atas kode tadi:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 kode berikut ini, atau yang mirip (kode pada masing-masing template kemungkinan akan berbeda):
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='artbody' itemprop='articleBody'><data:post.body/></div>
</b:if>

Lalu ganti dengan kode di bawah ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>

Tambahkan kode berikut ini di bawah kode tadi:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' 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(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Atur jumlah artikel yang akan muncul pada related post dengan mengubah angka pada kode 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 seperti JalanTikus.com, IDNtimes.com, Liputan6.com, Bintang.com ataupun MalesBanget.com dan lainnya.

Blog Post

Related Post

Back to Top

Translate


Cari Artikel

tag

Jasa video animasi Arsitektur & Desain, Jasa video animasi Buku Bangunan, Jasa video animasi Buku Codes & Standars, Jasa video animasi Buku Dekorasi & Ornamen, Jasa video animasi Buku Desain Dapur, Jasa video animasi Buku Desain Kamar, Jasa video animasi Buku Desain Ruang Keluarga, Jasa video animasi Buku Desain Ruang Tamu, Jasa video animasi Buku Desain Rumah, Jasa video animasi Buku Interior & Eksterior, Jasa video animasi Buku Metode, Jasa video animasi Buku Taman, Jasa video animasi Material Bangunan, Jasa video animasi Buku Hukum, Jasa video animasi Buku Gender & Hukum, Jasa video animasi Buku Hukum Dagang, Jasa video animasi Buku Hukum Perdata, Jasa video animasi Buku Hukum Internasional, Jasa video animasi Buku Hukum Pidana, Jasa video animasi Buku Kemanusiaan, Jasa video animasi Buku Politik & Hukum, Jasa video animasi Kumpulan Peraturan Perundang-Undangan, Jasa video animasi UUD 1945, Jasa video animasi Buku Import, Jasa video animasi Agriculture Book Import, Jasa video animasi Art & Novel Import, Jasa video animasi Child & Teenager Book Import, Jasa video animasi Computer Book Import,