Lompat ke konten Lompat ke sidebar Lompat ke footer

Iklan Parallax (Parallax Scrolling Background) di Blogger

Iklan Parallax (Parallax Scrolling Background) di Blogger

Media Promosi dan Iklan

Iklan Parallax Scrolling di Blogger ― Saat ini kita telah mengenal begitu banyak media advertisement atau media promosi yang sering kita lihat dalam kehidupan sehari-hari. Sejak dahulu kala hingga saat ini media promosi terus mengalami perkembangan yang seiring dengan peningkatan kemampuan teknologi informasi dan komunikasi menjadikan perkembangan iklan kian pesat.

Selama ini mungkin kita telah banyak mengenal media promosi yang konvensional, baik itu media cetak maupun media teknologi seperti televisi, radio, bahkan internet. Saat ini adalah masa yang dianggap sebagai peralihan media promosi yang dulunya banyak dianggarkan untuk televisi dan media cetak, mulai dialihkan ke media promosi online, internet.

Internet dianggap sebagai penyebar informasi paling muktahir di masa ini, oleh karena itu berbagai pihak memanfaatkan hal tersebut sebagai media bisnis khususnya iklan. Hampir di berbagai tempat di internet kita bisa menemui iklan, bahkan termasuk di blog ini. Iklan dianggap sebagai metode yang cukup efektif untuk memberikan hubungan yang saling menguntungkan bagi semua pihak yang terlibat di dalamnya.

Media Promosi Blog

Blog merupakan salah satu media promosi yang masih menjadi penampil iklan terbanyak. Blog dan situs-situs yang ada di internet menjadi sasaran pagi para pengiklan untuk memasarkan informasi seputar produk maupun jasa mereka. Penempatan iklan menjadi salah satu hal yang penting dalam sebuah blog. Bukan hanya demi kenyamanan penunjung tetapi juga sebagai sarana pemilik blog untuk meningkatkan pendapatan mereka.

Salah satu metode yang akhir-akhir ini cukup banyak digunakan adalah ikaln Parallax Scrolling. Penempatan iklan secara parallax scrolling ini bahkan banyak digunakan oleh situs-situs besar termasuk situs berita resmi dan situs resmi sebuah produk. Tetapi apa dimaksud iklan parallax scrolling?

Iklan Parallax Scrolling

Sebenarnya penempatan iklan seperti ini bisa juga disebut absolute ads posision karena posisi iklan yang absolut, tidak berpindah-pindah. Maksudnya seperti ini, jika biasanya iklan yang sering dijumpai pada sebuah situs di internet posisinya berubah ketika scroll (kecuali untuk iklan yang sticky atau diletakkan pada posisi yang menyerupai sebuah plang iklan), iklan yang dipasang secara parallax posisinya absolut, tetap, jadi ketika tampilan situs di-scroll, tampilan iklan tersebut seolah melekat pada background dan tidak berpindah mengikuti gerakan scroll.

Mungkin beberapa diantara kalian ada yang sudah pernah melihat iklan yang dipasang seperti itu. Ciri-cirinya biasanya iklan hanya tampil sepotong, dan ketika di-scroll sisi lain dari iklan akan muncul sesuai dengan pergerakan saat di-scroll. Nah itulah yang dimaksud dengan penempatan iklan secara parallax scrolling.

Untuk lebih jelasnya dan biar kamu tidak penasaran, kamu bisa melihat contoh penempatan iklan secara parallax tersebut melalui halaman demo yang bisa kamu lihat di sini atau di sini. Kedua demo tersebut hanya berbeda posisi, satu iklannya terdapat pada bagian paling awal dari sebuah artikel, dan satunya lagi iklan berada di tengah-tengah artikel/postingan.

Kelebihan Parallax Scrolling

Iklan yang dipasang secara parallax sebenarnya tidaklah jauh berbeda dengan penempatan iklan seperti biasanya, hanya saja penempatan iklan seperti itu terlihat lebih unik dan lebih mudah menarik perhatian para pengunjung blog sehingga berpotensi besar meningkatkan jumlah klik iklan.

