Cara Menciptakan Iklan Parallax Adsense Di Blogger

Memasang iklan parallax di blog memang merupakan wangsit menarik yang perlu kita coba. Dengan memakai iklan parallax kita sanggup lebih menghemat ruangan yang ada pada blog.

Apa itu parallax? Parallax atau paralaks scrolling web design merupakan suatu teknik khusus dimana sebuah objek yang berada pada latar belakang bergerak lebih lambat dibandingkan dengan objek yang berada di latar depan sehingga terlihat bahwa objek tersebut tidak bergerak atau membisu di kawasan dikala sebuah halaman di gulir atau di scroll ke bawah maupun ke atas.

Nah, jadi dikala Anda memakai iklan dengan efek parallax, iklan tersebut akan tetap membisu di kawasan meski Anda menggesernya atau scroll ke atas maupun ke bawah.

Ini berlaku untuk menampilkan iklan banner maupun iklan adsense yang mempunyai ukuran besar namun hanya di tampilkan sebagian saja. Misalnya, iklan sesungguhnya berukuran 300 x 600 piksel namun Anda sanggup membuatnya menjadi 300 x 250 piksel saja, nah dikala iklan tersebut di scroll maka akan terlihat mulai dari bawah hingga atas bila Anda menggulirnya atau scroll ke bawah begitu juga sebaliknya.

Kalau ngomong soal slot iklan dan ruang di blog cukup penuh dengan widget-widget lain atau iklan lain sehingga tidak ada space untuk menambahkan iklan di blog, mungkin Anda sanggup mencoba memakai widget iklan banner melayang di samping kiri dan kanan blog, ini akan sangat membantu sekali.

Pada tutorial menciptakan iklan parallax kali ini, iklan akan di tampilkan di bawah judul postingan blog. Sebenarnya Anda masih sanggup mengatur ukuran dan posisi atau letak iklannya, bila ingin berada di tengah-tengah artikel atau postingan silahkan baca artikel cara mengenai memasang iklan adsense di tengah postingan blog.

Bagi Anda yang tertarik untuk menciptakan iklan parallax di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Iklan Parallax di Blog

Sebelum mencobanya mungkin Anda sanggup melihat teladan iklan parallax di bawah ini:

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari isyarat </head>
4. Setelah ketemu Copy isyarat CSS ini, lalu Paste 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>

5. Lalu cari isyarat menyerupai di bawah ini (biasanya ada 1 hingga 4, pilih yang ke 3 atau coba satu per satu)

<div class='post-body entry-content'

6. Jika isyarat di atas sudah ketemu, silahkan Copy isyarat di bawah ini dan Paste di atas isyarat pada langkah nomor 5

<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="Memasang iklan parallax di blog memang merupakan wangsit menarik yang perlu kita coba Cara Membuat Iklan Parallax AdSense di Blogger" title="Cara Membuat Iklan Parallax AdSense di Blogger" width="300" height="600" />       </div>     </div>   </div> <span class="clear"/> </div> </b:if>

7. Klik Simpan tema

Catatan:
Pada bab isyarat ini:
<img src="https://lh3.googleusercontent.com/qrWaMv-vztxOKAKS3N55CAhYejx2CG7W1scJK8yERJMNPB9SbAsG51IvJ7bdPxx3MgIuHGKjCtT7otuGNA-N-Tj5re-RntGv_STujA=w375-h750-rw-no" alt="Memasang iklan parallax di blog memang merupakan wangsit menarik yang perlu kita coba Cara Membuat Iklan Parallax AdSense di Blogger" title="Cara Membuat Iklan Parallax AdSense di Blogger" width="300" height="600" />
Bisa Anda ganti dengan isyarat iklan AdSense atau iklan banner yang Anda miliki.

Itulah artikel mengenai cara menciptakan iklan parallax adsense di blogger, agar sanggup bermanfaat untuk Anda.
Sumber https://www.caramanual.com/

Related Posts