Area Sidebar Dalam Kotak 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. Seperti biasa, acuan yang saya gunakan adalah template minima white blogger. Perbedaan dengan template anda bisa saja terjadi namun tidak banyak karena semua template blogger masih mirip koq. Oke langsung saja ke cara pembuatannya.

1. Login ke blogger dengan id anda
2. Silahkan tuju Tata Letak
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;
   }

   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";
   }

7. Berikutnya klik tombol Simpan Template
8. Selesai

Pada kode yang diganti, saya telah menyisipkan sidebar header background. Silahkan dihapus atau dimodifikasi lagi asalkan disesuaikan dengan desain template anda. Gambar berikut dapat menjelaskan ilustrasi perubahan yang terjadi :

Sidebar tanpa border pembatas


Sidebar dengan border pembatas dan header background



Untuk memudahkan edit template, gunakan link di bawah ini :
Kode warna untuk template blog
Border dan background pada template blog
CSS border padding dan margin

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.

Related Post:

Trik Blogspot

• Menambahkan Image Pada Judul Posting
• Mengganti Pager Link Blogger Dengan Icon
• Klik Label Tampil Hanya Judul Posting Update
• Klik Label Tampil Hanya Judul Posting
• Menambahkan Icon Pada Label Dan Link Sidebar
• Mengganti Tanggal Dengan Icon Kalender
• Menghilangkan Icon QuickEdit (Tang dan Obeng)
• Area Komentar Dalam Kotak Terpisah
• Area Posting Dalam Kotak Terpisah
• Background Warna Pada Teks Posting
• Modifikasi Pesan Pengantar Formulir Komentar
• Beda Tampilan Komentar Pemilik Blog
• Nomor Urut Komentar (Numbering Comment) Blogger
• Pasang Emoticon Di Atas Kotak Komentar
• Membuat Blockquote Dan Modifikasi Blockquote
• Masalah Pada Verifikasi Kotak Komentar
• Membuat Teks Berkedip Blink Text
• Membuat Horizontal Navigasi Blogger
• Avatar Profil Komentar Blogger Update
• Latar Belakang Teks Dengan Efek Stabilo
• Menggunakan Gambar Untuk Latar Belakang Blog
• Pasang Strip-Ad Seperti Navbar Blogger
• Menghilangkan Border Pada Image Posting
• Modifikasi Border Photo Profil Blogger

or or