Membuat Iklan parallax di Blog dan Web dengan CSS


Memasang iklan parallax di blog memang merupakan gagasan menarik yang perlu anda coba. Dengan memakai iklan parallax saya dan anda bisa lebih menghemat ruangan yang terdapat pada blog.

Apa tersebut parallax? Parallax atau paralaks scrolling web design adalah suatu kiat khusus dimana suatu objek yang berada pada latar belakang bergerak lebih lambat dikomparasikan dengan objek yang sedang di latar depan sampai-sampai terlihat bahwa objek itu tidak bergerak atau diam di tempat saat sebuah halaman di gulir atau di scroll ke bawah maupun ke atas.

Nah, jadi saat Anda memakai iklan dengan efek parallax, iklan itu akan tetap diam di tempat walau Anda menggesernya atau scroll ke atas maupun ke bawah.

Ini berlaku untuk memperlihatkan iklan banner maupun iklan adsense yang mempunyai ukuran besar namun melulu di tampilkan beberapa saja. Misalnya, iklan sebetulnya berukuran 300 x 600 piksel tetapi Anda dapat membuatnya menjadi 300 x 250 piksel saja, nah saat iklan itu di scroll maka bakal terlihat mulai dari bawah hingga atas andai Anda menggulirnya atau scroll ke bawah begitu pun sebaliknya.

Kalau ngomong soal slot iklan dan ruang di blog lumayan penuh dengan widget-widget beda atau iklan lain sampai-sampai tidak terdapat space guna menambahkan iklan di blog, barangkali Anda dapat mencoba memakai widget iklan banner melayang di samping kiri dan kanan blog, ini bakal sangat menolong sekali.

Pada tutorial menciptakan iklan parallax kali ini, iklan bakal di tampilkan di bawah judul artikel blog. Sebenarnya kita masih dapat mengatur ukuran dan posisi atau letak iklannya, bila hendak berada di tengah-tengah tulisan atau postingan.

 

Membuat Iklan Parallax di blogspot

  • Masuk ke akun blogger anda, lalu pilih tema klik edit html
  • Cari kode </head>
  • Lalu Copy kode CSS dibawah ini, kemudian Paste 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>
  • Setelah itu cari kode seperti di bawah ini (biasanya ada 1 sampai 4, pilih yang ke 3 atau coba satu per satu)

 

<div class='post-body entry-content'
  • Setalah kode di atas sudah ketemu, silahkan Copy kode di bawah ini dan Paste di atas kode pada langkah diatas tadi.

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://2.bp.blogspot.com/-eXbZzcgLAuo/W0hrTjroi4I/AAAAAAAADL0/bWLvlNMeiuwsb04HgpdIkkK7TiM0HAyHQCLcBGAs/s320/26bc6948-a5b1-486e-9dd5-3a244b9a9d57.jpeg" alt="banner" title="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

 

  • Terakhir silahkan klik simpan

Warning..!

Untuk kode dibawah ini silahkan ganti dengan iklan adsense atau gambar banner anda sendiri.

 

https://2.bp.blogspot.com/-eXbZzcgLAuo/W0hrTjroi4I/AAAAAAAADL0/bWLvlNMeiuwsb04HgpdIkkK7TiM0HAyHQCLcBGAs/s320/26bc6948-a5b1-486e-9dd5-3a244b9a9d57.jpeg

 

Untuk pemasangan pada website selain blogspot atau web buatan anda sendiri silahkan sesuaikan penempatan CSS-nya dan pemanggilan CSS-nya. Sekian dan terimakasih.

Artikel Menarik Lainnya:

Rekomendasi Artikel


Aplikasi yang digunakan Untuk membuat Aplikasi dengan PHPCara Penulisan Script PHP Di BodyMenggunakan Komentar [Penulisan PHP]Penulisan PHP Menggunakan Semi KolonContoh Cara Menentukan Bilangan Ganjil Dengan Fungsi DO-WHILE

Terbaru dari Webdeveloper


Search


Top Stories


  1. Membuat Perulangan Segitiga Bintang Dengan PHP

    on 2018-01-12

  2. Membatasi Jumlah Karakter dengan PHP

    on 2018-01-23

  3. Kenapa Telinga Gatal dan Berair

    on 2018-04-13

  4. Membuat Tanggal dan Zona Waktu Sederhana dengan PHP

    Admin on 2017-11-26

  5. Membuat Paragraf Otomatis dengan Script PHP

    on 2018-01-26

Other Post


Top Videos


  1. Founder SB1M dan Pemilik Distro BLOOP ini BANGKIT dari BANGKRUT 16x dan HUTANG 11M | Christina Lie

    joesep on 2019-06-04

  2. FILM Horor Terbaru "SABRINA THE DOLL 2" Full Movie 2018

    Andri03 on 2018-08-01

  3. Sandiaga Uno Resmi Mundur dari Ketua Tim Pemenangan Partai Gerindra

    joesep on 2018-07-31

  4. vivo Z1 Pro VS OPPO A9 2020 | Duel HP 3 Jutaan Terbaik 2019!

    joesep on 2019-09-26

  5. Aplikasi Kasir Point of Sale Restoran / Kafe Berbasis WEB

    joesep on 2018-08-15

close