Membuat Slot Iklan Baris Responsive Ala Chitika

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.

Membuat Slot Iklan Baris Responsive Ala Chitika

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="http://2.bp.blogspot.com/-UnL6dT-0hRI/U4mXD7RrFAI/AAAAAAAAc-8/oSCQnUx6rXE/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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments