Cara membuat Iklan Parallax Tengah Post Template VioMagz

Blog Buttatoa | Iklan Parallax Di Tengah Postingan - Tidak seperti wordpress yang dapat menggunakan plugin, pemasangan iklan parallax pada blogger, kalian harus memasangnya pada widget secara manual melalui editor html atau pada bagian tata letak blogger.

{tocify} $title={Table of Contents}

Iklan parallax memiliki format tampilan yang indah dan imersif yang dirancang untuk web seluler. Format tampilan ini memanfaatkan efek animasi paralaks berlapis untuk menarik perhatian dengan cara yang menarik dan tidak mengganggu. Format tersebut menciptakan persepsi unik bahwa terdapat lapisan gambar dan memiliki kedalaman yang berbeda dari iklan. Saat pembaca menggulir konten di ponsel mereka, iklan terlihat sepenuhnya.

Apa Itu Iklan Parallax?

Iklan paralaks adalah iklan yang ditampilkan yang posisinya diam (tetap) dan seakan-akan berada dibagian belakang artikel. Saat pembaca menggulir artikel, iklan tersebut akan tampil dengan ilusi optik atau efek animasi yang terkesan muncul dari dalam halaman.

Manfaat Iklan Parallax?

Ada beberapa manfaat sehingga banyak yang menggunakan dan memasang iklan pada websitenya, diantaraya:

Mendapatkan pengalaman iklan interaktif yang menarik bagi calon pengunjung untuk ikut terlibat dengan iklan sambil memberi mereka kontrol penuh tentang bagaimana mereka terlibat dengannya.
Memberikan pengalaman iklan ini dalam skala besar di seluruh penayang di web seluler.
Dapat meningkatkan Click Through Rate (CTR) atau Ratio klik tayang iklan, sehingga dapat meningkatkan penghasilan kalian.

Penempatan Terbaik Iklan Parallax

Dikarenakan script yang digunakan untuk tampilan iklan parallax pada artikel ini hanya menggunakan CSS, dimana diatur secara proporsional sedemikian rupa, maka ada beberapa kondisi tertentu yang harus kalian perhatikan yaitu:

Idealnya hanya baik digunakan pada tampilan yang tidak memiliki sidebar, sehingga akan lebih cocok hanya untuk ditampilkan di versi mobile, sementara untuk tampilan dekstop akan kesulitan mengatur perhitungan lebarnya menggunakan CSS apalagi bila digunakan pada template yang berbeda.
Design dan tampilan iklan parallax pada artikel ini, dibuat untuk template VioMagz v.4.9.0 Redesign👀, namun dapat digunakan pada template lainnya, hanya perlu sedikit beberapa perubahan pada script menyesuaikan template yang kalian gunakan sendiri.
Iklan parallax ini ditampilkan untuk tampilan mobile dengan layar lebar kurang dari 640px, namun dapat kalian juga gunakan bila ingin menampilkannya ke dalam versi dekstop dengan menghapus beberapa script yang membatasi pada tampilan mobile saja.

Cara Membuat Iklan Parallax Di Tengah Artikel

Ada dua tahapan yang perlu kalian lakukan untuk membuat dan memasang iklan parallax ditengah artikel, yaitu:

Membuat Slot Iklan

Hal yang pertama yang kalian butuhkan adalah membuat slot iklan untuk iklan parallax. Jenis iklan yang dibutuhkan adalah iklan jenis display dengan ukuran yang diatur. Untuk membuatnya, kalian ikuti pentunjuk berikut:

Login ke akun Google Adsense kalian.
Setelah itu pada Menu Bar di samping kiri kalian pilih Iklan. Di bagian iklan ini kalian lalu pilih buat unit ikan baru Menurut Unit Iklan 👉 kemudian pilih Iklan Display.
Untuk ukuran unit iklan ini kalian boleh memilih Responsif atau Tetap. Namun saya memilih ukuran Tetap dengan ukuran lebar 420px dan tinggi 580px. Ukuran ini saya ambil berdasar hasil uji di mobile 480px, agar tampilan terlihat lebih baik dan menarik. Kalian bisa merubahnya, dan kebanyakan menggunakan 300 x 600 pikxel. Selanjutnya beri nama label iklan tersebut lalu klik Buat.
Setelah itu akan ditampilkan kode adsense kalian. Copy kode ca-pub dan data-ad-slot adsense kalian dan paste/replace kedalam script html yang disediakan dibawah.

Menambahkan code HTML, JS dan CSS

1. Copy script CSS dibawah dan pastekan diatas code ]]></b:skin>.

/* Parallax Ads In Middle Post by blogbuttatoa */
.ParallaxBlogButtatoa {
display: block;
height: 350px;
margin: 1rem auto;
position: relative;
}
.ParallaxBlog {
clip-path: inset(0 0 0 0);
position: absolute;
overflow: hidden;
margin: auto;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.ParallaxButtatoa {
align-items: flex-start;
display: flex;
display: inline-flex;
justify-content: center;
position: fixed;
top: 90px;
}
.ParallaxBlog, .parallax ins {
height: 100%;
width: 100%;
}

Ukuran 90px yang diberi warna biru diatas berfungsi untuk mengatur posisi iklan pada layar mobile agar tidak terlalu keatas atau kebawah. Ubah nilai top untuk menempatkan gambar iklan pas ditengah layar mobile agar tampak lebih menarik.

2. Tambahkan dan Letakkan code JavaScript diatas code </body>.

<script type='text/javascript'>
//<![CDATA[
(function() {
  let ads = document.querySelector('.ParallaxBlogButtatoa');
    if (ads) {
    let post = document.querySelectorAll('.post-body br, .post-body p'), x = parseInt(post.length / 2);
    if (post[x].nodeName == 'P') {
      post[x].parentNode.insertBefore(ads, post[x]);
    }
    else {
      post[x].parentNode.insertBefore(ads, post[x].nextSibling);
    }
  }
})(); 
//]]>
</script>

Code JavaScript diatas berfungsi untuk menempatkan unit iklan pada posisi pertengahan artikel.

3. Cari code <data:post.body/>. Untuk template VioMagz v4.9.0 akan kalian temukan 3 (tiga) code yang sama. Selanjutnya copy paste code HTML dibawah dan letakkan dibawah code <data:post.body/> yang pertama. Untuk Template lain, kalian silahkan coba masing-masing bila terdapat lebih dari satu code.

<!-- Parallax Ads In Middle Post by blogbuttatoa -->
<b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>                  
  <div class='ParallaxBlogButtatoa'>
    <div class='ParallaxBlog'>
      <div class='ParallaxButtatoa'>
	<ins class='adsbygoogle' data-ad-client='ca-pub-723338xxx5375881' data-ad-slot='491xxx7645' style='display:inline-block;width:420px;height:580px'/>
	<script>
     	(adsbygoogle = window.adsbygoogle || []).push({});
	</script>
      </div>
    </div>
  </div>
</b:if>

Kode 723338xxx5375881 dan 491xxx7645 kalian ganti dengan kode iklan ca-pub serta data-ad-slot kalian sendiri. Kalian dapat juga mengubah ukuran lebar 420px dan tinggi 580px iklan yang dibuat dengan mengganti ukuran berwarna orange tersebut.

Bila kalian ingin juga menapilkan iklan parallax dalam versi dekstop, kalian hapus kode yang berwarna merah <b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'> dan </b:if>. Kalian juga jangan lupa sesuaikan panjang dan lebar iklan ynag ingin kalian tampilkan.

Demo Click here

Kesimpulan

Memasang iklan parallax ditengah postingan selain memberikan tampilan yang menarik, juga dapat meningkatkan Click Through Rate (CTR) atau Ratio klik tayang iklan. Banyak yang mengatakan bahwa penempatan jenis iklan parallax ini dilarang oleh Google, namun sampai saat ini masih banyak yang tetap memasang dan menggunakannya dan masih juga tetap aman.

Jadi tergantung kalian sendiri, berminat atau tidak menggunakannya, resiko ditanggung sendiri..😁😁. Semoga bermanfaat, Wassalam.