н ι α т υ ѕ

Tutorial : Make Your Own Template (Blogskin)

Assalamualaikum and annyeonghaseyo. Hai. Tuto kali ni di-request oleh Yana. Memandangkan sekarang ni dah ramai yang guna blogskin, so apakata kita cuba buat template sendiri. Hehe. Jom Start.

1. Bagi yang belum ubah template designer ke template classic tu. Korg pegi kat >SINI<
2. Mula-mula, korang copy code bawah ni dan 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 header
oren: tajuk blog korang

3. Now kita start dengan bahagian CSS dulu

untuk body

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

biru: URL background
hijau: jenis font

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

4. Okay, yang itu code basic untuk korang letak di bahagian CSS. Dan, sekarang untuk bahagian SCRIPT pulak. Letak dekat bahagian [CONTENT (SCRIPT)] ye.

<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>

5. Okay dah siap.Code tieqa 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 ^^

credit: AskarrPink