Cara Menciptakan Iklan Parallax Pada Blog Non Amp

Iklan Parallax

Cara Membuat Iklan Parallax Pada Blog Non AMP - Sahabat Pasti tahu Kan iklan parallax scrolling itu , parallax ini mungkin sanggup dikatakan sebuah desain atau efek pada obyek membisu ketika discroll, setau aku sih begitu, alasannya ialah memang perkembangan dari design web terus hadir dan semakin menarik untuk diikuti. Para developer pun juga sudah mulai mengikuti keadaan dengan perkembangan tersebut, ya menyerupai teladan salah satunya dengan teknik iklan parallax ini. Masih ingat dengan cara menciptakan iklan parallax pada blog AMP? Kita sanggup menciptakan iklan parallax pada blog AMP dengan gampang dengan pertolongan js amp-fx-flying-carpet.

Tentu saja hal tersebut tidak akan bekerja pada blog non AMP alasannya ialah itu khusus untuk blog dengan template AMP.
Lalu bagaimana kalau 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:
Iklan parallax ini sanggup untuk banner image, iklan dengan iframe, atau untuk adsense.

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

Cara Memasang Live Chat Facebook Messenger Di Blogger

Silahkan simpan arahan berikut di atas arahan </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 arahan HTML di bawah ini sempurna di atas arahan berikut.

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

Berikut arahan HTML-nya.

Cara Posting Artikel Di Blogger Untuk Pemula

<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/AVvXsEjBoL1l9l22Ro_sE0jA_beGH66P58OXLiogg60JRtYR8BIhZlM0PoXzeNiQvXax0lXpaUASyJkDNSi5uZws0RZxlymdOZ98tgQlKciqG-H87vDHzx8xP_mVknqKdthj4k0MJb1SyC2KqHk8/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="Cara Membuat Iklan Parallax Pada Blog Non AMP Cara 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 arahan di atas. Jika Anda gunakan untuk iklan dengan iframe atau adsense (iklan 300x600), silahkan ganti tag di atas dengan arahan iklan Anda.

Jika artikel Cara Membuat Iklan Parallax Pada Blog Non AMP ini teman rasa bermanfaat juga buat orang lain atau teman sahabat, silahkan share melalui Email, Twitter, Facebook, ataupun melalui Google+ memakai icon yang tersedia di bawah ini.Thansk

Cara Menonaktifkan Pemberitahuan Email Dari Google+ (Plus)

Sumber https://infoandrocodax.blogspot.com/

<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/AVvXsEjBoL1l9l22Ro_sE0jA_beGH66P58OXLiogg60JRtYR8BIhZlM0PoXzeNiQvXax0lXpaUASyJkDNSi5uZws0RZxlymdOZ98tgQlKciqG-H87vDHzx8xP_mVknqKdthj4k0MJb1SyC2KqHk8/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="Cara Membuat Iklan Parallax Pada Blog Non AMP Cara Membuat Iklan Parallax Pada Blog Non AMP" width="300" height="600" />       </div>     </div>   </div> <span class="clear"/> </div> </b:if>

Cara Mengatasi Tombol Reply Komentar Blog Tidak Dapat Di KlikBagi pengguna blogger mungkin Anda penasaran, tiba-tiba tombol reply atau tombol balas komentar di blog error tidak dapat di klik. Hal ini terjadi d ...
Cara Menciptakan Notifikasi Untuk Pengguna Adblocker Adsense AdBlocker Adsense Cara Membuat Notifikasi Untuk Pengguna AdBlocker Adsense - Hallo Sahabat Kali ini aku akan menciptakan sebuah artikel tentang&n ...
Cara Menghapus Javascript Widget Bundle Di Blogger Untuk Mempercepat Loading- Artikel kali ini yaitu undangan dari Teman - Teman blogger melalui formulir kontak yang menanyakan cara menghapus CSS, Javascript, dan Widget Bunde ...
Cara Menciptakan Blog Yang Ringan, Valid Html5, Dan Seo Friendly Blog yang baik itu blog yang menyerupai apa sih? Sobat Blogger, salah satu cara yang cukup efektif untuk mendatangkan pengunjung ke blog kita yaitu ...
Artikel Agan Ke 100 Blog Terbaik Artikel Agan Ke 100 Blog Terbaik Assallamualikum sahabat perkenalkan nama aku Egi Supiyudin admin di artikel agan usia aku 24 tahun, asal bandung ...
Cara Menciptakan Table Of Contents (Menu Daftar Isi) Di Postingan Blogger - Menu Daftar Isi Atau yang biasa disebuat dengan Table Of Contents (TOS) yaitu daftar yang terdiri dari poin atau bab dari subjek yang terkandung d ...

Cara Menciptakan Iklan Parallax Pada Blog Non Amp

Related Posts