Friday, January 27, 2012

Membuat Kotak Banner Sponsor Blog

Judul posting Membuat Kotak Banner Sponsor Blog mungkin akan menjawab beberapa pertanyaan sebagai barikut. Bagaimana membuat kotak banner tanpa harus membuat gambar banner? Nah berikut jawabannya yaitu dengan menggunakan kode CSS yang diletakkan kedalam kode Edit HTML sama ketika kita membuat animasi kursor pada sebuah blog.

Sebelum Saya lanjut ke penulisan kode-nya kita ulas sebentar dulu ah pertanyaan berikut, sebenarnya kenapa sih kita pasang kotak banner di blog kita? ya tentunya Anda sekalian sudah tahu yaitu monetize blog (menghasilkan uang melalui blog). 

Dan ini adalah fakta yaitu ketika jumlah pengunjung sebuah blog atau website sudah banyak maka tidak sedikit pemilik blog yang tidak memasang kotak banner di halaman sidebar kiri, kanan, tengah, header dsb.

Kode CSS
  div.adblock#ads125 A {
    BORDER-RIGHT: #ccc 1px solid;
    BORDER-TOP: #ccc 1px solid;
    BORDER-BOTTOM: #ccc 1px solid;
    BORDER-LEFT: #ccc 1px solid;
    WIDTH: 125px;
    COLOR: #666;
    HEIGHT: 125px;
    DISPLAY: block;
    FLOAT: left;
    MARGIN: 0px 0px 10px 0px;
    COLOR: #888;
    FONT-FAMILY: verdana,sans-serif;
    TEXT-DECORATION: none;
    FONT-WEIGHT: 700;
    FONT-SIZE: 12px;
    BACKGROUND: #e7e7e7;
    LINE-HEIGHT: 1000%;
    TEXT-ALIGN: center
}

div.adblock#ads125 {
    DISPLAY: block; WIDTH: 100%
}

div.adblock#ads125 A:hover {
    BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #999 1px solid; COLOR: #333; BORDER-BOTTOM: #999 1px solid
}
Kode HTML
<div class="adblock" id="ads125">
     <a title="Advertise Here 125 x 125 px" href="http://halamanpendaftaraniklan.html"
     >Advertise Here</a>
</div>

Kalo ingin tahu contohnya ya kotak banner di bawah ini sob, coba saja diklik. tapi halaman pendaftarannya tidak saya cantumkan tetapi saya arahkan ke halaman http://store.adsloko.com/  

Jika ingin mengarahkan ke halaman yang diinginkan silahkan rubah alamat yang diberi warna merah ("http://halamanpendaftaraniklan.html").

sebelumnya minta maaf ya sob, gambarnya masih jelek yang diatas itu, maklum belum mahir berimajinasi.....