Membuat Slot Iklan Baris Responsive Ala Chitika

Membuat Slot Iklan Baris Responsive Ala Chitika

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

17 Comments Add Comment

Mantaaaap gan,,,,,,,,,,,,,,,,,,,, Ijin Praktek

Inunz

Balas

hehehe.. ini bisa tipu pengunjung mas, keren |o|

Balas

Silahkan mas :)

Balas

Hehehehe saya juga ketipu tuh kemarin di bognya sist Leony :) sama slot iklan mirip adsense-nya.

Balas

Ini Baru Joss :-bd Ijin Coba Kang =D
Kenapa ya Kang Adhy kalau update pas saya nggak Online =(

Balas

ieu blog loba bermain jeung kode hover-hoveran...mantav \m/

Balas

Keren kang :-bd. Oiya, saya sekalian mau tanya, bagaimana cara memasang list emoticon di pesan komentar seperti blog ini kang? Saya sudah ubek2 di blog ini, tapi adanya cuma yang untuk threaded comments hack :) Sedangkan saya tidak menggunakan comment hack kang :) Mohon bantuannya :) Terimakasih sebelumnya.

Balas

Penyempurnaan scriptnya mantab mas adi, saya jadi lebih mengerti tata cara penyusunan scriptnya...

Balas

Keren Kang! jadi pengen nyoba :)

Balas

Silahkan mas :)

Balas

Hehehehe muhun kang :) hatur nuhun

Balas

Makasih mas :)
Ada emoticon yang dibuat menjadi js untuk komentar yang bukan threaded comment hack mas, namun saya belum mencoba membuat list emot-nya. Nanti saya coba jika berhasil nanti saya share.

Balas

Sama-sama mas, mudah-mudahan bisa sesuai dengan harapannya. :)

Balas

Silahkan dicoba kang mumpung gratis hehhehehe
Hari Senin harga naik... :D

Balas

keren kang,, saya jarang buka akun chitika sekaranghehe

Balas

mas bisa bantu saya http://voltechzone.blogspot.com/

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×