Cara Membuat Widget Iklan Dibawah Header Responsive

Lama tidak membuat artikel karena kendala laptop yang rusak. Nah untuk kali ini saya akan membagikan tutorial cara membuat widget iklan dibawah header. Mungkin banyak dari anda yang belum memasang widget ini. Namun bagi anda yang memakai template premium biasanya sudah ada widget iklan seperti ini. Widget iklan dibawah header ini biasa juga dimanakan large banner karena ukurannya yang besar.

Anda bisa memasang unit iklan responsive atau unit iklan yang berukuran 970x90. Agar iklan 970x90 menjadi responsive dan tidak terpotong anda harus mengubah width iklan tersebut menjadi 100%.  Ukuran iklan yang besar ini tentu memiliki tingkat klik yang tinggi dan tenang saja google adsense mengijinkan kita membuat unit iklan yang besar asal masih pada batas wajarnya.

Seperti apa widget large banner itu? Anda bisa melihatnya di blog ini widget iklan ini letaknya dibawah header. Anda pun juga bisa mengubah letak widget large banner ini sehingga bisa berada diatas atau dibawah footer. Bagaimana tertarik untuk membuat widget ini di blogger? Yuk simak langkah-langkahnya dibawah ini.

Cara Memasang Widget Iklan Dibawah Header [Large Banner]

Langkah 1

Silakan anda masuk ke blogger,pilih Tema → Edit HTML,lalu cari kode ]]></b:skin> atau </style>

Langkah 2

Salin kode dibawah ini lalu letakkan diatas kode ]]></b:skin> atau </style> yang sudah dicari tadi.

.largebanner {
background:#fff;
border-right:1px solid #f0f0f0;
border-bottom:1px solid #f0f0f0;
border-left:1px solid #f0f0f0;
}
.largebanner .widget {
padding:15px 14px;
overflow:hidden;
}
.largebanner img, .largebanner iframe{
display:block;
max-width:100%;
border:none;
overflow:hidden;
}

@media only screen and (max-width:640px){
 .largebanner .largebanner1 .widget, {
  padding:10px;
 }}
@media only screen and (max-width:480px){
 .largebanner .largebanner1 .widget, {
  padding:8px;
 }}

/* CSS FOR LAYOUT */
body#layout .largebanner .widget {
 overflow: visible;
}

Langkah 3

Untuk memanggil widget large bannernya silakan letakkan kode dibawah ini dimana large banner ingin ditampilkan. Jika ingin menampilkan large banner dibawah header/navigasi maka letakkan kodenya dibawah kode header/navigasi.

<b:section class='largebanner section' id='largebanner' maxwidgets='1' showaddelement='yes'/>

Lalu simpan template.

Sekarang coba buka blog sobat dan lihat apakah widget large bannernya sudah muncul di blog anda atau belum. Jika anda mengalami kesulitan jangan sungkan-sungkan untuk bertanya. Ok cukup sekian tutorial yang bisa saya bagikan semoga bisa membantu dan bermanfaat.