2 Cara Menentukan Tinggi Iklan In-Feed, Dan Menempatkan Kode Iklan In-Feednya Di Blog

Posted by at

 

Iklan In-Feed - Untuk menyesuaikan tinggi iklan In-Feed agar sesuai dengan ruang yg tersedia, sebagian besar penayang tidak perlu membuat perubahan pada tinggi iklan In-feed. 
Tapi, memiliki persyaratan khusus untuk tinggi Iklan In-Feed, kode iklan In-feed tersebut dapat dimodifikasi, tergantung pada apakah feed berada di situs non-responsif atau responsif.

Cara Menetapkan Tinggi Iklan In-Feed


Di bawah ini adalah 2 cara menempatkan tinggi iklan in-feed yg bisa dicoba di blog.

Tinggi Tetap (Situs Non-Responsif)


Untuk dapat menetapkan tinggi tetap iklan In-feed dengan menambahkan atribut tinggi ke kode iklan, misalnya height:120px , bisa gunakan opsi di bawah ini jika unit iklan In-feed berada dalam penampung tetap, yaitu tidak responsif.

Jika tidak mengetahui tinggi yang harus ditetapkan, bisa menggunakan fitur developer browser untuk menentukan tinggi yg tepat untuk iklan tanpa spasi. Di bawah ini adalah contoh kode iklan in-feed ukuran tinggi 120px (piksel).

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block;height:120px"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Tinggi Variabel (Situs Responsif)


Jika lebar unit iklan In-feed bergantung pada lebar layar responsif, menggunakan kueri media CSS di kode iklan untuk menentukan tinggi yang berbeda untuk setiap lebar layar.

Untuk menentukan tinggi yang harus ditetapkan, sebaiknya mengubah ukuran situs ke rentang lebar layar, misalnya 350, 500, atau 1.000 piksel. Selain itu, menenggunakan fitur developer browser bisa juga untuk menentukan tinggi yg tepat untuk iklan tanpa spasi. 
Contoh kode iklan yg juga menggunakan CSS di bawah ini menunjukkan iklan In-feed dengan tinggi 180 piksel untuk lebar layar hingga 350 piksel, tinggi 130 piksel untuk lebar layar dari 500 hingga 800 piksel, dan tinggi 200 piksel untuk lebar layar di atas 800 piksel

<style>
  @media (min-width: 350px) {
    .infeed {
      height: 180px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 130px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 200px;
    }
  }

</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle infeed"
     style="display:block;"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Setelah mengubah kode iklan,  jangan lupa untuk menguji iklan in-feed di berbagai ukuran layar untuk memastikan tinggi yg dipilih berfungsi di seluruh perangkat.

Perlu diketahui, unit iklan in-feed bersifat responsif dan mendukung berbagai viewport, unit iklan ini secara otomatis menyesuaikan ukurannya & mengikuti tata letak tampilan dengan memperluas hingga lebar penuh penampung feed tempat iklan berada.

Setelah membuat iklan In-feed, langkah berikutnya adalah menempatkan kode ke dalam HTML feed. Pastikan kode iklan diletakkan di dalam feed, dan jangan menempatkan kode iklan In-feed di luar feed karna akan mengakibatkan performa iklan buruk dan melanggar kebijakan AdSense.

Menempatkan Kode Iklan In-Feed


Tempatkan kode iklan In-feed di antara konten feed, atau pada awal atau akhir feed dengan mengedit langsung kode HTML feed.

Di bawah ini adalah contoh iklan in-feed yg di letakkan diantara listingan konten


 Jika ingin menempatkan lebih dari satu iklan di feed, dapat membuat beberapa iklan In-feed atau menempatkan kode iklan In-feed yang sama beberapa kali di feed.

  • Login ke blogger.com
  • Klik Tema >> Edit Tema , lalu cari dimana feed berada. (Petunjuk: kemungkinan besar berisi perintah "while" atau "for each") , lalu ubah kode pengulangan untuk menyisipkan iklan In-feed ke feed.
  • Tambahkan pernyataan "if" di dalam pengulangan untuk menampilkan iklan In-feed.

Kode yg dimaksud di atas kurang lebih seperti di bawah ini

Posts[] posts;
Var count=1; // If your code does not include a counter define one
While (count < posts.length) // Increase the value of "count" by 1 until the final post in the database
{

   If (count%3=0) //If the value of "count" equals 3 or 6 or 9 insert the ad
   {
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
   </script>
   <ins class="adsbygoogle" style="display:block"
   data-ad-format="fluid"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890"></ins>
   <script>
   (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
   }

   <h3>{{ post.title }}</h3> // for all count values insert the content block title
   <p>{{ post.body }}<p> //Insert the content block body
   <img src="{{ post.thumbnail}}"> //Insert the content block image

}

  • Selanjutnya, klik Simpan Tema

Pastikan menempatkan kode iklan di dalam penampung induk <div> dan <iframe> , yg memiliki hal seperti berikut :

  • Lebar yg valid. (Jika menempatkan kode iklan di dalam penampung induk yg tidak memiliki kumpulan lebar yg eksplisit  misalnya, di elemen mengambang, iklan tidak akan ditampilkan. Perhatikan bahwa lebar minimum iklan In-feed adalah 250 piksel).
  • Tinggi yg dapat divariasikan. (Jika menempatkan kode iklan di penampung induk dengan tinggi tetap, iklan mungkin akan terdistorsi).

Labels: ,

0 comments:

Posting Komentar

Katakan Unek-unek mu