Memasang iklan efek diam walaupun postingan di scroll ke Atas. Iklan ini biasanya di sebut iklan parallax. Untuk penempatan iklan parallax biasanya di bagian atas samping postingan blog. Nah kali ini blog ini akan memberikan informasi pembelajaran tentang Coding yaitu pemasangan iklan parallax di blogspot atau blogger.
Untuk ukuran iklan yang biasanya di pakai yaitu 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 kode <head>.
Copy dan pastekan kode di bawah ini tepat di bawah Kode <head>.
4). Selanjutnya tekan CTRL+F Cari kode <div class='post-body entry-content'.
Copy kode di bawah dan pastekan tepat di atas kode tersebut.
5). Ganti kode
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgABhx88SwHe2HsaW4-RChZZ7J2JOmeSQW8Yt4S_dXqrha2II45RyK8cJ2cYdT4UQBIUVwN2frYZ2vUeX7hu9uxnKzKR5uVFEwrt-dE0UKAsNXE_wq-jTcKyHsbzgrxXqC4zp7faIlM_PDq/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" 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 bagian bawah blog.
Untuk ukuran iklan yang biasanya di pakai yaitu 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 kode <head>.
Copy dan pastekan kode di bawah ini tepat 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 kode di bawah dan pastekan tepat di atas kode tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgABhx88SwHe2HsaW4-RChZZ7J2JOmeSQW8Yt4S_dXqrha2II45RyK8cJ2cYdT4UQBIUVwN2frYZ2vUeX7hu9uxnKzKR5uVFEwrt-dE0UKAsNXE_wq-jTcKyHsbzgrxXqC4zp7faIlM_PDq/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>
5). Ganti kode
Baca Juga
- Cara Mengaktifkan Dan Melihat, Menghapus Komentar Di postingan Blog
- Membuat Iklan Melayang Dengan Tombol Close Lewat Tata Letak Html
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgABhx88SwHe2HsaW4-RChZZ7J2JOmeSQW8Yt4S_dXqrha2II45RyK8cJ2cYdT4UQBIUVwN2frYZ2vUeX7hu9uxnKzKR5uVFEwrt-dE0UKAsNXE_wq-jTcKyHsbzgrxXqC4zp7faIlM_PDq/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" 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 bagian bawah blog.
Labels:
ADPATI GAME,
ADSENSE,
BLOG,
TUTORIAL
Thanks for reading Cara Membuat Iklan Parallax Tetap Diam Ketika Postingan Di scroll ke atas. Please share...!
