Membuat Iklan Parallax Pada Blog Non Amp

Masih ingat dengan cara menciptakan iklan parallax pada blog AMP? Kita sanggup menciptakan iklan parallax pada blog AMP dengan gampang dengan proteksi js amp-fx-flying-carpet.

Tentu saja hal tersebut tidak akan bekerja pada blog non AMP alasannya yakni itu khusus untuk blog dengan template AMP.

Lalu bagaimana jikalau kita ingin menciptakan iklan parallax pada blog non AMP?

Banyak yang menanyakan hal ini (iklan parallax pada blog non AMP) kepada saya, dan akhinya aku berhasil membuatnya, menyerupai pada halaman berikut:

DEMO

Iklan parallax ini sanggup untuk banner image, iklan dengan iframe, atau untuk adsense.

Jika Anda ingin mencobanya, silahkan copy kode-kode berikut.

Silahkan simpan aba-aba berikut di atas aba-aba </head>

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

Kemudian simpan aba-aba HTML di bawah ini sempurna di atas aba-aba berikut.

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

Berikut aba-aba HTML-nya.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class="paralax_div">
   <div>
     <div>
       <div>
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzLO44WA9NRNVmAA392d0IwNDmD9HSz0GMGvFqfXgMseOoWDSCZj8_OU7r22788vLIoBo5OxHCCDtOT_9OMgoZBW5XiUWxkB4Lzhm21rwc44m2XckVkGQGtAfZp_AoyEW8WQrTTDuHmxw/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="Membuat Iklan Parallax Pada Blog Non AMP Membuat Iklan Parallax Pada Blog Non AMP" width="300" height="600" />
       </div>
     </div>
   </div>
 <span class="clear"/>
 </div>
 </b:if>

Jika Anda gunakan untuk iklan banner (banner dengan tinggi 600px dan lebar 300px), silahkan ganti url image pada aba-aba di atas.

Jika Anda gunakan untuk iklan dengan iframe atau adsense (iklan 300x600), silahkan ganti tag <img> di atas dengan aba-aba iklan Anda.
Sumber https://www.kompiajaib.com/

Share this post