S Y A Z W A N I T Y P I N G
Follow here


1 2 3 4 5 6
Tutorial : Make your own Template ON Tuesday, December 11, 2012 AT 2:22 PM
Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,mari belajar cara buat blogskin sendiri .

1. Bagi yang belum ubah template designer ke classic template/blogskin ,pergi sini --> D O O R
2. Copy code dibawah ini and paste di atas sekali ,ni kira opening lahh .
<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>
  • Biru: URL header
  • Unggu: 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
  • unggu: 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
  • biru: 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
  • unggu: saiz font
  • oren: ketebalan border
  • pink: solid/ dotted/ dashed
  • merah: warna border

4. Dah habis pasal code basicdi bahagian CSS. Dan, sekarang untuk bahagian SCRIPT pulak. Letak dekat bahagian [CONTENT (SCRIPT)] .
<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. Okie done siap ,u just made a template .Yang lain edit sendri tauu .
Code tue akan jadi macam nih.

<html><head><center><img src="URL HEADER"></img></center>
<title>Title Blog</title>
<style type="text/css">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 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></body></html></head>




Labels:


0Letter


Older Post | Newer Post