Tutorial Design Blog Simple Template

Assalamualaikum .

Dah lama rasanya tak buat tutorial .

Hari ni Anis nak ajar korang design blog sendiri menggunakan Simple Template.

Ntah lah, rasa macam best pulak guna Simple Template ni - -'

Kepada siapa yang nak design blog dia sendiri, 

jom ikut tutorial aku meh . Hihi .

Memula, tukarkan blog korang jadi Simple template dulu . Cam nie

Pergi ke Template Designer > Klik Simple Template .

Lepastu kLik Apply To Blog .

Dekat situ ada tulis Adjust Widht kan ? Sukahati lah ubah widht korang .

Korang klik dekat Advance > Background > Jadikan macam di bawah ni

Outer Background dan Header Background TRANSPARENT .

Lepas tu korang adjust la satu-satu dekat situ .

Jangan takut² ye. Korang kena berani .

Dah siap semua . Apply To Blog .

Lepas tu, klik dekat Back to blogger > Design > Edit Html .

Ctrl+f : body {

bawah tu ada kode² dia kan ? Gantikan kode² bawah tu dengan kod ni .

font: normal normal 12px Verdana, Geneva, sans-serif;
color: #000000;
background-image: url(Url Background);
background-attachment: fixed;
}

Tukar Url Background dengan background blog korang .

Ctrl+f : a:link { dan a:visited {

Padam kod bawah tu, replace kod ni

text-decoration:none;

color: #e06666;}

Tukar warna rose tu dengan kod warna di sini .
Ctrl+f : a:hover {
Letak kod ni di bawah die .

border-top: 1px dashed #000000;

border-bottom: 1px dashed #000000;

P/S : Boleh ubah kalau tamau link hover tu :P
 Kalau nak buat blockquote, Ctrl+f : ]]></b:skin>
Jumpa kan ? Copy kod bawah dan paste ATAS kod tu.

.post blockquote {

background:#666; padding:5px;

border:2px solid #000;

-moz-border-radius: 10px 10px;

border-radius: 10px 10px;

}

.post blockquote:hover {

background-image:url(Url Icon Comel);

background-position:bottom right;

background-repeat:no-repeat;

border:2px dashed #000;

}

Preview dan save kalau tidak ada error .
 Kalau korang nak letak highlight warna lain,
Ctrl+f : a:link {
Copy kod bawah dan paste di ATAS kod tadi .

::-moz-selection {

background:#3CA1FF;

color:#fff;

}

::selection {

background:#3CA1FF;

color:#fff;

}

Warna rose tu ubah dengan kod warna korang .
Kalau nak letak background untuk post title,
Ctrl+f :  h3.post-title, .comments h4 {
Bawah tu delete dan gantikan dengan kod ni .

text-align:center;

font-family:Verdana;

letter-spacing: 1px;

background-image: url(Url Background);

border-top: 3px solid #7BBBF2;

border-bottom: 1px dashed #000;

padding: 5px;

}

Preview dan save .
Kalau nak cantikkan kotak komen .
Ctrl+f : ]]></b:skin>
Letak kod bawah ni ATAS dia . (credit : kak Yasmin)

#comments h4 {

margin: 1em 3em;

font-weight: bold;

line-height: 1.4em;

color: #ffffff;

}

#comments-block {

margin-left:1.5em;

line-height:1.6em;

background: #ffffff;

color: black;

padding: 1em;

border:0px solid #ffffff;

}

#comments-block .comment-author {margin:.5em 0;}

#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

letter-spacing:.1em;

}

#comments-block .comment-body p {

margin:0 0 .75em;

-moz-border-radius: 2em;

  -webkit-border-radius: 2em;

   border-radius: 2em;

padding: 20px 10px 10px 10px;

background: #A9D0F5

no-repeat top left;

}

.deleted-comment {

font-style:italic;

color:gray;

}

 Ouh terlupa pulak . Kalau nak transparentkan header,
rujuk tutorial di sini .
That's all. Kalau nak request atau nak tanya sesuatu .
cakap je kat aku ni okey :) Tak kisah .

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---