Iklan parallax scroll di blog, PURJIANTO.WEB.ID – Bagi sebagian besar blogger memasang iklan di dalam postingan atau di sidebar adalah hal yang wajib, iklan yang sering kalian temukan di blog para blogger rata-rata adalah iklan adsense.
Bisa di bilang menjadi publisher adsense susah susah gampang, bagaimana tidak untuk mendaftarkan diri menjadi publisher di google adsense perlu perjuangan yang extra dan bukan cuma itu, perawatan kebersihan blog juga harus selalu dijaga sesuai dengan ToS yang ada di blog adsense.
Kali ini saya akan berbagi artikel tentang cara memasang iklan parallax atau iklan yang ketika blog kita scroll kebawah iklan akan tetap pada posisi dan iklan yang pas untuk ini adalah iklan yang berukuran 300×600. Disini yang akan kita pasang iklan adalah blog bukan AMP
 |
| Iklan parallax scroll di blog |
Cara pertama memasang Iklan parallax scroll di blog non blog AMP
Untuk memasang iklan parallax di blog non AMP, silahkan masuk ke Edit HTML pada blog kalian lalu cari </head>
Lalu letakkan code dibawah ini tepat diatas </head>
<b:if cond='data:blog.pageType == "item"'>
<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>Cara kedua memasang Iklan parallax scroll di blog non blog AMP
Lalu cari code berikut
<div class='post-body entry-content' ........Cara ketiga memasang Iklan parallax scroll di blog non blog AMP
Pasang code berikut dibawah code tersebut
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
Isi dengan iklan kalian
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>Silahkan ganti Isi dengan iklan kalian dengan script yang sudah kalian parse terlebih dahulu, biasanya para blogger menggunakan iklan ukuran 300×600.
Demikian artikel yang membahas tentang Iklan parallax scroll di blog semoga bermanfaat untuk para blogger yang sedang ingin memasang iklan parallax atau iklan scrool
Pencarian terkait google:
- membuat iklan parallax
- parallax scrolling adsense