Cara membuat banner iklan Scroll Parallax di situs blog.

YG tech blog - Menampilkan iklan menarik dengan banner scroll parallax .Keberadaan iklan di dalam sebuah artikel di blog dan situs terkadang akan membuat pengunjung merasa terganggu dan tidak nyaman. Namun ada beberapa cara untuk menyiasatinya agar pengunjung merasa nyaman dan bahkan merasa tertarik untuk melakukan klik terhadap iklan yang di tampilkan.

Hal tersebut bisa dimungkinkan jika tampilan iklan yang berada dalam artikel terlihat menarik dan memberikan pengalaman yang memuaskan bagi pengunjung. Untuk itulah kali ini akan coba memgulas cara memasang dan menerapkan Iklan dengan menggunakan banner Scroll parallax.

Banner iklan scroll parallax adalah tampilan iklan yang berada di dalam artikel atau konten yang apabila kita scroll kebawah maka tampilan iklan akan muncul layaknya dari jendela, scroll terus kebawah maka tampilan tersebut seolah akan tenggelam begitupun sebaliknya jika kita melakukan scroll keatas.

Berikut ini cara membuat Banner iklan scroll parallax.

• 1. Masuk ke Blogger.com
• 2. Klik Tema > Edit HTML
• 3. Cari kode </head>
• 4. Setelah ketemu Copy kode CSS ini, kemudian Paste di atas kode </head>

Inilah script HTMLnya :

<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: 99; } .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; } .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>

Kemudian simpan setelan tema anda

selanjutnya, Silahkan Copy kode di bawah ini :

<b:if cond='data:blog.pageType == "item"'> <div class="paralax_div"> <div> <div> <div> Paste/tempel kode html iklan adsense anda disini </div> </div> </div> <span class="clear"/> </div> </b:if>

• 5. Selanjutnya pasangkanlah script HTML tersebut pada setiap halaman yang ingin anda pasang Iklan. salinlah pada bagian manapun dalam artikel anda.

Untuk melihat contoh halaman yang telah dipasang banner Parallax scrolling, silahkan klik disini.

Demikianlah ulasan singkat mengenai cara membuat banner iklan scroll parallax. semoga bermanfaat.