Cantikkan Susunan Banner

Rasa macam lama tak update blog, idea tak datang untuk update. Tapi sebab dapat request dari Husna Humairah tentang cara nak buat kotak untuk susun banner-banner, maka adalah alasan untuk update blog hari ni. Syukran jiddan Husna Humairah ^^,

Saya pun takla pandai sangat bab-bab tutorial blog ni, hasil perkongsian sahabat-sahabat blogger jugak, tapi dah tak ingat ambil dari mana. Jadi saya cuba tunjukkan sekadar yang saya mampu. Harapnya tutorial ni dapat membantu. Macam mana rupa kotak yang dimaksudkan? Boleh tengok gambar dibawah atau di link ni untuk lebih jelas <BANNER>

1. Copy semua kod di bawah, dan paste dalam bentuk html.

Saya sarankan anda supaya edit kod ini di <LINK> terlebih dahulu supaya lebih jelas.

<div style="background: #FFFFFF repeat; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border: 2px dashed #FF3366; padding: 5px;">
<center>
</center>
<center>
<div style="background-image: url(&quot;http://dl.glitter-graphics.net/pub/303/303771ob8r4r0z04.png&quot;); border: 3px double #FF3366; height: 600px; overflow: auto; width: 650px;">
<center>
<table border="2" cellpadding="6" cellspacing="6"><tbody>

<tr><td>CODE BANNER</td><td>CODE BANNER</td><td>CODE BANNER</td><td>CODE BANNER</td></tr>
<tr><td>CODE BANNER</td><td>CODE BANNER</td><td>CODE BANNER</td><td>CODE BANNER</td></tr>
</tbody></table>
<br />
<br />
</center>
</div>
</center>
</div>

P/S : warna merah untuk warna border, biru untuk background kotak banner, hijau untuk saiz kotak banner (saiz kotak bergantung kepada kelebaran blog masing-masing, edit sampai dapat saiz yang sesuai k.) <KOD WARNA>

2. Gantikan CODE BANNER tu dengan kod banner anda. Kalau nak selaraskan saiz semua banner, masukkan height="125" width="125" sebelum /></a> dalam kod banner. Saiz banner tu boleh edit ikut keselesaan masing-masing k=)

Contoh kod banner :
<a href="http://travelognursyurga.blogspot.com/"><img src="http://i1103.photobucket.com/albums/g476/nuruljannah91/bannernursyurga_zpsb65f7ca4.gif" alt=" height="125" width="125"/></a>

3. Kalau nak tambah barisan banner yang baru, tambahkan kod ni je.
<tr><td>CODE BANNER</td><td>CODE BANNER</td><td>CODE BANNER</td><td>CODE BANNER</td></tr>

P/S :Kod </td><td> maksudnya untuk garisan banner, kalau kod </td></tr> untuk barisan banner yang.baru.

Kalau tak faham, tinggalkan di ruangan komen k.

Semoga berjaya=)

Kelebihan guna cara ni :

• __ lebih kemas dan tersusun
• __ ada scroll bar
• __ ada border
• __ saiz banner dapat diselaraskan
• __ boleh tukar background ikut citarasa sendiri

Jom jadi baik, tabarakallah ^^,

Tweet