Sunday, January 6, 2013

Tutorial : Make Your Own Blogskins

309313_508919149130004_1072940350_n_large

Hye, sebenarnya atin ada buat tuto buat blogskin tau . Tapi atin pun pening la tengok korang komen macam-macam alasan korang sampai atin pun dah naik tension dah --; . Sebabkan atin tension sangat Atin akan ajar korang yang cara ke-3 punya.. Atin dh x boleh nak terangkan sebab masalah korang adalah bahagian NAVIGATE je .codenya sama ja, korang je tak pandai nak ubah. dah ada bahagian tuto tak nak try --. . jadi yang untuk kali ke-3 ni maybe dapat lah bantu korang ye. sebab Atin terus taruk anything dah dalam tu.Atin terpaksa buang ke dua dua tuto ini.



1. Korang tukar dulu ke classic SINI
2. Buka notepad  supaya boleh letak code korang
3. Copy yang basic code punya dulu k.

<head>
<center><img class="header" src="PUT URL HEADER" / ></center>
<link rel="shortcut icon" href=" URL FAVICON" />
<title>BLOG TITLE</title>
merah :URL header
oren : URL favicon
biru : tajuk blog

<style type="text/css">
     [CODE PERTAMA]</style>
<body>
     [CODE KEDUA]</body></html></head>

4. Sekarang kita nak masuk dalam code pertama tu
  • ini code navbar *x payah ubah
#navbar-iframe {display: none;
}
  • ini code body
body {
background:url(http://i.imgur.com/P3g5T.png);
font:11px trebuchet ms;
letter-spacing:0px;
color:#6e6e6e;
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto;
}
ungu : URL background
pink : jenis font
kuning : warna font
hijau : URL cursor

  • ini code content
.content {
background:#ffffff;
color:#666666;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
merah : lebar post body

  • ini code link & hover
a:link, a:visited {
color: #000;
text-decoration:none;
-webkit-transition: 1s;
}
a:hover{
color: #aaa;
}
hijau : color font


  • ini code 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;
}
  • ini code title/border sideber 
.sidebar {
background: #ffffff;
color: #666666;
font-size: 11px;
width: 210px;
text-align: trebuchet ms;
}
.tit{
width: 200px;
background-color: #f9f9f9;
padding: 3px;
font: 11px consolas;
text-align:center;
border:1px solid #e9e9e9;
color:#333;
margin-bottom:6px;
letter-spacing:2px;
}


  • ini code title/border post
.h1 {
background-color: #f9f9f9;
padding: 3px;
font: 11px consolas;
text-align:center;
border:1px solid #e9e9e9;
color:#333;
margin-bottom:6px;
letter-spacing:2px;
}
.h2{
letter-spacing: 1px;
font:9px consolas;
text-transform: uppercase;
background-color: #fff;
text-align:left;
padding: 2px;
margin-bottom:5px;
margin-top:6px;
color:#666;
}
  • ini code bold
b {
font-style:bold;
color: #111;
}
  • ini code line
u {
text-decoration: none;
border-radius: 4px;
padding: 3px;
-moz-border-radius: 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px;
padding: 7x 7px 7px 7px;
}
u:hover {
background: #EF88B6;
color: #FFFFFF;
-webkit-transition: 1s;
-moz-border-radius: 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px;
 padding: 7x 7px 7px 7px;
}
  • ini code hignlik
::-moz-selection {
background:#fff;
color:#000;
}
::selection {
background:#fff;
color:#000;
}
ini code navigate
a.nav{
background:#b2edff;
width:50px;
display:inline-block;
text-align:center;
color:#fff;
margin-bottom:1px;
font:8px tt;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #fff;
}
a.nav:hover {
background:#FFffff;
border:1px solid #b2edff;
color:#A2C898;
}
  • ini code untuk exchange link
a.linky {
background: #fff;
letter-spacing:0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin-top:3px;
display:inline-block;
font:8px tinytots;
letter-spacing: 1px;
text-align:center;
width:80px;
color:#999;
padding:7px;
border:1px #e6e6e6 solid;
text-decoration:none;
}


5. Ok code pertama dah selesai. Now untuk code kedua punya

  • ini code bahagian sideber 
<!---------Sidebar Wrapper Code------>
<table style="font-size: 12px; color:grey; line-height: 17px; background:#fff; border: 0px solid #565454; border-radius:0px;" width="850" align="center" border="0" cellspacing="8">
<tbody><tr>

<td valign="top" style="width:240px; padding:2px; border-radius:20px; background: transparent; font-size:11px;">
<br><br>

  • bahagian pengenalan
<div class="sidebar">
<div class="tit">Annyeonghaseyo</div>
<center><img src="
http://data.whicdn.com/images/47528001/309313_508919149130004_1072940350_n_large.png" width="200"  height="160"/><br>
Hye hye hye tell about you<br>
biru : title sideber
hijau : URL image
merah : tulis ape-ape

  • bahagian navigate
<a class="nav" onClick="document.getElementById('content').innerHTML=document.getElementById('post').innerHTML">Refresh</a> 
<a class="nav" onClick="document.getElementById('content').innerHTML=document.getElementById('about').innerHTML">Profile</a>
<a class="nav" onClick="document.getElementById('content').innerHTML=document.getElementById('link').innerHTML">Linkies</a><br>

</div></br>


  • bahagian cbox
<div class="sidebar">
<div class="tit">Tagboard</div>
YOURCBOX CODE</div></br>
  • bahagian credit 
<div class="sidebar">
<div class="tit">Credit</div>
<center>
<a href="http://fatinhalid.blogspot.com/">Atin</a><br>
</div>
</td>
hijau : URL credit
merah : nama  credit


  • ini code bahagian post
<!---------Main Wrapper Code------>
<td valign="top" style="background: #fff; width:700px; height: 385px; padding-left:2px; padding-right:11px; padding-left:2px;">
<br><br>

<!----post title code-----!>
<div id="content">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>

<!----code untuk date-----!>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Ask</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br>
</blogger>

<!----older/newer post code-----!>
<div style="float:left"><a class="post" href="<$NewerPosts$>" target="_blank">&larr; <c>NEWER</c></a></div><div style="float:right"><a class="post" href="<$OlderPosts$>" target="_blank"><c>PAST</c> &rarr;</a></div><br><br>
</div>

<!----CODE TITLE PAGE BILA CLICK NAV-----!>
<div id="about" style="display:none;">
<div class="h1"><span class="Apple-style-span" style="color: #FFADAD;"> ★ </span> Super Women</div><br>
<center><img src="http://data.whicdn.com/images/47990700/tumblr_mfo210Gsqa1s08g9qo1_500_large.png" width="400" /></center>
Who I am? I am a little girl who is still studying in secondary school. bla bla bla bla
<br><br>
</div>

<!----code bahagian exc link-----!>
<div id="link" style="display:none;">
<div class="h1"> exc link</div><br>
<center><img src="http://data.whicdn.com/images/47528001/309313_508919149130004_1072940350_n_large.png" width="400" /><br>
<center><a class="linky " href="http://fatinhalid.blogspot.com">AtinVIP</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a>
<a class="linky " href="http:/">Next?</a></center><br>
</center><br>
</div>

<!----post title code-----!>
<div id="post" style="display:none;">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>chingu(s)</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br>
</blogger>

<!----code older.newer-----!>
<div style="float:left"><a class="post" href="<$NewerPosts$>" target="_blank">&larr; <c>NEWER</c></a></div><div style="float:right"><a class="post" href="<$OlderPosts$>" target="_blank"><c>PAST</c> &rarr;</a></div><br><br>

</td></table></style>
<br>

code atas ni korg boleh buat kretiviti korang k



20 comments:

syafiqah nazi said...

assalamualaikum kak fatin knp akak padam code untuk blogskin version 1 & 2 tu..saya lebih suka guna kod tu.

Atin Tory said...

@syafiqah nazi : Waalaikumsalam maaf dear tapi akak terpaksa DELETE jugak , sbb masing comen t benda yg sama . x boleh tahan akak . nk tolong org tu x pndai sgt. so akak tension coment2 semua tu.. bukan ape diorang tu x tau sgt pasal NAVIGATE tu je.diorang x pndai sgt NAv tu je -.- . Akak ah terang tp diorg masih lg komen benda tu jugak.. so mianei mmg akak tetap tutup tuto tu.. ini yang terakhir untuk akak bg.. ko masing2 ckp benda yg sama akak akan diam saja :) ..klo dear dlm situasi akak dear akan terasa mcm akak :(

Najla Najihah said...

Assalamualaikum kak :) Thanks share this tuto.. tuto ni membantu saya sangat untuk buat blogskin. Apepun, nanti saya credit akak ;D Terima kasih!

