Iklan Banner Mirip Ads Adsense dengan CSS

Bosan ditolak terus sama iklan Adsense? Ingin blognya dihiasi dengan iklan seperti Adsense tapi masih belum temukan cara yang tepat. Jangan khawatir, dengan css bawah ini blog Anda akan tampil berbeda dan pastinya keren.

Live Demo

01. Ukuran Banned 728x90

<style type='text/css' scoped='scoped'>
.leoads-box {background:#fff;width:726px;height:88px;margin:0 auto;padding:0;text-align:center;position:relative;border:1px solid #ddd}
.leoads1 {font:22px Roboto;color:#365DF6;padding:10px 10px 5px 10px;text-align:left;max-width:70%;}
.leoads2 {font:12px Arial;color:#317107;padding:0;margin:0 0 0 10px;text-align:left;display:block}
.leoads2:hover {text-decoration:underline}
.leoads4 {float:right;background:#365DF6;padding:18px 40px 12px 40px;border-radius:4px;text-align:center;margin:-67px 50px 0 0;display:block;position:relative;}
.leoads4:hover {background:#5C7BF8;text-decoration:none}
</style>
<div class='leoads-box'>
<div class='leoads1'>Mau belajar tutorial dan dapatkan template gratis yang keren?</div>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads2'>leotemplates.us</div></a>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads4'><img src="http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png"/></div></a></div>

02. Ukuran Banned 300x250

<style type='text/css' scoped='scoped'>
.ads {margin:0 auto;padding:0;position:relative;width:298px;border:1px solid #7CC14E}
.ads-box {background:#fff;width:298px;height:250px;margin:0;padding:0;text-align:center;border:1px solid #ddd}
.tags1 {font:26px Roboto;color:#365DF6;padding:10px 10px 5px 10px;}
.tags2 {font:12px Arial;color:#317107;padding:2px 0;margin:5px 0;}
.tags2:hover {text-decoration:underline}
.tags3 {font:16px Arial;color:#333;padding:2px 20px;margin-bottom:10px;}
.tags4 {background:#365DF6;padding:12px 0 8px 0;border-radius:4px;max-width:40%;text-align:center;margin:0 auto;display:block}
.tags4:hover {background:#5C7BF8;}
</style>
<div class='leoads-box'>
<div class='leoads1'>Mau belajar tutorial dan dapatkan template gratis yang keren?</div>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads2'>leotemplates.us</div></a>
<a href="http://themes.ladiesmail.us/" target="_blank"><div class='leoads4'><img src="http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png"/></div></a></div>
</div>
</div></div>

Cara pasang juga mudah, tinggal masuk ke >> tata letak >> add/gadget >> HTML/JavaScript, dan masukan kode html diatas, jangan lupa untuk menganti URL yang saya gadisbawahi itu. Selamat mencoba.

Bagi anda yang kesulitan untuk instalasi template, saya ada buka jasa desain dengan harga terjangkau, klik disini

Share thisPlus this