Membuat Sidebar Dalam Kotak Yang Terpisah

Diposting oleh Keiruchan Agatha on Rabu, 16 Mei 2012

 

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

Semoga Bermanfaat. Terimakasih..
Share Please :

Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan

Markup Validation Service
Anda telah membaca artikel Membuat Sidebar Dalam Kotak Yang Terpisah Ditulis oleh Keiruchan Agatha pada Rabu, 16 Mei 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging.

Baca Yang Ini Juga Boz :

{ 0 komentar... read them below or add one }

Posting Komentar

Silahkan tinggalkan komentar anda dengan tidak meninggalkan link. Jika ada kesalahan dalam artikel ini dan jika ada saran dan kritik silahkan tulis komentar anda dibawah dengan baik dan sopan... ;)
Dan jika kedapatan link yang mati dalam penempatan software atau game harap beritahukan agar segera diperbaiki...

 
Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service