Cara Membuat Iklan Scrolling / Parallax Di Blog (Non AMP)


Memasang iklan Adsense dengan penempatan yang tepat serta desain keren layaknya wesbsite Profesional menjadi idaman kaum blogger saat ini,

Anda mungkin sedang mencari tutorial cara membuat tampilan iklan yang mengikut judul Artikel saat di scrolling kebawah?

Kebetulan, Setelah sebelumnya saya memposting Tutorial Cara Mengoptimalkan Pendapatan Adsense kali ini Omboolom akan membagikan trik memasang Iklan Adsense dengan tampilan Parallax

Untuk membuat desain iklan Parallax Anda diharuskan menambahkan CSS dan HTLM pada template yang dirancang oleh mas Adhy Suryadi pemilik blog Kompi Ajaib yang berfungsi secara optimal

Penerapan Iklan parallax di blog Amp sangat mudah karena bantuan amp-fx-flying-carpet yang befungsi dengan baik, tapi untuk blog non Amp script tersebut tidak bekerja sama sekali karena hanya di khusukan di Blog AMP saja.

Untuk itu, berikut tutorial cara membuat Iklan AdSense Parallax Di blog non AMP

Langkah Pertama salin kode di bawah ini dan pastekan di bawah kode atau sebelum




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

<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
position: relative;
overflow: visible;
width:` 300px;
height: 250px;
margin-right: 20px;
display: inline-block;
float: left;
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 auto;
-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: #ddd;
}
.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: 250px;
margin: 0 auto;
float: none;
}
.paralax_div > div > div > div {
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.paralax_div > div > div {
width: 100%;
left:0;
text-align: center;
}
.paralax_div img {
margin: 0 auto;
width:auto;
max-width:100%;
height:auto;
}
}
@media screen and (max-width:320px) {
.paralax_div iframe,.parallax_banner ins {
margin: 0 auto;
width:100%;
height:600px;
}
}
/*]]>*/
</style>
</b:if>

Langkah Kedua Cari Kode Dibawah Ini




<div class='post-body entry-content'

Langkah Ketiga ganti dengan kode dibawah ini



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


<div class="paralax_div">
<div>
<div>
<div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-30322xxxxxxx" data-ad-slot="7917xxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>


Langkah terakhir pratinjau dan simpan Nah itulah cara membuat iklan parallax di blog, mudah mudahan bermanfaat

Selamat Blogging....

Reactions:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser