Tutorial : Basic Code For Blogskin ._.
Written by : hamizashuhada on Thursday, 13 June 2013 | 01:43 | 3 comments


Hai semua ._.
Tutorial ni untuk korang buat blogskin sendiri tapi yang basic je tanpa navigator.Hihik.Sorry guys.Tapi korang boleh edit sendiri.Kena pandai main code lah.Kalau nak tutorial navigation best boleh klik http://wanaseoby.blogspot.com.Kalau nak yang ada navigation korang boleh check list tutorials aku ada yang tajuknya lebih kurang macam ni : buat blogskin sendiri.Ha,kat situ ada dengan navigation sekali.Korang boleh adjust background,color,header etc sendiri ikut kreativiti korang.Okay ? Hihi jom mula!Oh,sebelum tu korang kena buka http://htmledit.squarefree.com/ dulu.Nanti korang paste semua kod dalam kotak biru tu sebab ada preview sekali.


<html>
<head>
<center><img src="Url Header" /></center>
<title>Blog Title</title>
Pink : Ikut suka hati korang ^^


<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url(Url Background);
background-attachment:fixed;
font-family: trebuchet MS;
font-size: 11px;
}
a:link, a:visited {
color:#FE2E64;
-webkit-transition-duration: 0.5s;
text-decoration:none;
}
a:hover {
-webkit-transition-duration: 0.5s;
color: #FE2E64;
}
</style><body><br>
Biru : Boleh ubah ikut selera korang.Yang a : link,a : visited { tu code untuk warna link korang.
Kod warna sila pergi http://html-color-codes.info/



.main {
background:#ffffff;
color:#666666;
padding:14px;
width:500px;
border-radius:10px;

text-align:justify;
}
.sidy {
background: #ffffff;
color: #666666;
padding: 8px;
width: 240px;

border-radius: 10px;
text-align: justify;
}
.title {
color:#FF9FCC;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;

}
.date {
font-style:italic;
font-size:10px;

margin-bottom:2em;
}




Yang ni paste kat atas code </style>
Purple : Kod main body korang.
Lavender : Kod sidebar korang.
Hijau : Kod tajuk post/sidebar korang.
Light Orange : Kod tarikh korang.
*Boleh edit juga : ) Tapi code text align  tu jangan usik kalau tak tahu basic code ._. Nanti jadi yang pelik-pelik pula .


<table style="line-height: 17px;" width="900"  border="0" align="center" cellspacing="5">
<tbody><tr>
Paste kat bawah code <body> 
Biru : Lebar blog korang +- sidebar.


<td valign="top" width:550px;">
<div class="mainblog">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>
Paste kod ni lepas kod atas tadi.
Pink : Boleh tukar dengan perkataan sendiri.Contoh : Talk(s) blabla(s) dan lain-lain.

 <td valign="top" width="250px">
<div class="sidy">
<div class="title">Tajuk Sidebar</div>
Content</div><br>
Ni kod sidebar korang.Boleh adjust width dia kalau nak.
Hot Pink : Letak tajuk sidebar.Content pula letak je apa-apa yang korang nak dalam sidebar korang macam cbox ke apa-apa jelah ._.


<br><div class="sidebarblog">
<div class="title">Tajuk Sidebar</div>
ISI SIDEBAR</div>
<br><div class="sidebarblog">
<div class="title">Tajuk Sidebar</div>
ISI SIDEBAR</div>
<br>

Kalau nak sidebar banyak-banyak boleh paste kod ni kat bawah kod tadi : D

 </td>
Yang atas ni kod untuk tutup sidebar.


blockquote {
padding-left: 16px;
background:#F2FFFF;
padding-bottom : 7px;
font-family: "Verdana";
font-size:10px;
border-left: 6px solid #F6DCFF;
text-shadow:1px 1px 0px #fff;
color:#9a9a9a; width:448px;
margin-left:10px; padding-right:6px; padding-top:4px;
}
blockquote:hover {
padding-left: 45px;
border-left: 10px #FFC8E4 solid;
background-color:#E1E1E1;
color:#000;
-webkit-transition-duration: 3s;
-moz-transition-duration: 4s;
transition-duration: 2s;
}

 Yang ni kod blockquote.Sila paste atas kod </style>


::-webkit-scrollbar {
height: 12px;
width: 12px;
background-color: #FFFFFF;
 }
::-webkit-scrollbar-thumb {
background-color: #FFFFFF;
-moz-border-radius: 10px;
 border-radius: 10px;
}
 ::-webkit-scrollbar-thumb:hover {
 background-color: #000000;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
Ni pula kod scrollbar.Height,width dan color boleh adjust suka hati korang.

Okay.Ni nak tunjuk screenshot blogskin yang baru aku buat guna kod ni :


Sila ignore yang warna biru tu.Tu sisa web html editor yang aku guna tadi.


Okay bai!Good luck!! : D


Blogger Isabel Diaz said...

Betul ke ada tempahan header percuma? Hihi..

 
Blogger nurhamiza shuhada said...

@Isabel Diaz Betul :)

 
Blogger Nurain Nisha said...

kalau nak header percuma gak boleeh ka?

 

Post a Comment