CSS : Small Banner for Friend Links

Kutemukan satu gambar dengan ukuran, warna dan bentuk yang cocok untuk dijadikan banner di halaman blog.Perhatikan disini:

Namun sepertinya akan menjadi lebih banyak waktu yang dibutuhkan untuk meload semua banner kecil-kecil ini apabila linknya bertambah banyak (dan aku yakin ini sangat besar kemungkinan terjadi.)Jadi aku pikir kenapa tidak kotak ini aku jadikan background untuk banner saja,dan text di dalamnya saja yang berubah sesuai dengan keperluanya.

Untuk itu aku tutup aja bagian tulisan di dalamnya dengan warna putih #FFFFFF, dan hasilnya seperti berikut ini :

Ok, kita lanjutkan.Untuk itu aku perlu menyiapkan CSS style untuk itu, ini dia :

#banner {


letter-spacing:.1em;
float: left;
background: #D8DADC ;
margin:2px;
padding: 0px;
width:93px;
height:33px;
font:bold 95%/1em “Trebuchet MS”,Trebuchet,Verdana,Sans-serif;
background:#ffffff url(http://photos1.blogger.com/blogger/4452/1518/1600/bgbutton.jpg) no-repeat;
}

Perhatikan Url gambar tersebut diupload di blogger pribadi agar lebih mudah dicari. (Tipsnya : kita bisa upload di satu post terpisah dalam status draft agar mudah dicari untuk di copy kode Urlnya suatu saat bila diperlukan). Lalu kita gunakan tag paragrap agar mudah mengendalikan posisi textnya ditengah, untuk itu ditambahkan dengan :

#banner p {
margin:0 15px;
color:#8c8639;
}

dan terakhir, karena sifatnya yang akan menjadi banner maka akan dipergunakan tag link.

#banner a {
text-decoration:none;
color:#8c8639;
}

ok, selanjutnya di dalam HTML akan kita tambahkan beberapa link banner.

hasilnya akan terlihat seperti banner kan?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s