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 Menciptakan Sitemap (Daftar Isi) Di Blog Versi Lengkap

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.

Artikel Agan Ke 100 Blog Terbaik

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 Memasang Gambar Background Random Di 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 Menambahkan Emoticon Di Komentar Blogspot

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 Memasang Dan Modifikasi Label Cloud Keren Di Blogger Mempercantik tampilan blog merupakan hal yang perlu dilakukan oleh setiap blogger, ada banyak cara untuk menciptakan tampilan blog semakin menarik ...
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 Menciptakan Sitemap (Daftar Isi) Di Blog Versi LengkapApa itu sitemap? Sitemap jikalau diterjemahkan ke dalam Bahasa Indonesia berarti Peta Situs, yakni kumpulan link atau tautan yang mengarah ke posting ...
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 Menambahkan Emoticon Di Komentar Blogspot alasannya yaitu meningkatnya pengguna medsos (media sosial) dan ingin mennggunakan emoticon lucu untuk berkomentar diblog. Cara menambahkan emotica ...
Cara Menghilangkan Icon Obeng Dan Tang Atau Quick Edit Di Blogger Pengguna blogger mungkin sering melihat ada icon gambar obeng dan tang kecil di bab widget atau sidebar blog. Icon obeng dan tang ini merupakan t ...

Cara Menciptakan Iklan Parallax Pada Blog Non Amp

Related Posts