Halaman

▼

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?

2 komentar:

  1. dila.sites.all about korean4:19 PM

    ass pak

    pak maaf saya mw tanya …

    bagimana cara edit css DATE yang seperti ini

    div class=’date’>

    var timestamp = "";
    if (timestamp != '') {
    var timesplit = timestamp.split(",");
    var date_yyyy = timesplit[2];
    var timesplit = timesplit[1].split(" ");
    var date_dd = timesplit[2];
    var date_mmm = timesplit[1].substring(0, 3);
    }

    document.write(date_mmm);
    document.write(date_dd);

    saya sudah coba, tapi gagal aja pak
    please replay in my email dillangek.ngok@yahoo.com

    ditunggu ya pak
    terimaksih
    wassallam

    BalasHapus
  2. Mas Hery4:30 PM

    wallaikumsalam.

    ngedit CSSnya buat apa nih, saya blum cek, apakah ini maksudnya biar CSSnya jalan, atau mau ngedit biar tampilannya lain, boleh diperjelas?

    BalasHapus

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.