Membuat Slot Iklan Baris Responsive Ala Chitika
Postingan kali ini ialah atas usul sobat Kompi yaitu mas +Cahya Putra Pratama yang meminta untuk memposting script iklan baris yang ia buat sekalian untuk disempurnakan semoga benar-benar ibarat dengan slot iklan dari Chitika yang ada di blognya http://cahya-creative.blogspot.com/.
Kemudian aku juga sekalian menimbulkan slot iklan baris ala Chitika ini menjadi responsive yang dapat menyesuaikan dengan lebar sidebarnya. Untuk tampilan slot iklan baris ala Chitika ini dibentuk ibarat slot iklan Chitika yang ada di sidebar blognya mas Cahya seperti pada gambar animasi gif di bawah ini.
Dan tentunya slot iklan ini dapat dikustom untuk warna background dan tulisannya semoga dapat 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="Membuat Slot Iklan Baris Responsive Ala Chitika" target="_blank">Home</a></li>
<li><a href="#" title="Membuat Slot Iklan Baris Responsive Ala Chitika" target="_blank">Facebook</a></li>
<li><a href="#" title="Membuat Slot Iklan Baris Responsive Ala Chitika" target="_blank">Twitter</a></li>
<li><a href="#" title="Membuat Slot Iklan Baris Responsive Ala Chitika" target="_blank">Google+</a></li>
<li><a href="#" title="Membuat Slot Iklan Baris Responsive Ala Chitika" target="_blank">About</a></li>
<li><a href="#" title="Membuat Slot Iklan Baris Responsive Ala Chitika" target="_blank">Contact</a></li>
</ul>
<a class="link-pasang" href="#" target="_blank" title="Membuat Slot Iklan Baris Responsive Ala Chitika">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbsc1nYR9TXTRetJdSEz6IJSfLHosR0Mb80RET3Bdilfy3ex3VmWcHBnwP1IXMLsS_xC-UN3iVm21Z8q35HGcHPsFlBonIDQgiOGXi8ZsfEqMRZba-HrdKMJtk5pExYZHM43kZPL8ljr6/s1600/ads-icon.png" alt="ostingan kali ini ialah atas usul sobat Kompi yaitu mas Membuat Slot Iklan Baris Responsive Ala Chitika" title="Membuat Slot Iklan Baris Responsive Ala Chitika" width="19" height="15" />
Ads by Kompi Ajaib
</a>
</div>
Untuk mencoba responsive-nya silahkan geser-geser lebar kotaknya.
0 Response to "Membuat Slot Iklan Baris Responsive Ala Chitika"
Posting Komentar