Cara Membuat 2 Iklan Adsense Dan Related Artikel/Artikel Terkait di Tengah Postingan ~ Coding IsmyNR - Cara Dan Contoh Pemrograman

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.

2 iklan dan relater artikel

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 :
penempatan cek code

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

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
logoblog

Share :

7 comments:

  1. Replies
    1. Oke, Terima kasih sudah memberikan kesan dan sarannya :)

      Delete
  2. punya saya linknya di tengah, gimana biar rata seperti h4nya (tulisan bacajuga)...biar linknya agak ke kiri.. lurus dengan bacgkground hitam di atasnya

    ReplyDelete
  3. Biar sama persis kayak punya ente gimana om....

    ReplyDelete
    Replies
    1. Di style pada class .related-simplify ul li, paddingnya diubah jadi padding: 9px 9px 9px 0px;
      Disesuain aja padding dan marginnya, coba dulu pake inspect di google chrome biar mudah.

      Delete
  4. Replies
    1. - kalo mau ganti warna background di related post bagian header(atas) ada pada bagian .related-simplify h4 ubah code yang background:#006894; ganti misalnya putih background:#fff; dan untuk ganti warna huruf ubah code yang color:#fff; bisa cari warna hex nya di (https://www.webfx.com/web-design/color-picker/)
      - kalo warna icon panah di bagian .related-simplify ul li:before ubah code yang color:#006894;
      - kalo warna tulisan list nya .related-simplify a ubah code yang color:#006894;
      Ada yang lain ?

      Delete

Berkomentarlah jika ada pertanyaan, Kesan pembaca atau saran yang membangun blog ini.
> Gunakan akun google dan ceklis kolom (Notify Me) agar mendapat notifikasi balasan komentar

 
Back to Top