Cara Memasang Iklan Parallax Di Tengah Artikel

Pada artikel sebelum nya saya juga sempat membahas tentang Cara Memasang Matched Content Adsense Di Tengah Artikel dan pada artikel kali ini sebenar nya hampir sama cara nya. Yang membedakan pada artikel kali ini yaitu Bagaiamana Cara Memasang Untuk Iklan Parallax Di Tengah Artikel.

Sobat pernah tidak melihat atau mengunjungi situs - situs berita yang dimana di artikel tersebut di bagian tengah nya terlihat Bolong dan terdapat iklan banner di dalam nya. Nah model semacam itu di nama kan Iklan Parallax. Tentu nya cara memasang iklan parallax tersebut sudah banyak para blogger yang membuat artikel tersebut tapi sayang nya tidak banyak juga yang membuat Cara Memasang Iklan Parallax Di Tengah Artikel.

Pada kesempatan kali ini saya akan mencoba membagikan Cara Memasang Iklan Parallax Di Tengah Artikel. Bila sobat ingin mencoba nya, sobat bisa ikuti langkah - langkah nya sebagai berikut.

Cara Memasang Iklan Parallax Di Tengah Artikel

Langkah pertama yang perlu sobat lakukan yaitu, silahkan sobat cari kode seperti kode di bawah ini.

<data:post.body/>

Kemungkinan kode di atas tentu nya ada beberapa yang sama. Sobat bisa coba satu persatu yang sekira nya posisi nya berada pas di tengah artikel. Kalo di template saya kode tersebut ada pada bagian kode ke 4. Contoh kode nya seperti ini kira - kira.

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

Setelah sobat sudah menemukan kode <data:post.body/> langkah selanjut nya silahkan sobat ganti kode <data:post.body/> 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='ads_middle'> <!-- ADS MIDDLE POST -->
  <span>Baca Juga :</span> 

<div class="paralax_div">
  <div>
    <div>
      <div>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
    </div>
  </div>
<span class="clear"/>
</div>

  </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>

Dan silahkan ganti tanda xxxxxx dengan kode ID iklan Banner sobat masing - masing dengan ukuran 300x600. Dan jangan lupa untuk di parse kode iklan tersebut. Ingat kode iklan nya saja yang di parse yaa. Untuk memparse kode iklan adsense sobat bisa kunjungi Disini.

Dan tahap terakhir silahkan sobat copy kode CSS di bawah ini, lalu letakan kode tersebut di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 600px;
  margin-left: 30%;
  display: inline-block;
  float: none;
  z-index: 9999;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 600px;
    margin: 0;
    float: none;
  }
.paralax_div > div > div > div {
  left: 55%;
  top: 10%;
}
}
/*]]>*/
</style>
</b:if>

Ukuran CSS di atas sudah saya sesuaikan seresponsive mungkin, tapi bila di template sobat agak sedikit berbeda silahkan sobat edit css di atas dan sesuaikan dengan ukuran template sobat masing - masing.

Untuk demo nya sobat bisa lihat pada iklan parallax yang berada di tengah artikel pada artikel ini. ( kalo masih belum berubah).

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini, semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Memasang Iklan Parallax Di Tengah Artikel. Selamat mencoba!

Share this post