Monday, May 11, 2009

Cara Mengatur Tampilan Judul Sidebar

Bagi anda yang senang membuat blog tampil menawan, dan membuat sesuka anda, bisa anda mulai dengan merubah tampilan judul pada sidebar. Mau di buat seperti apa tampilan judul di sidebar ? Membuat tulisan lebih besar / lebih kecil, membuat huruf menjadi tebal, membuat tulisan tampil di sebelah kiri / kanan / atau tengah ?

Untuk mengatur tampilan judul sidebar, anda tinggal mengatur kode CSS untuk title sidebar, anda tinggal mencari kode seperti ini di menu Edit HTML :






.sidebar h2 {


……………….


……………….


………………


}






Titik-titik di bawah sidebar h2 adalah isi kode judul sidebar yang mendefinisikan tampilan judul sidebar. Anda tinggal menambahkan kode atau mengurangi kode yang ada di situ.





Contoh :

  • Anda ingin mengatur besarnya hurup judul sidebar, maka anda tinggal menambahkan kode ini :

    .sidebar h2 {

    font-size:110%;

    }

    Kalau anda ingin memperbesar huruf, anda bisa mengganti 110% menjadi : 120%, 130%, 140%, sesuai keinginan anda. Sebaliknya kalau anda ingin memperkecil huruf, anda ganti 110% menjadi : 100%, 90%, dst.


  • Kalau anda ingin membuat hurup judul sidebar terlihat tebal, maka anda cukup menambahkan kode berikut :

    .sidebar h2 {

    font-size:110%;

    font-weight:bold;

    }

    Tulis bold bila ingin tulisan tebal, atau bila ingin tulisan biasa ganti bold dengan normal.


  • Sekarang kalau ingin membuat judul sidebar di sebelah kanan :

    .sidebar h2 {

    font-size:110%;

    font-weight:bold;

    text-transform:uppercase;

    text-align:right;

    }

    Tulisan right berarti judul sidebar akan di kanan, jika ingin di sebelah kiri maka tinggal di ganti dengan tulisan left, jika ingin di tengah tinggal di ganti dengan center.


  • Jika ingin ada garis tinggal, tambah kode border :


    .sidebar h2 {

    font-size:110%;

    font-weight:bold;

    text-transform:uppercase;

    text-align:right;

    border: 1px solid #000;

    }

    1px solid #000 berarti tulisan judul sidebar akan dikelilingi garis sebesar 1 pixel dengan warna hitam.


  • Sudah ya... tambah menawan nih sidebarnya...


2 komentar:

Nunung Priyatna said...

terima kasih,banyak sekali saya dapatkan dari blog ini

Kris Jhoxer said...

Ya sama-sama...