Rabu, 13 Mac 2013

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 ^^,

6 ulasan:

Husna Humairah berkata...

Saya baru try buat.. Tapi buruk. Saya buat kat post tak jadi.. So saya letak kat HTML sementara... tolong buatkan kat post boleh?

Shaira Elianis berkata...

Yeayy jadi . Thankss :)

Shaira Elianis berkata...

Nak re-tutor boleh ?? Hehe ^^

Nurul Jannah berkata...

@Shaira Elianis:dipersilakan untuk re-post mana-mana entri dalam blog ni^^,

Zayani Zulkiffli berkata...

tips yang berguna :)

siti nor aishah md noor berkata...

ASSALAMUALAIKUM...menjadi..dah cantik kotak banner blogger saya sekrg...

Related Posts Plugin for WordPress, Blogger...
✿ Personal Blog : Copyright 6/12/2012 © Design By Nurul Jannah Binti Ahmad ✿