Membuat Kotak Iklan Ukuran 125 Dan 300x250 Pada Satu Ruang

Kotak Iklan Ukuran 125 Dan 300x250 Pada Satu Ruang - Ruang iklan pada bagian sidebar sangat umum dipergunakan mengingat elemen sidebar yang merupakan tempat untuk menampilkan bagian-bagian pening atau widget untuk mempermudah dalam menavigasi, juga sidebar merupakan bagian yang umum diperhatikan/dilihat oleh pengunjung.

Memanfaatkan kelebihan ini, tidak ada salahnya menempatkan sebagian banner atau kotak iklan ukuran 125px kali 125px atau ukuran 300px kali 250px tersebut pada bagian sidebar.

Pada umumnya kotak iklan yang berada pada sidebar mempunyai ukuran yang sama, yang secara umum menggunakan ukuran 125px kali 125px atau ukuran 300px kali 250px, ya ukuran yang sangat wajar untuk sebuah kotak iklan pada sidebar. Dari kedua ukuran tersebut ada yang mempergunakan salah satu ukuran untuk menampilkan sebuah kotak iklan, walaupun begitu ada juga yang menampilkan iklan dengan ukuran kedua-duanya (ukuran besar dan kecil) pada bagian yang berbeda pada sidebar.

Menampilkan dua ukuran banner iklan dengan ukuran berbeda membutuhkan css yang berbeda pula, namun dengan cara tersebut kita bisa mengkostumisa lokasi penempatan (atas bawah ukuran kecil dan besar atau atas bawah diantara widget lain yang ada pada bagian sidebar) yang kesemuanya itu merupakan sebuah pilihan.

Dalam hal ini kita akan membuat sebuah banner iklan dengan dua ukuran berbeda tapi dalam satu ruang yang sama, penggunaan cara ini akan lebih menyingkat penggunakan css, namun penempatannya tentu saja berurutan tidak bisa terpisah dengan diselingi elemen lain (widget) pada sidebat.

Jika ini menjadi pilihan, kalian bisa menggunakan css dibawah ini untuk menampilkan banner iklan pada sidebar dengan dua ukuran berbeda (125px kali 125px dan ukuran 300px kali 250px).

CSS

#iklan {
  margin: 10px auto;
  padding: 15px;
  text-align: center;
  background: #fff;
  width: 300px;
}
.iklanbig {
  max-width: 90%;
}
#iklan img {
  margin: 0 auto;
  padding: 3px;
  text-align: center;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  -webkit-transition: all 0.7s ease-in-out 0s; /* Safari and Chrome */
  transition: all 0.7s ease-in-out 0s;
}
#iklan img:hover {
  z-index; 1;
  background: Orange;
  -webkit-transform: scale(1.1,1.1); /* Safari and Chrome */
  -ms-transform: scale(1.1,1.1); /* IE 9 */
  transform: scale(1.1,1.1);
}

HTML

<div id="iklan">
<a href="#" target="_blank"><img alt="banner" src="Alamat Gambar Anda" /></a>
<a href="#" target="_blank"><img alt="banner" src="Alamat Gambar Anda" /></a>
<a href="#" target="_blank"><img alt="banner" src="Alamat Gambar Anda" /></a>
<a href="#" target="_blank"><img alt="banner" src="Alamat Gambar Anda" /></a>
<a href="#" target="_blank"><img class="iklanbig" src="Alamat Gambar Anda" alt="banner Ageung" /></a>
</div>

Dalam hal ini kotak iklan ukuran besar (300px kali 250px) hasilnya tidak murni sebesar ukuran pixel tersebut, ukurannya sudah diubah dalam nilai unit persen (%) untuk menampilkan iklan pada ukuran penuh dan rata kanan kiri, dengan ini tidak menutup kemungkinan penggunaan banner gambar dengan ukuran yang lebih besar.

Kotak iklan tersebut menggunakan sedikit efek hover untuk menambah style dalam penggunaaanya, untuk kesesuaian ukuran ataupun efek hover, kalian bisa modifikasi sendiri dan menyesuaikan dengan template yang dipergunakan.