Cara Membuat Iklan Parallax di Blog - Apa itu Iklan Parallax? Iklan parallax adalah sebuah iklan ketika seorang pengunjung blog melakukan scrolling masih berada tepat di tempatnya tanpa bergeser sedikitpun, (setahu saya begitu). Dengan memasang iklan parallax di blog dan penempatan yang tepat selain dapat menambah CTR, semakin keren, dan terlihat semakin profesional.
Anda mungkin sedang mencari bagaimana cara memasang iklan parallax di blog? Sebelumnya saya juga pernah membahas tentang pemasang iklan, tutorialnya dapat anda simak melalui Cara Memasang Iklan Adsense Di Antara Postingan Blog.
Cara ini saya dapatkan dari salah satu blog yang membahas tentang tutorial blog, yaitu Kompi Ajaib milik mas Adhy Suryadi. Pada kesempatan yang sama juga telah menerbitkan tutorial membuat iklan parallax di blog AMP.
Nah, anda penasaran cara membuat iklan parallax di blog non amp, simak di bawah ini.
1. Buka akun Blogger > Template > Edit HTML.
2. Salin kode dibawah ini dan simpan diatas kode "</head>".
3. Kemudian simpan kembali kode dibawah ini tepat diatas kode html "<div class='post-body entry-content' ...."
4. Simpan template.
Keterangan
Dengan demikian Cara Membuat Iklan Parallax di Blog Non AMP telah selesai dilakukan, manfaatkan metode iklan ini untuk menarik pengunjung blog sehingga pendapatan pemasang iklan yang anda lakukan akan semakin meningkat.
Anda mungkin sedang mencari bagaimana cara memasang iklan parallax di blog? Sebelumnya saya juga pernah membahas tentang pemasang iklan, tutorialnya dapat anda simak melalui Cara Memasang Iklan Adsense Di Antara Postingan Blog.
Cara ini saya dapatkan dari salah satu blog yang membahas tentang tutorial blog, yaitu Kompi Ajaib milik mas Adhy Suryadi. Pada kesempatan yang sama juga telah menerbitkan tutorial membuat iklan parallax di blog AMP.Nah, anda penasaran cara membuat iklan parallax di blog non amp, simak di bawah ini.
Cara Membuat Iklan Parallax Di Blog Template Non AMP
1. Buka akun Blogger > Template > Edit HTML.
2. Salin kode dibawah ini dan simpan diatas kode "</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>
3. Kemudian simpan kembali kode dibawah ini tepat diatas kode html "<div class='post-body entry-content' ...."
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
<!-- IKLAN BANNER DISINI -->
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>
4. Simpan template.
Keterangan
Untuk penemapatan iklan dapat anda pasang di bawah tulisan "<!-- IKLAN BANNER DISINI -->" namun sebelum itu jangan lupa untuk parse kode iklan tersebut supaya tidak terjadi kesalahan.
Dengan demikian Cara Membuat Iklan Parallax di Blog Non AMP telah selesai dilakukan, manfaatkan metode iklan ini untuk menarik pengunjung blog sehingga pendapatan pemasang iklan yang anda lakukan akan semakin meningkat.
