✔ 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>
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'
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
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 == "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>
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 == "item"'> <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
0 Response to "✔ Cara Menciptakan Iklan Parallax Di Blog"
Posting Komentar