Rabu, 11 Agustus 2010

Memberi Background pada Judul Sidebar

Mungkin dari judul diatas sudah banyak terdapat artikel ini tetapi tidak salahnya kalau saya bahas lagi di blog saya ini. Karena yang saya khawatirkan adalah jika para pendatang baru belum juga memahami dari artikel ini diblog lain. Tidak perlu berlama-lama lagi soalnya tutorial ini sangat gampang sekali jadi saya harap Anda dapat memperhatikan dengan baik.

1. Login www.blogger.com
2. Pilih Dasbor
3. Pilih Tata Letak
4. Pilih Edit HTML
5. Cari kode yang hampir mirip dibawah ini dengan cara blog kode yang mau dicari terus tekan CTRL+F:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}


6. Jika sudah menemukan kode diatas, setelah itu tambahkan kode dibawah ini dibawah kode diatas:

.sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
background:#2200CC repeat-x top left;
}


sehingga menjadi :

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
background:#2200CC repeat-x top left;
}


7. Simpan template dan liat blog

Yang perlu diganti dengan kreasi Anda :
Merah : #ffffff merupakan kode warna tulisan Anda, jika ingin ganti warna hapus saja kode tersebut dan diganti dengan warna Anda.
Biru : ukuran font Anda jika mau lebih besar angkanya harus lebih besar.
Hijau : ganti warna background Anda dengan kode warna yang lain, jika Anda menginginkan background gambar hapus kode warna terus ganti url('nama gambar.photobucket.com') sehingga menjadi :

background:url('nama gambar.photobucket.com') repeat-x top left;
Untuk yang diwarna ungu ganti dengan alamat hosting gambar Anda. Jika Anda belum punya alamat hosting buat gambar dapat melalui daftar ke photobucket.com terus upload gambar Anda.

Jika masih belum jelas langsung tanyakan sama saya lewat email maupun YM.

Semoga bermanfaat

Tidak ada komentar:

Posting Komentar