Cara memasang iklan parallax di tengah artikel

Blog.santai - Pada artikel kali ini saya akan membuat parallax di blogger, iklan parallax sendiri merupakan salah satu modifikasi penempatan iklan adsensel yang menurut saya unik, sebab ketika scroll artikel maka akan keluar iklan banner  melalui celah kosong tersebut. 

iklan parallax inilah yang sering sekali di pakai oleh situs situs berita, lantas apakah iklan jenis ini bisa di pakai di blogger !

Tentu saja bisa, maka dari itu saya akan memberikan cara memasang iklan parralax di blog. bila ingin mencobanya jangan lupa ikuti langkah langkah sebagai berikut .

Cara memasang iklan parallax di tengah artikel

• Pertama, Anda login blogger
• Buka bagian tema lalu klik edit HTML
• Lalu cari kode <data:post.body/>

Kode diatas tentunya ada yang sama, anda bisa mencobanya satu persatu. untuk di template viomagz berada di posisi ke- 3 

• Bila anda sudah menemukan <data:post.body/> lalu ganti kode tersebut dengan kode script 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>

Perhatian :

Silahkan anda ganti tanda xxxxxx dengan kode id banner anda dengan ukuran 300x600 dan jangan lupa di parse terlebih dahulu. 

Tahap terakhir, Silahkan anda copy kode CSS di bawah ini lalu tempelkan di atas </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>

simpan dan lihat hasilnya, sekian pembahasan kita tentang membuat iklan parallax di tengah artikel