Banner CSS Mirip Adsense Dengan Tampilan Berbeda

Sebetulnya ini hanya sebuah tutorial yang sederhana. Dengan menggunakan Tag Kondisional, kita bisa mengakali css dan tampil berbeda disebuah template. Dengan demikian, tampilan Iklan seperti ini pun terlihat berbeda dan lebih menarik tentunya. Sebetulnya ini terinspirasi dari pertanyaan seorang teman di group, ia menanyakan apakah bisa random (tampil acak) iklannya? untuk tampilan acak tentulah sangat tidak mungkin, namun kalau tampil berbeda warna bisa. Silakan lihat pada demo bawah ini, setelah anda masuk ke blog demo, coba masuk kepostingan, bagaimana?

Live Demo

Silakan simpan css bawah ini tepat dibawah ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.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>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.ads {margin:0 auto;padding:0;position:relative;width:298px;border:1px solid #000}
.ads-box {background:#030219;width:298px;height:250px;margin:0;padding:0;text-align:center;border:1px solid #000}
.tags1 {font:26px Roboto;color:#42F117;padding:10px 10px 5px 10px;}
.tags2 {font:12px Arial;color:#B2D0ED;padding:2px 0;margin:5px 0;}
.tags2:hover {text-decoration:underline}
.tags3 {font:16px Arial;color:#ddd;padding:2px 20px;margin-bottom:10px;}
.tags4 {background:#32C50D;padding:12px 0 8px 0;border-radius:4px;max-width:40%;text-align:center;margin:0 auto;display:block}
.tags4:hover {background:#46D523;}
</style>
</b:if>

Tambahkan kode pemanggil ini di Add/Gadget

<div class='ads-box'>
<div class='tags1'>Berita inspirasi dan temukan berita yang Anda mau disini</div>
<a href="http://www.googleadservices.com/pagead/aclk?sa=ladiesmail.us" onclick="this.href = 'http://ladiesmail.blogspot.com/'" target="_blank"><div class='tags2'>Ladiesmail.us</div></a>
<div class='tags3'>#Temukan segala impian wanita dan berbagai ragam gaya hidup.</div>
<a href="http://www.googleadservices.com/pagead/aclk?sa=ladiesmail.us" onclick="this.href = 'http://ladiesmail.blogspot.com/'" target="_blank"><div class='tags4'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQNdoPgDPoAcuwjca0s3wypEBuqcMJLhcAA5KWjxIyb5hfvZn_4Rm_TWCmyzCft_ipdUQRRwuuZGPAf22tAS34DfGawzBWf7v5CFJonjcbyI-KRZE45As91XLELjV9yW-95Rnq4GBRfA/s1600/icon_chevron_white.png"/></div></a></div>

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

Share thisPlus this