I N F I N I T E: Sidebar Title

Assalamualaikum :)

Macam arrien katakan di entry sebelum ini, arrien akan buatkan tutorial yang telah direquest di ask.fm so ini requestnya :D

So sidebar yang dimaksudnya itu ialah ini;

[Preview]

Denim / Washed Denim Template
1. Dashboard > Template > Edit Html.
2. Use Ctrl + F and fine code .sidebar h2 {

Classic Template/ Blogskin
1. Dashboard > Template.
2. Untuk blogskin,korang cari code sidebar korang.
3. Copy code nie;

text-align: left;
margin-left: -30px;
margin-bottom: 10px;
width: 200px;
padding: 8px;
background-color: #fff;
box-shadow: 0px 4px 4px #cfc4ae;
border-left: 40px solid #cdf0eb;
font-family: masana;
font-size: 22px;
letter-spacing: 2px;
background-image: url('URL BACKGROUND');
}
@font-face{
font-family:masana;
src:url(http://static.tumblr.com/dep4vzc/Inomy7nn8/masanascript-1propia.otf);
}

4. Paste / gantikan di bawah code sidebar yang korang cari tadi.
5. Preview & save.

Note:
Merah: Gantikan dengan apa yang anda suka. (warna & background)

code credit : cocorini

5 Comments

Assalamualaikum :)

Semalam arrien ada buat tuto sidebar border macam dekat blog arrien yang haritu kan, so ada yang tenya macam mana nak buat sidebar title nye pula. so here the tuto :D

Denim / Washed Denim Template
1. Dashboard > Template > Edit Html.
2. Use Ctrl + F and fine code .sidebar h2 {

Simple Template
1. Dashboard > Template > Edit Html.

2. Use Ctrl + F and fine code h2 {

Classic Template/ Blogskin
1. Dashboard > Template.

2. Untuk blogskin,korang cari code sidebar korang.

3. Copy code nie;

letter-spacing:2px;
font:11px thestarsthatshineabove;
color:#ffffff;
background:#ccc;
padding:4px;
text-align: center;
border-bottom:5px solid #000;
border-radius:0px 0px 0px 0px;
text-shadow: 1px 1px 2px gray;
color:#000;
}

4. Paste / gantikan di bawah code sidebar yang korang cari tadi.
5. Preview & save.

Note :
Merah : Tukarkan dengan code color.

2 Comments

Assalamualaikum :)

Ada adik nie dye tanya macam mane nak buat sidebar macam dalam skin nothing over arrien.. arrien rasa yang adik nie maksudkan ialah sidebar title kowt,huhu sorry kalau tersilap. Anyway , arrien nie arrien nak buat tuto titlr sidebar macam dalam skin arrien tu,sorry kepada adik yang menanya coz lambat buat tuto :D

Template Designer

1. Dashboard > Template > Edit Html.

2. Use Ctrl + F and fine code .sidebar h2 {

Classic Template/ Blogskin

1. Dashboard > Template.

2. Untuk blogskin,korang cari code sidebar korang.

3. Copy this code:

color: #fff;

font-family: trebuchet ms;

font-size:10px;

line-height:17px;

text-align: center;

background: #F7D8FE;

text-transform: uppercase;

letter-spacing: 1px;

}

4. Pastekan di bawah code yang korang cari tadi, for blogskin gantikan di tempat code sidebar korang.

5. Preview and save.

Note:

Merah : Tukarkan dengan code color yang korang nak.

2 Comments

Assalamualaikum :)

Apa khabar sahabat-sahabat blogger?? alhamdulillah,harap semua2 sihat ^^.. fuhh akhirnye tercapai juga hajat nak menaip dekat blog nie.. miss u mr.blog :p

Dah lama juga kan arrien tak buat tuto?? so nak buat tuto tittle macam yang arrien guna sebelum nie, and sebelum tu,sorry kepada yang mintak tuto... sorry2 sesangat,buzy.... insyaallah kalau ada masa arrien try buatkan oke ;D

TITLE

Template Designer

1. Dashboard > Template > Edit Html.

Classic Template/ Blogskin

1. Dashboard > Template.

2. Use Ctrl + F and fine code .post-title { (kalau tidak jumpa cari tempat code title korang coz template lain-lain jenis)

3. Copy this code

margin-top: 20px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 3px;
color:#000;
letter-spacing:2px;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 4px;
font-weight: bold;
font: 12px cinnamon cake;
line-height:15px;
text-align: center;
border-left: 4px solid #ccc;
border-right: 4px solid#ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background:url(URL BACKGROUND);
}

4. Pastekan di bawah code yang korang cari tadi.
5. Preview and save

SIDEBAR

Template Designer

1. Dashboard > Template > Edit Html.

Classic Template/ Blogskin

1. Dashboard > Template.

2. Use Ctrl + F and fine code .sidebar h2 { (kalau tidak jumpa cari tempat code title korang coz template lain-lain jenis)

3. Copy this code

margin-top: 20px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 3px;
color:#000;
letter-spacing:2px;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 4px;
font-weight: bold;
font: 12px cinnamon cake;
line-height:15px;
text-align: center;
border-left: 4px solid #ccc;
border-right: 4px solid#ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background:url(URL BACKGROUND);
}

4. Pastekan di bawah code yang korang cari tadi.
5. Preview and save.

Note :
MERAH : Url Background.
Oren : colour border.

3 Comments

Assalamualaikum :)

Hari nie nak buat tuto coz ada seorang adik nie mintak tunjukkan cara nak buat sidebar title macam blogskin arrien nie.. First arrien creditkan kepada tuan punya blogskin yang arrien guna nie :)

Template Designer

1. Dashboard > Template > Edit HTML

2. Next, tekan Ctrl+F dan cari code .sidebar h2 { atau kalau tidak jumpa cari tempat code sidebar korang. (Coz template selalu jenis lain-lain)

3. copy code bawah nie.

letter-spacing:2px;
font:11px thestarsthatshineabove;
color:#ffffff;
background:#FFE8E8;
padding:4px;
text-align: center;
border-bottom:5px solid #E1F5F4;
border-radius:10px 10px 0px 0px;
text-shadow: 1px 1px 2px gray;
color:white;
}

4. Pastekan di bawah code yang dicari tadi.
5. Preview and save.

Template Classic/Blogskin.
1. Dashboard > Template.
2. Cari code sidebar title korang.
3. Copy code dibawah.

letter-spacing:2px;
font:11px thestarsthatshineabove;
color:#ffffff;
background:#FFE8E8;
padding:4px;
text-align: center;
border-bottom:5px solid #E1F5F4;
border-radius:10px 10px 0px 0px;
text-shadow: 1px 1px 2px gray;
color:white;
}

4.Pastekan bawah code sidebar title korang.
5. Preview and save.

Note:

Pink : Code Warna background.

Biru : Code warna bawah yang kecil tu.

2 Comments

Older Posts

I N F I N I T E

About me

FOLLOWER

Follow Me

recent posts

Blog Archive