Cara Mudah Agar Banner Tidak Makan Tempat

Siapa sih gini hari yang ngeblog gak gabung ke berbagai  komunitas? Apalagi sekarang ini banyak banget komunitas blogger yang eksis dan tebar ilmu, ngadain berbagai even yang membangun jaringan dan pengetahuan para blogger, bravo lah pokoknya m ah.

Nah, sayang banget kan, kalau kita gak gabung ke komunitas-komunitas tersebut. Tapi nih, karena banyak banget komunits yang bagus suka bikin galau yak. Habis, rata-rata wajib pasang banner yang dilink ke web komunitas tersebut. Sementara banner-banner ini kan butuh tempat, rasanya ga nyaman aja kalau bertebaran aneka banner di badan blog. Mata tamu yang datang juga jadi ga fokus ke artikel, malah asyik ngamatin disain bannernya..wkwkwkwkkw (ini mah khayalan saya aja).

Tapi, ternyata banyak loh yang gak pengen blognya bertebaran banner gak beraturan,bahkan gara-gara itu jadi membatasi gabung serius ke komunitas tersebut. Trus yang pernah mampir ke blog saya, ada yang tanya: Gimana tuh, mba, cara buat banner jad satu muncunya bergantian gitu. Kan, jadi irit tuh?

Baiklah, ini sih sederhana saja ya. Berikut ini caranya, moga bermanfaat:

• Langsung cuss ke Tata Letak
• Silakan pilih mau diletekkan di Sidebar/Mainbar (terserah enaknya mata memandang)
• Tambahkan Gadget

Pilih:

HTML/Java scrip

Keterangan Warna:

Merah: Link

Biru: Pic (gambar banner)

Hijau: Ukuran Banner

Copy paste Kode HTML dibawah ini  ke Konten:

<style type='text/css'>
ul.slideshow {
list-style:none;
width:200px;
height:200px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:200;
}
ul img {
width:200px;
height:200px;
border:none;
}

</style>


<ul class="slideshow">
<li><a href="LINK-GAMBAR"><img src="GAMBAR BANNER"/></a></li>

<li><a href="LINK-GAMBAR"><img src="GAMBAR BANNER"/></a></li>

<li><a href=""LINK-GAMBAR"><img src="GAMBAR BANNER"/></a></li>

<li><a href=""LINK-GAMBAR"><img src="GAMBAR BANNER"/></a></li>
</ul>