Skip to main content

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.


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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB