Selasa, 10 Agustus 2010

Memberi background pada sidebar heading

| Selasa, 10 Agustus 2010 | 19 komentar
Selamat membaca artikel diblog ini semoga bermanfaat :)


Assalamu'alaikum, apa kabar semua? semoga sehat semua ya, amin
Sekarang saya akan membahas "Memberi background pada sidebar heading". Apa itu sidebar heading? sidebar heading adalah kepala dari heading(memangnya sidebar juga punya kepala wkwkw...) yang dimaksud adalah dimana judul widget berada.

Gambar disamping adalah contoh sidebar heading yang telah diberikan background. ^_^
Berikut cara Memberi background pada sidebar heading:

1. Masuk dasbor
2. Pilih Rancangan --> edit html
3. Cari code berikut:

/* Sidebar Content
----------------------------------------------- */
.sidebar {

color: $sidebartextcolor;
line-height: 1.5em;

}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom: 1px solid #99C9FF;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

4. Lalu paste code berikut setelah code diatas

/* sidebar heading */
#sidebar h2 {
padding: 6px 0 6px 7px;
text-align: justify;
color: #ffffff;
font: normal bold 98% Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
background-image:url("http://i45.tinypic.com/3320w06.gif");
background-repeat:repeat-x;
background-position:center right;
border-bottom: 1px solid #99C9FF;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
border:2px solid #E8EDFB;
}

5. Save/Simpan

Note:
*Code yang bewarna merah adalah url gambar background
*Code yang dicari kemungkinan berbeda jika tidak ada cari yang hampir mirip

19 komentar :

Angga J.P. mengatakan...

wahh sob mantep nih keep posting ya..

Manchester United Tech mengatakan...

mantap sob..kalo ane sih kurang suka memberi background pada sidebar...

ems mengatakan...

joos banget tutornya.. hehehe
mantab

BeDa mengatakan...

Terima kasih tutorialnya, bisa membuat blog lebih indah dilihat

Salam ukhuwah

Dhana/戴安娜 mengatakan...

salam sahabat
perlu dipraktekkan makasih ya

ANDI WONG mengatakan...

posting ini sgt membantu sy dlm mengingat html dasar..dg memberi background tampilannya akan lebih bagus lagi.. siip :)

Islamic.Net mengatakan...

makasih, nanti saya mau coba

aufal mengatakan...

berkunjung.....

Suparyanto mengatakan...

Nice posting..Ane coba dulu Sahabat.

Izin follow this blog,follow balik za... ^_^

Masphe mengatakan...

Ini yang saya cari.Thank's sharingnya.

Ibnu(dunia-klue) mengatakan...

Tutoril yang mantab
SUKSEL(SUKSES SELALU),he..he..

Ka Damar mengatakan...

Mantep Kawan Cuman mainin CSS ^^

GudangBlog mengatakan...

Weleh-weleh... makin mantab aja nih tutorial di blog ini. Sips kang kalau aku lagi butuh ni trik lagsung kesini..

PIK Remaja Al-Hikmah mengatakan...

Dengan memberi hiasan biground tampilan blog menjadi lebih cantik dan enak dipandang sehingga membuat pengunjung akan puas

Fadel mengatakan...

kalau say agk suka yang beginian kang, ini kan sidebar andalannya ardi :D, , saya lebih suka yang Teks dan Bergaris bawah

Herlan mengatakan...

Wah..wah...wah... ga bosen2 nih ngebagusin blog jdinya...hehe Tipsnya keren2 nih,, makasih banget... :)

akhyar.info mengatakan...

wah...keren nih...
saya coba dulu...

sofilmendo mengatakan...

wah, keren nih sob...mau dicoba ahh...

Maulana Ma' Arief mengatakan...

thanx ya infonya. visit my blog.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Blogroll

Flagcounter

free counters
© Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online