Banner CSS Mirip Adsense Yang Unik



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, bagaimana?

Temukan berita yang Anda mau disini


#Temukan segala impian dan berbagai ragam gaya hidup.



Caranya 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
<center>
<div class="ads-box">
<div class="tags1">
Temukan berita yang Anda mau disini</div>
<a href="https://www.aca.web.id/" onclick="this.href = 'https://www.aca.we.id/'" target="_blank"></a>

<div class="tags2">
<a href="https://www.aca.web.id/" onclick="this.href = 'https://www.aca.we.id/'" target="_blank">www.aca.web.id</a></div>
<div class="tags3">
#Temukan segala impian dan berbagai ragam gaya hidup.</div>
<a href="https://www.aca.web.id/" onclick="this.href = 'https://aca.web.id'" target="_blank"></a>

<div class="tags4">
<a href="https://www.aca.web.id/" onclick="this.href = 'https://aca.web.id'" target="_blank"><img src="https://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png" /></a></div>
</div>
</center>

Bagaimana sahabat Camfroger! cukup mudah bukan caranya?, semoga artikel ini bermanfaat.

Setiap Komentar baru secara automatis termoderasi, demi kenyamanan pembaca. Komentar yang tidak patut ditampilkan akan kami hapus (Sara, Propokator, Spam, Scam, Radikal, Terorisme, dll)