Tutorial Sidebar

Ada sorang kawan blogger tanya macam mana nak buat sidebar macam Za. So, Za share la tutorial. Sorry kalau tak faham yer.. tak mahir sangat nak buat tuto ni. 

Ok la, Za sebenarnya buat sidebar yang di sebelah ni pun berdasarkan tutorial blogger lain.
Credit to: Nabila Medan. Klik SINI untuk tutorial asal.

Daripada kod asal diatas, untuk hasilkan sidebar macam Za, beberapa perubahan dibuat.

Warna border Za kekalkan. Kalau korang nak ubah kod warna, cari di SINI.

Kemudian, untuk jadikan background sidebar transparent, just ubah dibahagian background.

background: #kod warna; kepada background: transparent;

1.Dashboard > Design > Edit HTML > Tick Expand Widget

2.Click Ctrl + F , Search :

]]></b:skin>

3.Copy code bawah ni dan paste di atas code yang korang cari :

.sidebar .widget {
background: transparent;
width: 200px;
border-top: 3px solid #F5A9BC;
border-bottom: 3px solid #A9BCF5;
border-left: 3px solid #A9BCF5;
border-right: 3px solid #F5A9BC;
  margin:5px 5px 1.0em;
  padding:0px 5px 1.0em;
border-radius: 20px;
 }

Tukarkan:

Merah : Code Colour

Ungu : Lengkungan border

4. Preview dan Save kalau jadi.

HEADER SIDEBAR

Untuk header, follow tutorial dibawah

1. Cari kod  h2 { 

2. Copy kod nie: 

background:url(http://content.mycutegraphics.com/backgrounds/plaid/plaid22.jpg);

background-color:#F5A9BC;

border-radius: 20px 20px 5px 5px;

border-top: 3px solid #F5A9BC ;

border-left: 3px solid  #F5A9BC ;

border-right: 3px solid  #F5A9BC ; 

3. Paste kod tadi di BAWAH kod yang korang cari tadi.

4. Ubah yang warna BIRU dengan url background yang korang suka dan kalau korang tak nak background bergambar, buang bahagian tersebut, just guna background-color.

5. Preview dan Save kalau jadi.

PASTIKAN:

• Header border radius dan border saiz SAMA dengan sidebar.

• Kod warna header (warna MERAH) SAMA dengan sidebar Border-top.