✔ Cara Menciptakan Iklan Parallax Di Blog

- Banyak jenis atau Unit iklan yang sanggup kalian gunakan, salah satunya adalah 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 saat di gulir atau di scroll. Jadi saat kalian memakai iklan Parallax, iklan tersebut akan membisu di daerah walaupun kalian menggesernya ke bawah maupun ke atas

Parallax ini biasa di terapkan pada iklan jenis banner yang memanjang ke bawah atau iklan yang mempunyai ukuran besar tapi hanya di tampilkan sebagiannya saja, pola ukuran aslinya 200×400 kalian sanggup buat menjadi 200×150 saja. Buat kalian yang belum paham dengan iklan Parallex ini kalian sanggup liat pribadi di blog igniel.com iklan jenis ini saat kalian scroll akan muncul/terlihat dari atas kemudian ke bawah begitupun sebaliknya, bila minat untuk memakai iklan parallax di blog/website kalian, sanggup ikuti tutorial di bawah ini

Cara menciptakan iklan Parallax di Blog

1. Masuk ke akun blogger
2. Pilih Tema
3. Edit HTML
4. Cari isyarat </head>
5. Salin isyarat CSS di bawah ini, kemudian paste sempurna di atas isyarat </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 isyarat ibarat itu, kalian pilih yang urutan ke-3 atau coba satu per satu)

7. Lalu salin isyarat di bawah ini dan pastekan sempurna 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="Banyak jenis atau Unit iklan yang sanggup kalian gunakan ✔ Cara menciptakan iklan Parallax di Blog" title="✔ Cara menciptakan iklan Parallax di Blog" 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="Banyak jenis atau Unit iklan yang sanggup kalian gunakan ✔ Cara menciptakan iklan Parallax di Blog" title="✔ Cara menciptakan iklan Parallax di Blog" width="300" height="600" /> dengan isyarat iklan banner kalian

Itulah Cara menciptakan iklan Parallax di blog semoga sanggup bermanfaat buat sahabat blogger semuanya.
Source : caramanual.com
Sumber http://www.bloggerkampung.com

Share this post

Berlangganan update artikel terbaru via email: