Minggu, 18 September 2011

background di 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 Rancangan
4. Pilih Edit HTML
5. Backup dulu template anda dengan klik Download full Template, supaya nanti jika terjadi kesalahan bisa di download lagi
6. Cari kode yang hampir mirip dibawah ini dengan cara blok kode yang mau dicari terus tekan CTRL+F:

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


Dalam hal ini blok tulisan "sidebar" tanpa tanda kutip lalu tekan CTRL+F

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


8. 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('URL gambar') repeat-x top left;

Untuk URL gambar ganti dengan alamat hosting gambar Anda. Jika Anda belum punya alamat hosting buat gambar dapat melalui daftar ke photobucket.com terus upload gambar Anda.

Bila anda ingin lebih sempurna lagi hasilnya, maka lakukanlah eksperimen dan ubahlah kode - kode HTMLnya kemudian lihat hasilnya. Jika anda masih bingung dengan tutorial diatas, anda dapat bertanya kepada saya lewat komentar anda.

Semoga bermanfaat ..

0 komentar:

Poskan Komentar