Cara Memasang Iklan Parallax Di Tengah Artikel

Pada artikel sebelum nya saya juga sempat membahas perihal 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 ialah Bagaiamana Cara Memasang Untuk Iklan Parallax Di Tengah Artikel.

Sobat pernah tidak melihat atau mengunjungi situs - situs gosip yang dimana di artikel tersebut di bab 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 menciptakan artikel tersebut tapi sayang nya tidak banyak juga yang menciptakan Cara Memasang Iklan Parallax Di Tengah Artikel.

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

Cara Memasang Iklan Parallax Di Tengah Artikel

Langkah pertama yang perlu sahabat lakukan yaitu, silahkan sahabat cari instruksi menyerupai instruksi di bawah ini.

 <data:post.body/>

Kemungkinan instruksi di atas tentu nya ada beberapa yang sama. Sobat sanggup coba satu persatu yang sekira nya posisi nya berada pas di tengah artikel. Kalo di template saya instruksi tersebut ada pada bab instruksi ke 4. Contoh instruksi nya menyerupai ini kira - kira.

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

Setelah sahabat sudah menemukan instruksi <data:post.body/> langkah selanjut nya silahkan sahabat ganti instruksi <data:post.body/> dengan instruksi 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 sasaran = 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 instruksi ID iklan Banner sahabat masing - masing dengan ukuran 300x600. Dan jangan lupa untuk di parse instruksi iklan tersebut. Ingat instruksi iklan nya saja yang di parse yaa. Untuk memparse instruksi iklan adsense sahabat sanggup kunjungi Disini.

Dan tahap terakhir silahkan sahabat copy instruksi CSS di bawah ini, kemudian letakan instruksi tersebut di atas instruksi </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 jikalau di template sahabat agak sedikit berbeda silahkan sahabat edit css di atas dan sesuaikan dengan ukuran template sahabat masing - masing.

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

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