Postingan kali ini adalah membuat slot iklan baris responsive yang bisa menyesuaikan dengan lebar sidebarnya. Untuk tampilan slot iklan baris ini bisa dibuat seperti slot iklan Chitika yang ada di sidebar blognya mas cahya seperti pada DEMO-nya yang telah saya buat di atas.
Dan tentunya slot iklan ini bisa dikustom untuk warna background dan tulisannya agar bisa sesuai dengan tema blog Anda masing-masing.
Kode CSS
#ka-ads {margin:0;padding:0;width:100%;}
#ka-ads ul{list-style:none;margin:0;padding:0;}
#ka-ads li a:link,#ka-ads li a:visited {display:block;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;width:auto;height:16px;text-decoration: none;font-size:16px;font-weight:bold;padding:5px 5px 6px 7px;border:1px solid #444;box-shadow:1px 1px 3px 1px #444;margin:8px ;color:#fff;background:#8E1515;}
#ka-ads li a:hover{color:#0F01BA;text-decoration:underline;color:#0F01BA;background:#fff;}
a.link-pasang{float:right;color:#666;font-size:11px;text-decoration: none;margin-right:8px;}
a.link-pasang img{float:right;}
a.link-pasang:hover{color:#333;}
Untuk memodifikasi tampilannya silahkan atur
color dan
background pada id
#ka-ads li a:link,#ka-ads li a:visited dan untuk tampilan hover-nya atur pada id
#ka-ads li a:hover
Kode HTML
<div id="ka-ads">
<ul>
<li><a href="#" title="#title1" target="_blank">Home</a></li>
<li><a href="#" title="#title2" target="_blank">Facebook</a></li>
<li><a href="#" title="#title3" target="_blank">Twitter</a></li>
<li><a href="#" title="#title4" target="_blank">Google+</a></li>
<li><a href="#" title="#title5" target="_blank">About</a></li>
<li><a href="#" title="#title6" target="_blank">Contact</a></li>
</ul>
<a class="link-pasang" href="#" target="_blank" title="Pasang Iklan Baris Murah">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8y5s1assDXA3dbgQTc0zWtiyOLL0oFkeoqfIrEu4wfc9Efy74CmyFPgG0_EE0IbiyeaMufNnhuKdyBDfyoFH13Y5Wu1AGH2Ljuaou0UR9CdylzUi3JxoJQ0CSY-86iI4yfF5bjtFbzBQl/s1600/ads-icon.png" alt="icon pasang iklan" title="Pasang Iklan Baris Murah" width="19" height="15" />
Ads by Alvin Warasi
</a>
</div>
Untuk mencoba responsive-nya silahkan geser-geser lebar kotaknya.
Selamat mencoba dan semoga berhasil,..
Blogger
Google+
Facebook
Twitter