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?

Cara Menghapus Javascript Widget Bundle Di Blogger Untuk Mempercepat Loading

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 Mempercepat Loading Blog Memakai Lazy Load

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.

Membuat Syntax Highlighter Di Postingan Blogger

<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 Mematikan Klik Kanan Pada Gambar Di Blog

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 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 Iklan Parallax Cara Membuat Iklan Parallax Pada Blog Non AMP - Sahabat Pasti tahu Kan iklan parallax scrolling itu , parallax ini mungkin sanggup ...
Cara Mematikan Klik Kanan Pada Gambar Di BlogBagi kalian yang bekerja sebagai Graphic Designer kemudian sering mengupload atau mengunggah gambarnya ke website atau blog, maka Anda perlu menonakt ...
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 Mengatasi Tidak Dapat Masuk Ke Akun Blogger Penyebab tidak dapat masuk ke akun blogger yaitu lantaran Anda masih memakai profile Google+ pada akun blogger Anda. Google telah mengirimkan pes ...

Cara Menciptakan Iklan Parallax Pada Blog Non Amp

Related Posts