Thursday 30 August 2012

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+fbody {
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?

2 comments:

Unknown said...

Anis , saya punya takde tab untuk backround la . cam ne erkk ?

Student Kecik said...

@Zunur Izaty Takde tab untuk background? Saya kurang faham lah :(