Cara Menciptakan Iklan Parallax Pada Blog Non Amp - Gasskeun Cara Menciptakan Iklan Parallax Pada Blog Non Amp | Gasskeun
» » Cara Menciptakan Iklan Parallax Pada Blog Non Amp

Cara Menciptakan Iklan Parallax Pada Blog Non Amp

Cara Membuat Iklan Parallax Pada Blog Non AMP Cara Membuat 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.

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.

<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
Sumber https://infoandrocodax.blogspot.com/

Related Posts