Cara membuat iklan Parallax di Blog

Bloggerkampung.com - Banyak jenis atau Unit iklan yang dapat kalian gunakan, salah satunya yaitu Parallax. Parallax (Scrolling Web Design) merupakan sebuah Objek yang berada di latar belakang dari latar depan/utama, biasanya objek yang berada di latar belakang akan sedikit lebih lambat dari latar depan ketika di gulir atau di scroll. Jadi ketika kalian menggunakan iklan Parallax, iklan tersebut akan diam di tempat walaupun kalian menggesernya ke bawah maupun ke atas

Parallax ini biasa di terapkan pada iklan jenis banner yang memanjang ke bawah atau iklan yang memiliki ukuran besar tapi hanya di tampilkan sebagiannya saja, contoh ukuran aslinya 200×400 kalian bisa buat menjadi 200×150 saja. Buat kalian yang belum paham dengan iklan Parallex ini kalian bisa liat langsung di blog igniel.com iklan jenis ini ketika kalian scroll akan muncul/terlihat dari atas lalu ke bawah begitupun sebaliknya, jika minat untuk menggunakan iklan parallax di blog/website kalian, bisa ikuti tutorial di bawah ini

Cara membuat iklan Parallax di Blog

1. Masuk ke akun blogger
2. Pilih Tema
3. Edit HTML
4. Cari kode </head>
5. Salin kode CSS di bawah ini, lalu paste tepat di atas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <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>

6. Selanjutnya cari kode <div class='post-body entry-content' (biasanya ada beberapa kode seperti itu, kalian pilih yang urutan ke-3 atau coba satu per satu)

7. Lalu salin kode di bawah ini dan pastekan tepat di atas kode <div class='post-body entry-content'
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="paralax_div"> <div> <div> <div> img src="https://lh3.googleusercontent.com/qrWaMv-vztxOKAKS3N55CAhYejx2CG7W1scJK8yERJMNPB9SbAsG51IvJ7bdPxx3MgIuHGKjCtT7otuGNA-N-Tj5re-RntGv_STujA=w375-h750-rw-no" alt="banner" title="banner" width="300" height="600" /> </div> </div> </div> <span class="clear"/> </div> </b:if>

Nb : ganti kode <img src="https://lh3.googleusercontent.com/qrWaMv-vztxOKAKS3N55CAhYejx2CG7W1scJK8yERJMNPB9SbAsG51IvJ7bdPxx3MgIuHGKjCtT7otuGNA-N-Tj5re-RntGv_STujA=w375-h750-rw-no" alt="banner" title="banner" width="300" height="600" /> dengan kode iklan banner kalian

Itulah Cara membuat iklan Parallax di blog semoga bisa bermanfaat buat sobat blogger semuanya.
Source : caramanual.com

Post a Comment

0 Comments