Tuto : Sidebar di Blog

Kelmarin ada request yang nak tahu coding sidebar macam Beeha. So, Beeha bagi sebijik terus coding mcm sidebar Beeha. I tak tukar apa -apa pun, memang gedebuk code macam sidebar Beeha. Malas nak edit sikit2, Hahaaa.  I tak kedekut , or nak jealous kalau ada orang pakai coding yang sama macam Beeha :) Silakan guna... Mehh sini nak ajar.




First, pergi ke Template ---> Edit Hml .

Kedua, cari code ini

Headings

Kemudian, korang copy code sidebar yang dibawah ini dan paste kan selepas Headings tu, bawah pada ----------------------------------------------- */ garisan-garisan ni.

.sidebar h2 {
color:#000000;
text-align:center;
margin:-5px  1.0 em;
font-size: 100%;
font-family: 'Arial';
text-transform:uppercase;
text-align:center;
letter-spacing: 2px;
padding:7px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
border-bottom: 3px solid #F66E97;
background:#61386d;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: .5em;
padding-left: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
padding-top: 10px;
color: #000;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 5.0em;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
border-right: 2px solid #91E3C8;
border-left: 2px solid #91E3C8;
border-bottom: 2px solid #91E3C8;
margin:20px 0px 0.5em;
padding:0px 0px 0.5em;
align:center;
}
.sidebar .widget-content {
margin: 0 5px;
font-size:11px;
font-family: Arial;
}

Selepas itu, preview dulu, kalau OK boleh save je lah. :)

P/S : Korang pandai2 lah tukar warna or ketebalan border yea. Beeha harini malas pulak nak highlight satu satu yang mana boleh diubah suai. Heheee. 

Border : solid / dashed / dotted