Cara Menciptakan Iklan Parallax Scrolling Di Posting Blog

Cara Membuat Iklan Parallax di Posting Blog. Apa sih iklan parallax scrolling itu sobat, parallax ini mungkin dapat dikatakan sebuah desain atau efek pada obyek membisu ketika discroll, setau saya sih begitu, alasannya yaitu memang perkembangan dari design web terus hadir dan semakin menarik untuk diikuti. Para developer pun juga sudah mulai mengikuti keadaan dengan perkembangan tersebut, ya menyerupai referensi salah satunya dengan teknik iklan parallax ini.

Jelas hal ini untuk mengundang perhatian pembaca pada tampilan iklan tersebut, menyerupai referensi gambar di atas ini, dan untuk memanjakan mata pembaca dengan menciptakan tampilan iklan tersebut menjadi parallax, alasannya yaitu kita akan melihat secara keseluruhan gambar tersebut dengan cara menscrolling bab body web, kurang lebihnya menyerupai itu klarifikasi wacana iklan parallax tersebut, tutorial cara menciptakan iklan parallax ini saya ambil kodenya dari mas Adhy kompiajaib, sebelumnya terimakasih banyak mas adhi.

Baca Juga : Cara menciptakan slot iklan baris diblog

Maka untuk update terbaru pun saya tidak mau ketinggalan, dan kini kalau teman berminat untuk menciptakan iklan parallax tersebut diblog sobat, silahkan ikuti tutorialnya..

Cara Membuat Iklan Parallax di Blog

1. Buka akun blogger Anda

2. Pilih sajian template >> klik edit HTML

3. Sekarang letakan arahan dibawah ini sempurna diatas arahan </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 teman cari arahan menyerupai ini <div class='post-body entry-content'

Jika sudah ketemu, kemudian letakan arahan dibawah ini sempurna diatas arahan tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinnFk2wUfIQ1Fv8cpIwb9g1fGpXhkaulJNl4Ao7WxePxc4wgsgjEBYgxtIin_Q02exQ7o2ATmdNeUjNm5kTT-l_PLrcdifmkmIBWQkOs4T7lI0H8SHn6gMFN7MSUV2C_fy77YhuK1QrQWq/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="Cara Membuat Iklan Parallax di Posting Blog Cara Membuat Iklan Parallax Scrolling di Posting Blog" width="300" height="600" />
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>

Silahkan ganti arahan gambar atau banner yang saya tandai warna biru dengan gambar atau banner iklan blog teman atau dapat juga diganti dengan arahan iklan adsense sobat, nah cara menciptakan iklan parallax tersebut ternyata memang sangat gampang sobat. hehe..