How To Create Own Blogskin

Assalamualaikummm..

Hari neh saya nak ajar nak buat blogskin sendiri. Means, template sendiri. Simple template.
Sebelum tu, saya nak credit *sini*.. Sebab reti main coding neh disebabkan blog dia. :)

First, bukak template blog anda. Pastikan sudah revert to classic template.
Second, kosongkan coding2 yang ada. Kalau ada yang penting, simpan kat lain terlebih dahulu.

Jom start!

Copy benda alah bawah neh.

<html><head><title>YOUR TITLE</title>

Yang warna merah tu, title blog korang. Kalau nak letak butang follow, korang boleh letak selepas <title> atau selepas <html> .. Saya biasanya letak bawah <html> .. Huhu..

contoh:

<html>
<a style="display:scroll;position:fixed;top:15px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" title="Follow"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a><a style="display:scroll;position:fixed;top:15px;left:75px;" href="http://www.blogger.com/home" title="Dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?468" /></a>
<head><title>YOUR TITLE</title>

Oren tu, letak blog ID korang..

okeyh, sambung lagi.. lepas title, korang letak benda alah bawah neh.

<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:url( URL GAMBAR);
font-family: arial;
font-size:11px;
color: #555555;
background-attachment:fixed;
cursor:url(URL CURSOR),auto;
}
a:link, a:visited {
color: #d1d1d1;
text-decoration:none;
}
a:hover {
cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;
color: #f2a3a3;
border-bottom: 1px dashed #eee;
}
::-webkit-scrollbar {width: 7px;height: 7px;}::-webkit-scrollbar-track-piece {background-color: #eee;border: 3px solid #fff;}::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {background-color: #FC92BD;border: 1px solid #fff;}blockquote {border-left: 10px solid #FFDFDF; padding: 7px; }blockquote:hover {border-left: 10px solid #FFAFAF;}</style>

URL GAMBAR boleh ambek sini..

http://i1185.photobucket.com/albums/z344/kusyi03/daun2.png

URL CURSOR

http://cur.cursors-4u.net/nature/nat-10/nat985.cur

Yang kaler biru tu, scrollbar blog anda. Kalau pengguna Google Chrome je boleh nampak.
Kaler merah tu, warna link korang..
Lepas tu, blockquote tu, korang boleh ekjaz sendiri.. Huhu..

Sekarang nak masuk part susah sikit. Sikit je.. Huhu..

Perhatikan betul2 coding di bawah.

<body><br><center><img border="0" src="URLHEADER" /></center>

Paste dekat bawah </style> .. Lepas korang letak url header..CUba preview.. Lawa x?? Hoho..

Lepas tu, copy ini pulak.

.page {
position: absolute;
top: 100px; left: 30px;
background:#fff;
width:510px;
padding-left:5px;
border-radius:5px;
border: 1px solid #FCBDD7;
}
.side{
position:absolute;
top: 100px; left: 560px;
background:#fff;
width:250px;
padding-left:5px;
border-radius:5px;
border: 1px solid #FCBDD7;
}

Paste ATAS </style>

Jangan preview lagi. Sebab takleh lagi..Haha..

Copy tulisan untuk pulak!

.title {
font-family: Century Gothic;
margin-bottom:2px;
text-align: center;
color:#d1d1d1;
font-size:20px;
padding:3px;
padding-bottom:5px;
letter-spacing: -1px;
border-bottom: 1px solid #EEEEEE;
width:500px;
}
.title2 {
font-family: arial;
text-align: center;
letter-spacing: -1px;
color:#d1d1d1;
font-size:18px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
border-right: double #F792BB;
border-left: double #F792BB;
margin-top:2px;
width:240px;
}
.comment {
text-align: left;
color: #525252;
font-size:10px;
margin-top:.5em;
margin-right:2em;
margin-bottom:2em;
}

Paste ATAS </style> jugak.

Untuk bold,italic dan underlined pulak.

i {
color: #888;
}
u {
text-decoration:none;
border-bottom:2px solid #FFC9DF;
}
u:hover {
text-decoration:none;
border-bottom: 2px dotted #FFC9DF;
}
b { color:#FFC9DF;}

Paste ATAS </style>

Untuk navigation.. Amek benda alah bawah neh.

.navi span {
cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;
}

Paste ATAS </style> jugak.

Okeyh dah cukup! Dah selesai one step. Sekarang amek coding untuk bawah </style> pulak.. Hoho..

<div class="page">
<td valign="top" style="width:550px;">
<div id="pages" style="line-height:16px">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle> </div>
<div class="comment"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>, <$BlogItemDateTime$> , <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$>
<br><iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true"></iframe>
</blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>><img src="http://www5e.biglobe.ne.jp/~cep/s/mm/nbp2.gif"></a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>><img src="http://www5e.biglobe.ne.jp/~cep/s/mm/nnp2.gif"></a></NewerPosts></center><br>
</div></div>

Itu untuk blog anda. Isi-isi dia semua tu lah.
Paste BAWAH </style>!

Amek ini pulak.

<div class="side">
<td valign="top" style="width:550px;">
<div class="title2">Anyeong!</div><br>
<img src="http://data.whicdn.com/images/20022725/tumblr_lw7e19lY5B1qi34j6o1_1280_large.png"style=width="200px" height="180px"><br>
<br>
Welcome to my cutest blog! My name is _____. <br>
wanna know more??
<a class="navi" onClick="document.getElementById('pages').innerHTML=document.getElementById('about').innerHTML">click here</a>

itu untuk sidebar. paste bawah coding sebelum tadi.

Okayh! Amek semua bawah neh!

<center><object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/dHsecUaCBSM?&amp%3B&color1=0xffffff&color2=0xffffff&autoplay=1&loop=1&autoplay=1&loop=1&amp%3Bhl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/dHsecUaCBSM?&%3B&color1=0xffffff&color2=0xffffff&autoplay=1&loop=1&autoplay=1&loop=1&%3Bhl=en_US" type="application/x-shockwave-flash" width="200" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></object></center><br><br>
<div class="title2">Tagboard!</div><br>
<img src="http://data.whicdn.com/images/20108294/tumblr_lwud7x16pY1qcat8ho1_500_large.jpg"style=width="200px" height="180px"><br>
put your cbox here. let it width 180px for better looking. Okeyh? <br><br>
<div class="title2">Credit</div>
<!---DON'T TOUCH OR REMOVE CREDIT OR YOU ARE IS A STUPID ONE---!>
Layout by <a href="http://khusyee03.blogspot.com/">kusyi</a><a href="http://www.blogskins.com/me/kusyi03">03</a>.<br>
Materials <a href="http://aqupunyekesahbukankau.blogspot.com/">♥</a> <a href="http://weheartit.com/kusyi03/">♥</a>.<br><br>
<!---DON'T TOUCH OR REMOVE CREDIT OR YOU ARE IS A STUPID ONE---!>
</div>
<div id="about" style="display: none;">
<div class="title">It is me! </div>
<a class="navi" onClick="document.getElementById('pages').innerHTML=document.getElementById('post').innerHTML">-back to post?</a><br>
<br>
<center><img src="http://data.whicdn.com/images/21486966/tumblr_ly4tsfYzrW1r364oio1_500_large.jpg"style=width="400px" height="310px"><br>
<u> Anyeong Haseyo!!!</u> </center><br><br>
<b>Name:</b> Let it be kusyi.<br>
<b>Famous as:</b> kusyi03.<br>
<b>Birthday:</b> 16 March 1995.<br>
<b>Age:</b> 17 years old.<br>
<b>Stay at:</b> Home vs Hostel!.<br>
<b>Dreams:</b> Wanna be a <u>Surgeon</u>.<br><br>
<b>School:</b> STePS.<br>
<b>BFF:</b> All person who know my story.<br><br>
<b>Likes:</b><br>
- Make a new friendship<br>
- Blogging.<br>
- Spend time at <b>BIOLOGY!</b><br>
- Shila Amzah, Sharnaaz Ahmad, Fizo Omar<br>
- Joseph Kalang Tie, KAKA, LinDan<br>
- Sailormoon, Shinichi Kudo, Doraemon, Shin Chan<br>
- Blue+White<br>
- Reading. Ngee<br>
<br>
<b>Hates:</b><br>
- Anons, Haters, Copypasters<br>
- Liar<br>
- Slow internet connection<br>
- Hypocrite Person!<br>
- Messy blog<br><br>
</div>
<div id="post" style="display: none;">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle> </div>
<div class="comment"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>, <$BlogItemDateTime$> , <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$>
<br><iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true"></iframe>
</blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>><img src="http://www5e.biglobe.ne.jp/~cep/s/mm/nbp2.gif"></a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>><img src="http://www5e.biglobe.ne.jp/~cep/s/mm/nnp2.gif"></a></NewerPosts></center><br>
</div>
</body>
</head>
</html>

Warna biru coding untuk kotak muzik.
Warna oren, biodata anda.
Warna merah! Haha.. Jangan buang yaw.. Letih saya buat tuh!
Cuba preview.. Jadi x??
Kalau jadi. SAVE.

Nota:: Kalau nak letak sebarang gambar amek coding neh

<img src="URL GAMBAR"style=width="50px" height="50px">

-warna pink- saiz gambar.

Kalau nak letak iklan..Buat title baru.

<div class="title2">TAJUK</div>
blablabla(isi coding anda)

*paste di atas <div class="title2">Credit</div>

Okeylah..kalau guna tuto neh, komen. Kalau tak guna, takyah komen. Kalau ada masalah, komen. Kalau takde masalah, takyah komen. Perghhh..Letih mak~

Daa..

Salam.. *hari neh birthday saya! lalala..