Agar Tampilan Widget Sidebar Tampak Terpisah
22 Januari 2010

Untuk melihat contoh dari postingan artikel ini, bisa dilihat di blog Saya ini. Di sini kita lihat background blognya warna coklat muda serta background sidebar dan kolom postingannya berwarna putih. Jadi seolah-olah seperti terpisah satu sama lain. Nah untuk memodifikasinya, silahkan ikuti langkah-langkah berikut ini :


  • Untuk merubah background blog, cari kode html di bawah ini, lalu ganti background-nya dengan warna yang diinginkan. Contoh kode warna bisa dilihat di postingan Saya tentang kode warna html.

    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

  • Cari lagi kode di bawah ini

    .sidebar .widget, .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

    lalu ganti dengan kode di bawah ini

    .sidebar .widget{
    background:#fff;
    border:1px solid #000;
    margin-bottom:5px;
    padding:0.5em;
    }

    .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin-right:5px;
    padding:0 0 0.5em;
    }

    Kita bisa merubah nilai margin sidebar sesuai yang kita inginkan. Masalah satuannya bisa pakai px, bisa pakai em. Silahkan coba saja untuk mengetahui perbedaannya.
  • Simpan lalu lihat hasilnya.


Artikel lainnya :

Label:

0 komentar:

Poskan Komentar

Langganan: Poskan Komentar (Atom)