Selamat datang di Website Teknologi Terkini! Nikmati informasi terbaru dan inovasi teknologi.

Cara Membuat Iklan Parallax Scrolling di Posting Blog

lewis-kull-Cara Membuat Iklan Parallax di Posting Blog. Apa sih iklan parallax scrolling itu sobat, parallax ini mungkin bisa dikatakan sebuah desain atau efek pada obyek diam saat discroll, setau saya sih begitu, karena memang perkembangan dari design web terus hadir dan semakin menarik untuk diikuti. Para developer pun juga sudah mulai menyesuaikan diri dengan perkembangan tersebut, ya seperti contoh salah satunya dengan teknik iklan parallax ini.

Jelas hal ini untuk mengundang perhatian pembaca pada tampilan iklan tersebut, seperti contoh gambar di atas ini, dan untuk memanjakan mata pembaca dengan membuat tampilan iklan tersebut menjadi parallax, karena kita akan melihat secara keseluruhan gambar tersebut dengan cara menscrolling bagian body web, kurang lebihnya seperti itu penjelasan tentang iklan parallax tersebut, tutorial cara membuat iklan parallax ini saya ambil kodenya dari mas Adhy kompiajaib, sebelumnya terimakasih banyak mas adhi.

Cara Membuat Iklan Parallax di Blog

1. Buka akun blogger Anda

2. Pilih menu template >> klik edit HTML

3. Sekarang letakan kode dibawah ini tepat diatas 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: 9999;
}
.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;
  background: #ddd;
}
.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>

Selanjutnya sobat cari kode seperti ini <div class='post-body entry-content'.Jika sudah ketemu, lalu letakan kode dibawah ini tepat diatas kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- kode iklan paralax by lewis-kull.com -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="2xxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

Silahkan ganti kode ca-pub-xxxxxx dengan id penayang anda dan ganti data-ad-slot "2xxxxxxxx" dengan kode slot iklan anda.

Terakhir Save/Simpan Tema,lalu lihat hasil nya!

Nah itu saja artikel Cara Membuat Iklan Paralax di Postingan Blog dari saya jika ada penjelasan yang tidak jelas silahkan tanya di kolom komentar :)

Baca juga :

About the Author

Perkenalkan nama saya Lewis Christian Sirait, saya sekarang sekolah di SMP Swasta Katolik Budi Murni 1 Medan.Saya berbisnis editor video, penulis, dan pengembang situs.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
advertisement
advertisement