Ditulis oleh: Ditulis pada: 5/31/2014
Postingan kali ini adalah atas permintaan sahabat Kompi yaitu mas Cahya Putra Pratama yang meminta untuk memposting script iklan baris yang ia buat sekalian untuk disempurnakan agar benar-benar mirip dengan slot iklan dari Chitika yang ada di blognya http://cahya-creative.blogspot.com/.
Kemudian saya juga sekalian menjadikan slot iklan baris ala Chitika ini menjadi responsive yang bisa menyesuaikan dengan lebar sidebarnya. Untuk tampilan slot iklan baris ala Chitika ini dibuat seperti slot iklan Chitika yang ada di sidebar blognya mas Cahya seperti pada gambar animasi gif di bawah ini.
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/AVvXsEiiZ03OR4_FDm_7WhJYSiZzlH8LHYwKPabIBK7ARaBtPmAeMVfIGuvo5ezd4xTzQe86KlN1Zm4pp_X-Ou2iarcDDElwBxQjJ_9VPSlatVuPAH5oVKJC7ULVyrZ7OVAYnLUgAokBdMTe0e7W/s1600/ads-icon.png" alt="icon pasang iklan" title="Pasang Iklan Baris Murah" width="19" height="15" />
Ads by Kompi Ajaib
</a>
</div>
Untuk mencoba responsive-nya silahkan geser-geser lebar kotaknya.