Selain itu penempatan iklan yang parallax cenderung menampilkan iklan yang lebih menarik karena berdasarkan pengalaman biasanya iklan yang menarik dilihat bentuknya adalah vertikal, dan iklan parallax adalah iklan yang ukurannya 300 x 600, vertikal. Jadi penempatan iklan secara parallax scrolling akan terlihat lebih unik dan lebih menarik.

Pada dasarnya pemasangan iklan seperti ini sudah ada dalam secara default untuk situs atau blog yang menggunakan AMP HTML. Pada AMP HTML terdapat script khusus untuk memasang iklan secara parallax. Akan tetapi pada situs khususnya blog yang bukan AMP HTML, hal tersebut lebih bebas dibuat karena tidak perlu mengikuti aturan AMP.

Bagi kamu yang tertarik untuk memasang iklan di blog secara parallax scrolling, berikut ini akan dibahas langkah-langkah memasang iklan parallax scrolling di Blogger baik untuk blog AMP HTML maupun yang Non-AMP HTML. Selain itu kamu juga bisa memilih di mana iklan tersebut akan ditampilkan, baik di bagian paling awal dalam artikel/posting ataupun di bagian tengah-tengah posting.

Iklan Parallax Scrolling di Blogger (Non-AMP)

# Menyiapkan Kode Iklan

Untuk mulai memasang iklan parallax pada blog kamu di Blogger terlebih dahulu kamu perlu menyiapkan kode iklan yang akan kamu pasang dalam bentuk iklan vertikal 300 x 600, yang dalam pembahasan di sini akan digunakan kode iklan dari Google Adsense. Jika kamu belum membuat atau belum memiliki iklan vertikal di unit iklan adsense kamu, ikuti langkah-langkah di bawah untuk membuatnya. Tetapi kalau sudah ada, silakan lewati bagian ini.
  1. Buka situs Google Adsense dan masuk sesuai dengan akun kamu.
  2. Klik pada bagian Iklan kemudian pilih Menurut unit iklan lalu buat unit iklan baru dengan jenis Iklan Display.
  3. Iklan Parallax (Parallax Scrolling Background) di Blogger
  4. Kemudian beri nama untuk unit iklan yang kamu buat, agar mudah dikenali beri nama semisal "iklan parallax vertikal". Kemudian pastikan ukuran iklan yang terpilih adalah Responsif dengan bentuk vertikal, setelah itu klik tombol Buat.
  5. Iklan Parallax (Parallax Scrolling Background) di Blogger
  6. Setelah itu kamu akan mendapatkan kode iklan yang siap dipasang, simpan dulu kode tersebut atau tetap biarkan halaman adsense terbuka.

# Memasang iklan Parallax Scrolling di Blogger

Iklan parallax scrolling di paragraf pertama posting

Jika kamu sudah mempunyai kode iklan yang akan kamu pasang, selanjutnya kamu sudah siap untuk menempatkan iklan tersebut secara parallax di blogger. Iklan ini letaknya berada di awal paragraf pertama, sebagai contoh bisa kamu lihat pada halaman demo di sini. Silakan ikuti langkah-langkah berikut ini.
  1. Buka Blogger.
  2. Sebelum mulai mengubah bagian dari blog kamu, sebaiknya lakukan backup terlebih dahulu biar blog kamu tetap aman, baca cara mudah backup blog di sini.
  3. Kemudian pada bagian Tema pilih Edit HTML.
  4. Iklan Parallax (Parallax Scrolling Background) di Blogger
  5. Lalu cari kata post-body entry-content pada HTML blog kamu, gunakan CTRL + F untuk membuka menu find/pencarian.
  6. Setelah itu kemungkinan kamu akan menemukan tag dengan bentuk <div class='post-body entry-content...
  7. Lalu tambahkan sintaks berikut ini di atas kode <div class='post-body entry-content...
  8. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class="paralax_div"><div><div><div>
        <span class="parcont">
          <!-- kode iklan di sini -->
        </span>
      </div></div></div><span class="clear"/></div>
    </b:if>
  9. Silakan ganti bagian yang ditandai dengan kode iklan blog kamu. Tapi perhatikan bahwa kode iklan yang dipasang harus dikonversi/parse terlebih dahulu, silakan parse kode iklan kamu pada halaman Script Converter.
  10. Kemudian klik tombol simpan dan kembali ke halaman Tema di Blogger. Pada halaman tema klik tombol "Sesuaikan".
  11. Iklan Parallax (Parallax Scrolling Background) di Blogger
  12. Setelah itu pada Desainer Tema Blogger, pilih Lanjutan lalu buka Tambahkan CSS
  13. Iklan Parallax (Parallax Scrolling Background) di Blogger
  14. Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode ]]></b:skin> dan letakkan kode berikut di atasnya.
  15. .paralax_div{position:relative;overflow:visible;width:300px;height:250px;margin-right:20px!important;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}
    .paralax_div > div > div > div > *{margin:0;margin-top:4rem}
    .paralax_div > div > div > div > a{width:100%;height:100vh}
    .paralax_div img,.paralax_div iframe,.paralax_div ins{height:600px;width:300px}
    span.parcont{width:100%;height:100vh;text-align:left}
    .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}}
  16. Setelah itu klik "Terapkan ke Blog" dan lihat hasilnya di halaman blog kamu