Nur Farizah said...

Thanks for the tutor!

mimijoe said...

assalamua;aikum k.atin..kalau nk edit code bahagian post tuh macam mana? meaning macm tambah2 sikit ikut kreativiti? and lagi satu,macm mana buat header semua tuh?

Atin Tory said...

@mimijoe : waalaikumsalam. klo bahagian post kmu tukar. body sampailah bahagian blockquote

mimijoe said...

thanks k.atin..mimi boleyh dah buat blogskin sendiri..just x tahu nak buat header sendiri macm mana :'(

Anonymous said...

akak kite nk buat tuto ni bole? kite credit akak ? betul ni

Atin Tory said...

@ Anonymous : boleh :)

Nida Javadd Malik said...

Akak atin, boleh saya ganti credit template by saya dan akak atin jadi big helping?

Atin Tory said...

@Nida Javadd Malik : boleh2 :D

Iesyyaa said...

tkde gna code ap-2 kn ? cma gna code nie je kn ?

_FalFau3 said...

kod kedua ap ?

nurhamiza shuhada said...

thanks sangat sangat untuk tutorial ni. :) Nanti saya credit Atin eh ?

Nabihah Ahmad said...

Thanks for the tuto,.!

Ell Syah said...

Assalamualaikum akak.. Tumpang tanya.. Macam mana nak guna yang code untuk bhg post tu ek?

Shing Blabla said...

hey. thanks taw? lama hanis cari tuto nih. menjadi jugak. hanis guna taw ? hanis credit atin nanti :)

Amirah_Myra said...

Akak! Tuto ni menjadi lh! tq!

Anonymous said...

Assalamualaikum atin. boleh tak kalau hany letak credit template by hany, big help and the awesome tuto by aten ? btw, thanks. Tuto ni njadi sangat menjadi.

Anonymous said...

assalam kak atin. em,, bahagian navigate tu kena paste kat mana ye ?