Tutorial : Styling Sidebar


Assalamualaikum and annyeonghaseyo. Dekat bawah ni antara jenis2 bentuk sidebar yang korang bole guna utk dijadikan post title & sidebar title. Copy je code dekat bawah ni.


Style 1
border: 1px dashed #000000;
background: url(URL BACKGROUND);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-left: 1px solid #999999;
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Style 2 
border: 2px solid #FAAFBE;
background: url(URL BACKGROUND);
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Style 3 
border-bottom: 2px solid #8A4B08;
border-top: 2px solid #8A4B08;
background: url(URL BACKGROUND);
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Style 4 
border-bottom: 2px dashed #58FAAC;
background: url(URL BACKGROUND);
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Style 5 
border: 2px solid #333333;
background-colour: #FAAFBE;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-left: 2px solid #333333;
}

Merah : URL background
Hijau : warna background
Biru : warna border
Oren : solid / dotted / dashed

 Credit : Fatini Jaafar

14 comment [s]:

Athirah Fairuz said...

Akak , kod-2 nih , letak kat mane ?

Eqin Rushiy said...

Kak, sy nak guna kod kod ni, tapi letak kat mana? Tolong please.

anshmnf said...

Saya guna ye kod ni.Terima kasih :)

tyra93 said...

nak paste dkt mana yer?

farizah said...

nak paste dekat mana ye??

AinaZaidi said...

thanks so much for this! ^^

Afiqah Tao said...

errr error lh kak

mardiana bt. jamaludin said...

macam mane nak gune ni kak ? nak paste dekat mane ? >.<

Izyan Ayuni said...

saya guna style 2 ye ? tq

Unknown said...

nak letak kat mana ni?

atiqahjaidin said...

Letak code ni dekat Edit HTML :)

Asma Najwa said...

thanks you! :)

Unknown said...

kak , nak letak kod nie dkat mane ? nak cari kod ape dulu ??

Any Livers said...

akak... saya nak basecode dari kode2 ni. Thanks