Iklan parallax scrolling di tengah posting

Untuk memasang iklan parallax scrolling yang letaknya di tengah-tengah posting blog, terlebih dahulu kamu harus memahami bagaimana memasang iklan di tengah posting. Tutorial tentang memasag iklan di tengah artikel/posting sebelumnya telah dibahas di sini. Silakan pelajari lebih lanjut sebelum mulai memasang iklan parallax di tengah artikel blog. Contoh penempatan iklan yang berada di tengah-tengah posting bisa kamu lihat pada halaman demo di sini.

* * *

  1. Selanjutnya jika kamu sudah membaca artikel cara memasang iklan di tengah artikel blog dan memahaminya, silakan buka Blogger.
  2. Sebelum mulai mengubah bagian dari blog kamu, sebaiknya lakukan backup terlebih dahulu biar blog kamu tetap aman, baca cara mudah backup blog di sini.
  3. Kemudian pada bagian Tema pilih Edit HTML.
  4. Pada tutorial memasang iklan di tengah artikel blog, kamu akan mendapatkan kode yang dipasang seperti berikut ini.
  5. <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='googlepublisherads' style='margin:20px 0'>
    <center>
    Kode Iklan
    </center>
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
  6. Silakan ganti bagian yang ditandai dengan kode berikut ini. Kode yang sama dengan posisi iklan parallax di awal paragraf.
  7. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class="paralax_div"><div><div><div>
        <span class="parcont">
          <!-- kode iklan di sini -->
        </span>
      </div></div></div><span class="clear"/></div>
    </b:if>
  8. Silakan ganti bagian yang ditandai dengan kode iklan blog kamu. Tapi perhatikan bahwa kode iklan yang dipasang harus dikonversi/parse terlebih dahulu, silakan parse kode iklan kamu pada halaman Script Converter.
  9. Kemudian klik tombol simpan dan kembali ke halaman Tema di Blogger. Pada halaman tema klik tombol "Sesuaikan".
  10. Iklan Parallax (Parallax Scrolling Background) di Blogger
  11. Setelah itu pada Desainer Tema Blogger, pilih Lanjutan lalu buka Tambahkan CSS
  12. Iklan Parallax (Parallax Scrolling Background) di Blogger
  13. Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode ]]></b:skin> dan letakkan kode berikut di atasnya. Kode CSS di bawah ini berbeda dengan kode CSS yang ada di atas sebelumnya! Kode CSS ini khusus jika kamu memasang iklan parallax di tengah artikel.
  14. .paralax_div{position:relative;overflow:visible;width:300px;height:250px;display:block;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}
    .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}
    span.parcont{width:100%;height:80vh;text-align:left}
    .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}}
  15. Setelah itu klik "Terapkan ke Blog" dan lihat hasilnya di halaman blog kamu

Iklan Parallax Scrolling di Blogger (AMP HTML)

Terkhusus bagi kamu yang menggunakan blog dengan struktur AMP HTML, untuk memasang iklan parallax scrolling caranya cenderung lebih sederhana dan lebih mudah dibandingkan memasangnya pada blog non-AMP HTML. Silakan ikuti langkah-langkah berikut ini.
  1. Buka Blogger kemudian pada bagian Tema pilih Edit HTML.
  2. Iklan Parallax (Parallax Scrolling Background) di Blogger
  3. Lalu cari kode </head>, gunakan CTRL + F untuk membuka find/pencarian. Kemudian letakkan kode berikut ini sebelumnya/di atasnya
  4. <script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
  5. Selanjutnya cari kata post-body entry-content pada HTML blog kamu, gunakan CTRL + F untuk membuka find/pencarian.
  6. Setelah itu kemungkinan kamu akan menemukan tag dengan bentuk <div class='post-body entry-content...
  7. Lalu tambahkan sintaks berikut ini di atas kode <div class='post-body entry-content...
  8. <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div class='above_post'>
        <amp-fx-flying-carpet height='250px'>
           <amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'> </amp-ad>
        </amp-fx-flying-carpet>
       </div>
    </b:if>
  9. Silakan ganti bagian yang ditandai sesuai dengan data-ad-client dan data-ad-slot dari kode iklan kamu di Adsense.
  10. Setelah itu tambahkan kode CSS berikut ini, baik melalui menu Sesuaikan > Lanjutan > Tambahkan CSS atau dengan menambahkannya di atas kode ]]></b:skin>.
  11. .above_post{padding-top:8px;width:300px;margin:0 20px 5px 0;display:inline;float:left}
    @media screen and (max-width:414px){.above_post{padding-top:10px;width:100%;height:auto;margin:0 0 10px;display:block;float:none}}
  12. Setelah itu simpan dan lihat hasilnya di halaman blog kamu.

Penutup

Ada kemungkinan kamu akan menemukan lebih dari satu <div class='post-body entry-content... bergantung pada jenis template yang kamu gunakan. Jika hal tersebut terjadi, silakan coba satu per satu bagian mana yang sesuai. Kecuali jika kamu paham tentang cara kerja tag Blogger, kamu bisa menganalisanya untuk mengetahui mana tag yang sesuai.

Itulah langkah-langkah yang bisa kamu gunakan untuk memasang iklan secara parallax scrolling di Blogger, baik untuk blog dengan struktur AMP HTML maupun yang bukan AMP HTML. Semoga artikel ini bisa bermanfaat untuk kamu dan bisa menambah wawasan baru untuk kamu. Jangan lupa tinggalkan komentar kamu di bawah. Terima kasih dan sampai jumpa!

6 komentar untuk "Iklan Parallax (Parallax Scrolling Background) di Blogger"

  1. its work,, thanks a lot.. tapi unit iklannya gak bisa vertikal gan.. padahal uda saya pilih seting vertikal.. tp munculnya yang persegi.. gmana ya??

    BalasHapus
    Balasan
    1. Coba di clean cache gan, atau coba cek tampilannya di device yang lain

      Hapus
  2. mau nanya gan.. cara buat iklan konten sesuai yang ada gambar thumbnailnya gmana ya?? punya ku hanya muncul teks doang.. pada hal uda aku setting sesuai dengan pengaturan lebih lanjut seperti yang di adsense....

    BalasHapus
    Balasan
    1. Konten sesuai yang mana ya gan? Kalo yang untuk feed di homepage itu memang kadang tidak ada thumbnail nya

      Hapus
  3. Kalau untuk iklan yang pop up tapi di bagian bawah saja itu namanya apa ya Hu ? Saya pengin buat yg melayang gitu tapi tidak menganggu kenyamanan pengunjung.

    BalasHapus
    Balasan
    1. Kalau iklan pop up itu jenis iklan yang berbeda dengan iklan melayang (floating ads). Kalau mau pasang iklan yg melayang di bagian bawah blog bisa aktifkan auto ads kalau menggunakan Google Adsense

      Hapus