Sunday 25 March 2012

Membuat sidebar dalam kotak yang terpisah

Membuat sidebar dalam kotak yang terpisah >> Pastinya udah pada tau ya apa itu sidebar, jadi ga perlu diterangkan lagi. Sekarang kita akan membuat sidebar dalam kotak yang terpisah. Artinya adalah menambahkan pembatas di sekeliling sidebar agar terpisah dari area di sekitarnya seperti area posting.
Oke langsung saja ke cara pembuatannya.

  1. Login ke blogger dengan id anda
  2. Silahkan klik rancangan
  3. Pada tab menu pilih Edit HTML
  4. Klik kotak kecil Expand Template Widget
  5. Untuk backup, silahkan klik teks Download Template Lengkap
  6. Cari kode ini :

    .sidebar .widget, .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }
  7. Hapus kode di atas dan ganti dengan kode ini :

    .sidebar .widget {
    background:#fff url(http://i38.tinypic.com/2lt5wsl.jpg) repeat-x top;
    border:1px solid #0B610B;
    margin:0 0 0.5em;
    padding:0.5em;
    font-family:"Trebuchet MS";
    }
  8. Berikutnya klik tombol Simpan Template
  9. Selesai


Oke, mudah-mudahan tidak ada kesulitan yang ditemui. Seperti yang saya katakan di atas, semua kode tersebut masih dapat anda utak-atik. Selamat mencoba dan semoga berhasil.

contoh-contoh sidebar dalam kotak komentar salah satunya seperti gambar dibawah ini:

Sidebar tanpa border pembatas

sidebar dengan kotak pembatas

Sidebar dengan border pembatas dan header background

sidebar dengan pembatas dan background
Sumber http://infonetmu.blogspot.com


Daftar Isi:

3 Comments
Tweets
Komentar

3 comments:

Anonymous said...

f

Anonymous said...

2222

Anonymous said...

dwd

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons