Music World: Make Your Own Template

Hello Guys..
Hari ni nak buat tutorial cara nak buat blogskin..
Terbaik macam coboy jr.!! ahhaha..Pasal CJR Cerita lain masa k? [=
1ST, kALAU yang belum tukar design jadi template tukar k..? Heheh ..
Nak Tukar... Check >SINI<
1. Mula-mula, korang buka notepad/microsoft office word dan copy code bawah ni..paste dekat bahagian atas sekali... [=

<html>
<head>
<center><img src="URL HEADER"></img></center>
<title> Title Blog </title>
<style type="text/css">
[CSS CODES]
</style>
<body>
[CONTENT (SCRIPT)]
</body></html></head>

merah: URL Gambar Header
oren: tajuk blog korang :)
2. kita start dengan bahagian CSS dulu k? cOPY CODE kat bawah ni.. Highlight tulisan '[CSS CODES]'.. CTrl+v [Serentak]
untuk body:

body{
background: url(URL BACKGROUND);
font: 12px Century Gothic;
cursor: crosshair;
}

biru: URL gambar untuk background
hijau: jenis font
ungu: Kalau nak tukar jadi gambar link cursor padam crosshair; dan change ke

url(URL IMAGE), progress;

untuk content:

#content{

width: 800px;

background:#ffffff;

color: #000000;

font: 11px Century Gothic;

top: 200px;

left: 100px;

position: absolute;

}

ungu: Lebar post [body]
hijau: Warna FOnt

untuk link & hover:

a:link, a:visited {
color:#C8DEE5;
text-decoration:none;
cursor: crosshair;
}
a:hover {
cursor: crosshair;
color: #B1E2F2;
}

merah: warna link

untuk blockquote & hover:

blockquote {
background: #D0C8C8;
color: #ffffff;
padding: 3px;
-webkit-transition: 1.0s;
}
blockquote:hover {
background: transparent;
padding: 3px;
color: #000000;
-webkit-transition: 1.0s;
}

untuk post title & date:

.post-title {
color:#000000;
font-size:16px;
padding:3px;
border-bottom: 1px solid #000000;
text-align: left;
-webkit-transition: 0.7s;
}
.date {
color: #000000;
font-size:10px;
margin-bottom:2em;
text-transform:uppercase;
}

biru: warna font

hijau: saiz font

oren: ketebalan border

pink: solid/ dotted/ dashed

merah: warna border

3.tu code basic untuk korang letak di bahagian CSS. Dan, sekarang untuk bahagian SCRIPT pulak. Letak dekat bahagian [CONTENT (SCRIPT)] ye. Copy code di bawah.

<div id="content" style="display: none;">
<blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br><br>
</blogger>
</div>

pink: Tukar jadi perkataan untuk pengomen pengomen blog contoh: pandas,cutepies..
mesti ade 's' kat blakang k?

4.Okay dah siap.Code ivy share ni, jenis simple je. So, yang lain tu korang ubah la ikut creativity korang sendiri ye. Oh lagi satu, mesti ada yang keliru macam mana rupa coding ni bila dah disatukan. So, here contohnya.

<html>

<head>

<title>Title Blog</title>

body{

background: url(URL BACKGROUND);

font: 12px Century Gothic;

cursor: crosshair;

}

#content{

width: 800px;

background:#ffffff;

color: #000000;

font: 11px Century Gothic;

top: 200px;

left: 100px;

position: absolute;

}

a:link, a:visited {

color:#C8DEE5;

text-decoration:none;

cursor: crosshair;

}

a:hover {

cursor: crosshair;

color: #B1E2F2;

}

</style>

<body>

<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>

<$blogitembody$><br><br>

</blogger>

</div>

</body></html></head>

Selamat mencuba ^^V
Credit: Mrsbaekyol

Tuesday, 13 November 2012

Make Your Own Template

No comments :

Post a Comment