Senin, 25 Oktober 2010

Blogger Tips: Cara membuat Iklan melayang seperti Kompas.com

Dah lama ga posting tentang tips ngeblog. Abis, rada males sih. Ini juga post selingan yg mungkin dapat membantu. Artikel ini didapat berdasarkan tutorial dari buku Most Wanted Blogging Tips Rebirth. Tapi, aku menambahkan beberapa catatan penting agar.
Kompas.com menampilkan iklan di bawah lamannya. Contoh:
Klik tuk perbesar
Kita juga bisa membuat yg seperti diatas. caranya gampang sekali. Sebelum memulai, siapkan banner berformat BMP/GIF/JPG/PNG Berukuran 997x42. Lalu, upload ke media pengupload gambar seperti Imageshack atau Photobucket.
Klik dibawah untuk meneruskan


Setelah diupload, Masukan 3 sendok teh HTML Masukan kode CSS ini sebelum ]]></b:skin>:
.closePop {
  position:fixed;_position:absolute;
  bottom: 43px;
  width: 53px;
  height: 10px;
}

.popUp {
  position:fixed;_position:absolute;
  bottom: 1px;
  width: 997px;
  height: 42px;
  background: url('alamat gambar yg diupload tadi');

Lalu, long jump ke </body>. Sebelum tag tersebut, masukan kode ini:

<div class='closePop'>
    <a href='#' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'>
        <img align='right' src='http://img.ads.kompas.com/bannerlink/close.gif'/>
    </a>


    <div class='popUp'>
         <a href='alamat laman yg diklik'>
         <img src='alamat gambar tadi'>
         </a>
       </div>


</div>


Cape juga jari nulisnya! abis, langsung dari buku sih.
Dan hasilnya, ada tombol close diatas bannernya. itu berfungsi menutup bannernya. Lalu bannernya jika diklik, akan meredirect anda ke laman yg tadi dimasukan dalam kode. Kurang lebih hasilnya seperti ini:
klik tuk perbesar

Semoga artikel ini dapat membantu
Jangan Lupa untuk berkomentar ya!


Terima kasih telah membaca artikelnya. Jangan lupa jika ingin copas, cantumkan sumbernya ya. Juga dipersilakan untuk berkomentar tentang artikel ini. Follow twitter saya @alamni_

Dapatkan Domain co.cc Secara GRATIS, Tentukan sendiri namanya  

Berlangganan Via RSS

Atau Berlangganan gratis Via Email Di bawah ini. dengan begitu anda tidak akan tertinggal update dari Share-I

Powered by FeedBurner

2 komentar:

  1. hmm..
    keren nih kayaknya...
    menarik menarik...
    oke izin copas sob...

    BalasHapus
  2. makasih infonya gan,,, :)

    BalasHapus

Silakan berkomentar semua!!!!!!!
tinggalkan komen dan kritik dan saran disini. jangan lupa, jika ingin mengcopy paste artikel, jangan lupa tuliskan sumbernya. kasian, dah capek-capek bikin penulisnya.