Cara Membuat Iklan Parallax Scrolling di Posting Blog

Cara Membuat Iklan Parallax di Posting Blog. Apa sih iklan parallax scrolling itu sobat, parallax ini mungkin bisa dikatakan sebuah desain atau efek pada obyek diam saat discroll, setau saya sih begitu, karena memang perkembangan dari design web terus hadir dan semakin menarik untuk diikuti. Para developer pun juga sudah mulai menyesuaikan diri dengan perkembangan tersebut, ya seperti contoh salah satunya dengan teknik iklan parallax ini.

Jelas hal ini untuk mengundang perhatian pembaca pada tampilan iklan tersebut, seperti contoh gambar di atas ini, dan untuk memanjakan mata pembaca dengan membuat tampilan iklan tersebut menjadi parallax, karena kita akan melihat secara keseluruhan gambar tersebut dengan cara menscrolling bagian body web, kurang lebihnya seperti itu penjelasan tentang iklan parallax tersebut, tutorial cara membuat iklan parallax ini saya ambil kodenya dari mas Adhy kompiajaib, sebelumnya terimakasih banyak mas adhi.

Baca Juga : Cara membuat slot iklan baris diblog

Maka untuk update terbaru pun saya tidak mau ketinggalan, dan sekarang jika sobat berminat untuk membuat iklan parallax tersebut diblog sobat, silahkan ikuti tutorialnya..

Cara Membuat Iklan Parallax di Blog

1. Buka akun blogger Anda

2. Pilih menu template >> klik edit HTML

3. Sekarang letakan kode dibawah ini tepat 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>

Selanjutnya sobat cari kode seperti ini <div class='post-body entry-content'

Jika sudah ketemu, lalu letakan kode dibawah ini tepat diatas kode tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8cP41C-SEL5J9EmeIpjgikEzLI0p1MzT8_RMNwx8J1_XKGpXrn2qTuZJTRCtoMfms_lwJ9XXhqAyzhctywaUhJqaC6OatD-IHAWbXNX0nTpBY9SXU-Q7ArlsYfZEMWfMGEzRL5VZqBlYX/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>

Silahkan ganti kode gambar atau banner yang saya tandai warna biru dengan gambar atau banner iklan blog sobat atau bisa juga diganti dengan kode iklan adsense sobat, nah cara membuat iklan parallax tersebut ternyata memang sangat mudah sobat. hehe..