Membuat Unit Iklan Billboard

Unit iklan Billboard ini berukuran 970 x 250 dan 300 x 250. Unit iklan bilboard ini diatur dengan media jquery agar responsive.

Misalnya jika membuka dengan Pc maka ukuran ini akan tampil dengan ukuran 970 x 250, sedangkan jika di buka dengan smartphone ukuran ini akan muncul dengan ukuran 300 x 250.

Nah, jika kamu tertarik ingin memsangnya silahkan simak tutorial berikut.

Membuat Unit Iklan Billboard

1. Buka Dasboard Blogger dan pilih Template> Edit HTML
2. Letakkan CSS di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<style type='text/css'>
/* Top Banner */
.top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.adsenseresponsive{width:970px;height:250px;}
@media screen and (max-width:960px){
.top_banner{max-width:320px;}
.adsenseresponsive{width:300px;height:250px;}
}
</style>
</b:if>
3. Kemudian letakkan kode HTML di bawah ini di atas kode <body>

Baca: Memasang Iklan Adsense di Tengah Artikel

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<div class='top_banner'>
<div id='topbanner'>
<!-- Kode iklan simpan di bawah ini -->
<ins class="adsbygoogle adsenseresponsive"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
  </div>
</b:if>

Note: Jika kode diatas di letakkan di atas kode <body> maka unit iklan akan muncul di atas Header.
Silahkan letakkan kode diatas sesuai keinginan misalnya letakkan di bawah menu navigasi.

4. Terakhir simpan template dan silahkan lihat hasilnya

Artikel Pilihan:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser