Cara Menciptakan Iklan Parallax Membisu Dikala Postingan Di Scroll
Memasang iklan efek membisu walaupun postingan di scroll ke Atas. Iklan ini biasanya di sebut iklan parallax. Untuk penempatan iklan parallax biasanya di bab atas samping postingan blog. Nah kali ini blog ini akan menawarkan informasi pembelajaran wacana Coding yakni pemasangan iklan parallax di blogspot atau blogger.
Untuk ukuran iklan yang biasanya di pakai yakni ukuran 300×600. Bagi kalian yang ingin memasang nya simak di bawah ini mengenai tutorial memasang script iklan parallax di postingan blog.
Langkah langkah:
1). Masuk ke akun blogger
2). Masuk Tema/ Template- Edit HTML
3). Ketikan CTRL+F dan cari isyarat <head>.
Copy dan pastekan isyarat di bawah ini sempurna di bawah Kode <head>.
4). Selanjutnya tekan CTRL+F Cari kode <div class='post-body entry-content'.
Copy isyarat di bawah dan pastekan sempurna di atas isyarat tersebut.
5). Ganti kode
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiQSDH83WkKL7iLbGBsLBhNcth57pqvipgHFBJrQJCukhX9jYeFHIq-aV6I1XlwAQofFiSg8tgA2VGmLnKWMEeMolXVerjXYWrdrCRe4botUBFdVRz0C2gmPDXvoqgxLEK5KM5gJLPwHg/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt=" Memasang iklan efek membisu walaupun postingan di scroll ke Atas Cara Membuat Iklan Parallax Diam Ketika Postingan Di scroll" width="300" height="600" /
Dengan script iklan milik kalian
Save dan lihat hasilnya.
Demikian tutorial mengenai cara pemasangan iklan parallax di postingan. Baca juga artikel Cara memasang iklan melayang di bab bawah blog.
Untuk ukuran iklan yang biasanya di pakai yakni ukuran 300×600. Bagi kalian yang ingin memasang nya simak di bawah ini mengenai tutorial memasang script iklan parallax di postingan blog.
Langkah langkah:
1). Masuk ke akun blogger
2). Masuk Tema/ Template- Edit HTML
3). Ketikan CTRL+F dan cari isyarat <head>.
Copy dan pastekan isyarat di bawah ini sempurna di bawah 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> 4). Selanjutnya tekan CTRL+F Cari kode <div class='post-body entry-content'.
Copy isyarat di bawah dan pastekan sempurna di atas isyarat tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiQSDH83WkKL7iLbGBsLBhNcth57pqvipgHFBJrQJCukhX9jYeFHIq-aV6I1XlwAQofFiSg8tgA2VGmLnKWMEeMolXVerjXYWrdrCRe4botUBFdVRz0C2gmPDXvoqgxLEK5KM5gJLPwHg/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt=" Memasang iklan efek membisu walaupun postingan di scroll ke Atas Cara Membuat Iklan Parallax Diam Ketika Postingan Di scroll" width="300" height="600" />
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>
5). Ganti kode
Baca Juga
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiQSDH83WkKL7iLbGBsLBhNcth57pqvipgHFBJrQJCukhX9jYeFHIq-aV6I1XlwAQofFiSg8tgA2VGmLnKWMEeMolXVerjXYWrdrCRe4botUBFdVRz0C2gmPDXvoqgxLEK5KM5gJLPwHg/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt=" Memasang iklan efek membisu walaupun postingan di scroll ke Atas Cara Membuat Iklan Parallax Diam Ketika Postingan Di scroll" width="300" height="600" /
Dengan script iklan milik kalian
Save dan lihat hasilnya.
Demikian tutorial mengenai cara pemasangan iklan parallax di postingan. Baca juga artikel Cara memasang iklan melayang di bab bawah blog.