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

2 komentar:

Fatih Tronik mengatakan...

thx gan atas tutorialny.... sangat bermanfaat bgt.... kunjungi blog saya juga y gan....

:c:

Shinta Hartini Putri mengatakan...

ga ngerti iiiiih ..
ajariiin ..

Posting Komentar

no spam ...!!! no porn ...!!! if you want to show the expression of emotion please type the code above is located right next to emotion ....??? thank's ^ ^
-------------------------------------------------------
-------------------------------------------------------
no spam...!!! no porn...!!! kalau Anda ingin menunjukkan ekspresi silakan ketik kode emotion diatas yang barada disamping kanan emotion....??? thank's ^ ^