Ketika anda mengunjungi media media besar anda pernah melihat sebuah iklan yang ada di background postingan. Kemudian konten tetap bergulir dan iklan perlahan hilang. Memang agak susah dijelaskan secara kata kata jenis iklan ini.
 |
| Parralax ad |
Apa itu Iklan Parallax
Sebenarnya jenis yang dinamakan Parallax ini adalah sebuah bentuk cara pemasangan iklan. Anda mengenal tentu iklan di sidebar berupa banner. Iklan floating, nah parallax ini sebagai salah satu saudaranya.
Iklan ini terlihat lebih bagus ketika dikunjungi melalui gadget dengan ukuran layaran kecil, seperti handphone. Agar kita saling memahami, bisa diperhatikan video di bawah ini,
Nah jika anda ingin memasang iklan tersebut pada blog dengan cms blogger, berikut langkah memasang iklan parallax tersebut. Baca juga: Cara Memasang Iklan Adsense di tengah Postingan Blog
Langkah Memasang Iklan Parallax pada Blogspot
Tempatkan kode di bawah ini dibawah tag <head> atau </head> pada editor template blog anda.
<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> Kemudian dilanjutkan dengan meletakkan kode pemanggil di bawah ini di bawah <div class='post-body entry-content'
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
PASTE KODE IKLAN YANG SUDAH DI PARSE DISINI
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if> Anda harus ingat, kode iklan yang akan dimasukkan adalah kode iklan yang sudah di parse. Untuk parse kode iklan bisa di halaman https://andasedangmencari.blogspot.com/search?q=parse
Masukkan kode iklan di kolom atas otomatis akan muncul hasil parse di kolom bawahnya.
Jika sudah selesai, Simpan template anda. maka terakhir silakan lihat hasilnya.
Share Yuk
Related Posts
Loading...