Latest News

Cara Membuat Widget Iklan Dibawah Header Responsive

Lama tidak membuat artikel sebab kendala laptop yang rusak. Nah untuk kali ini aku 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 menyerupai ini. Widget iklan dibawah header ini biasa juga dimanakan large banner sebab ukurannya yang besar.

Anda mampu 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 hening saja google adsense mengijinkan kita membuat unit iklan yang besar asal masih pada batas wajarnya.

Membuat widget iklan large banner idbawah header atau navigasi di blogger. Dengan CSS dan HTML.

Seperti apa widget large banner itu? Anda mampu melihatnya di blog ini widget iklan ini letaknya dibawah header. Anda pun juga mampu mengubah letak widget large banner ini sehingga mampu 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 arahan ]]></b:skin> atau </style>

Langkah 2
Salin arahan dibawah ini lalu letakkan diatas arahan ]]></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 arahan dibawah ini dimana large banner ingin ditampilkan. Jika ingin menampilkan large banner dibawah header/navigasi maka letakkan kodenya dibawah arahan header/navigasi.

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

Lalu simpan template.

Sekarang coba buka blog sahabat 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 mampu aku bagikan biar mampu membantu dan bermanfaat.