Cara Membuat 2 Iklan Adsense Dan Related Artikel/Artikel Terkait di Tengah Postingan

Saya memodifikasi dan mendapatkan widget ini dari salah satu postingan bungfrangki.com dan arlinadzgn.com, saat itu saya sedang mencari bagaimana cara memasang 2 iklan adsense dan artikel terkait secara bersamaan, tentunya artikel terkait berada ditengah2 iklan, akan tetapi setelah saya mencarinya tidak ketemu, daripada pusing2 saya akhirnya mencoba memodifikasi html, dan css dari salah satu artikel mereka.

Dan akhirnya saya berhasil memasang 2 iklan adsense dan artikel terkait di tengah postingan dengan jarak yang bisa di tentukan, tetapi jarak yang di tentukan tersebut menggunakan per paragraph.

Walaupun begitu lumayan loh, dengan 2 iklan di tengah postingan tersebut bisa menambah klik iklan dari pengunjung, serta artikel terkait ini bisa memudahkan pengunjung untuk menjelajahi blog anda, 

Karena di penelusuran masih jarang di temukan, saya bagikan saja di blog, barangkali ada yang cari2 seperti saya dan tidak mau pusing2 membuatnya.

Cara membuat artikel terkait dan iklan adsese di tengah tengah postingan

Sebelumnya jika anda sudah mempunyai artikel terkait di tengah postingan, jangan di hapus dulu, anda backup saja di notepad sementara. tetapi jika anda langsung mengganti saja semua nya dengan tutorial ini bisa mengikuti tutor di bawah ...

1. Menempatkan JAVASCRIPT RelatedPost 

Cari code berikut ini :
</head> kalo tidak ketemu cari kode &lt;!--</head>--&gt;&lt;/head&gt; kalo masih belum ketemu cari &lt;/head&gt;&lt;!--<head/>--&gt;

Kalo sudah ketemu copy code berikut ini... dan pastekan di ATAS code tadi yang sudah dicari

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type='text/javascript'>
  //<![CDATA[
  var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
  //]]>
 </script>
</b:if>

2. Menempatkan Style CSS Related Artikel 

Lalu cari code ini :
</style> atau bisa juga ]]></b:skin>

Setelah sudah ketemu, copy lagi code CSS di bawah ini untuk style artikel terkaitnya, dan pastekan di ATAS/SEBELUM code yang sudah dicari tadi :

.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#006894;padding:8px 12px;margin:0;font-size:14px;font-weight:400;color:#fff;}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#fff;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid #fff;border-bottom:0;transition:all .3s}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#006894;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#006894;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#34495e;}
.related-simplify ul li:nth-child(n+5) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

silahkan jika anda ingin mengganti style nya ...

3. Pengecekan Posisi Iklan Adsensenya dan Artikel Terkait

Cari code dibawah ini

<data:post.body/>

Pasti ada banyak codenya, biasanya code yang tepat seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tp kalo misakan ragu atau beda, anda cari satu satu aja, pastikan bahwa itu benar, kalo anda belum tau letak <data:post.body/> yang sesuai anda bisa mengikuti cara ini, dengan mengecek satu-satu codenya, kalo sudah ketemu LEWATIN aja lanjut ketahap 4.

UNTUK CEK SAJA :
1. Ganti satu-persatu code <data:post.body/>tadi dengan code dibawah ini :

<div expr:id='&quot;post1&quot; + data:post.id'/>
 <div class='related-simplify' style="background-color:red; height:40px; border:3px solid blue"></div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>

<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Jadi seperti ini :

lalu lihat di blog kamu ada tanda warna merah atau tidak ?

Jika ada dan tepat pada tengah2 postingan seperti gambar diatas, berarti code <data:post.body/>adalah code yang tepat.

Jangan lupa hapus code tadi yang ditambahkan, di tandai saja posisi tersebut.

4.  Menetapkan Posisi Artikel Terkait di Antara 2 Iklan Adsense

Selanjutnya ganti code <data:post.body/>yang sudah di cek tadi, dengan code di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div class='adsTengah ads_middle' id='middleAds1'>
            <div style='clear:both;'>
              <center>
                <!--Code adsense yang sudah diparse, ditaruh disini-->
              </center>
            </div>
          </div>
          <div class='postTerkait ads_middle2' id='middleAds2'>
            <div style='clear:both;'>
              <div class='related-simplify'>
                <b:if cond='data:post.labels'>
                  <b:loop values='data:post.labels' var='label'>
                    <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>
                </b:if>
                <h4>Jangan Lupa Baca Ini Juga :</h4>
                <script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script>
              </div>
            </div>
          </div>
          <div class='adsTengah ads_middle3' id='middleAds3'>
            <div style='clear:both;'>
              <center>
                <!--Code adsense yang sudah diparse, ditaruh disini-->
              </center>
            </div>
          </div>
      <div id='tgtPost'><data:post.body/></div>
      <script type='text/javascript'>  function insertAfter(tbh,tgt) {
        var prt = tgt.parentNode;
        if (prt.lastChild == tgt) {prt.appendChild(tbh);}
        else {prt.insertBefore(tbh,tgt.nextSibling);}}
        var tgt = document.getElementById(&quot;tgtPost&quot;);
        var midAd1 = document.getElementById(&quot;middleAds1&quot;);
        var midAd2 = document.getElementById(&quot;middleAds2&quot;);
        var midAd3 = document.getElementById(&quot;middleAds3&quot;);
        var showAd1 = tgt.getElementsByTagName(&quot;br&quot;);
        var showAd2 = tgt.getElementsByTagName(&quot;p&gt;&quot;);
        var showAd3 = tgt.getElementsByTagName(&quot;p&gt;&quot;);
        if (showAd1.length &gt; 0) {insertAfter(midAd1,showAd1[3]);}
        if (showAd2.length &gt; 0) {insertAfter(midAd1,showAd2[3]);}
        if (showAd3.length &gt; 0) {insertAfter(midAd1,showAd3[3]);}
        if (showAd1.length &gt; 0) {insertAfter(midAd2,showAd1[8]);}
        if (showAd2.length &gt; 0) {insertAfter(midAd2,showAd2[8]);}
        if (showAd3.length &gt; 0) {insertAfter(midAd2,showAd3[8]);}
        if (showAd1.length &gt; 0) {insertAfter(midAd3,showAd1[13]);}
        if (showAd2.length &gt; 0) {insertAfter(midAd3,showAd2[13]);}
        if (showAd3.length &gt; 0) {insertAfter(midAd3,showAd3[13]);}
      </script>
    </b:if>

Selesai

Jangan lupa ganti code <!--Code adsense yang sudah diparse, ditaruh disini--> dengan code iklan adsense yang SUDAH DIPARSE

Untuk mengganti penempatan sudah saya katakan di atas postingan dengan menggunakan per paragraph, jadi anda bisa mengganti :

• Ganti angka [3] pada code midAd1,showAd1[3], midAd1,showAd2[3], midAd1,showAd3[3] sesuaikan dengan selera. itu untuk bagian Iklan yan pertama sebelum penempatan artikel terkait.
• Ganti angka [8] pada code midAd2,showAd1[8], midAd2,showAd1[8], midAd2,showAd1[8] sesuaikan dengan selera. itu untuk bagian Artikel terkait
• Ganti angka [13] pada code midAd3,showAd1[13], midAd3,showAd1[13], midAd3,showAd1[13] sesuaikan dengan selera. itu untuk bagian Iklan setelah penempatan Artikel terkait

Jika angka yang anda ubah banyak, maka akan semakin kebawah sesuai dengan paragraph yang anda masukan itu.

Kalo misalkan anda ingin ada jarak di antara tulisan postingan dengan iklan adsense, tambahkan kode CSS berikut di atas </style> atau ]]></b:skin>

.adsTengah{margin:10px auto;padding:0;width:100%;height:auto;overflow:hidden;}

Kalo misalkan ingin ngecek berjalan di tengah postingan seperti tadi lagi tanpa memasang code adsense dulu, tambahkan css dalam .adsTengah jadi seperti ini :

.adsTengah{margin:10px auto;padding:0;width:100%;height:auto;background-color:red;height:40px;border:3px solid blue}

Kalo sudah sesuai jangan lupa untuk menghapus lagi yang buat ngecek penempatannya(yang berwarna Abu-abu tua) setelah itu tinggal masukan code adsense yang sudah di parse, dan lihat hasilnya.

tag:
membuat iklan adsense di tengah postingan
membuat 2 iklan adsense di tengah postingan
membuat artikel terkait dan iklan di tengah postingan
cara agar iklan adsense dan post terkait berada di tengah postingan
cara menempatkan iklan adsense di tengah postingan
memasang iklan adsense dan related artikel