03.autumn & heart

Follow|Home
16 March 2012 | 1:52 PM | 14 comments
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;amp%3B&amp;color1=0xffffff&amp;color2=0xffffff&amp;autoplay=1&amp;loop=1&amp;autoplay=1&amp;loop=1&amp;amp%3Bhl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/dHsecUaCBSM?&amp;%3B&amp;color1=0xffffff&amp;color2=0xffffff&amp;autoplay=1&amp;loop=1&amp;autoplay=1&amp;loop=1&amp;%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/">&#9829;</a> <a href="http://weheartit.com/kusyi03/">&#9829;</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..

Labels: , ,



14 Comments available :

March 16, 2012 at 8:31 PM
Blogger Mimi said...

usya-2 sikedd. C:
#kalau free, nak gune tuto nie ..
boleh tak?
nyway, p bufday ..
rajen http://nakjadimuslimah.blogspot.com

February 10, 2013 at 10:52 PM
Blogger Yumi Nazu said...

Thanks for the toturial...
Saya guna tutorial nie boleh x untuk blog saya?

February 10, 2013 at 10:56 PM
Blogger kusyi said...

guna lee.. :)

February 10, 2013 at 11:24 PM
Blogger Yumi Nazu said...

Thank ye...

February 15, 2013 at 12:00 PM
Blogger gurdeepfriendz2000 said...

thanks :). kenapa dia menyenget :(

February 15, 2013 at 12:23 PM
Blogger kusyi said...

menyenget gimana tu? :/

June 5, 2013 at 9:12 PM
Blogger Mojat Cerewet said...

kenpa takley highlight ? pleasee balas at my cbox ... tekat nama saya .. klik blog saya yg *all about me // pleasee

December 4, 2013 at 11:49 AM
Blogger ainin sofiya said...

thank you kusyi :)

May 12, 2014 at 4:24 AM
Blogger Vanessa Emanuella said...

Kalo misalnya yang warna merah ada tulisan Re-Edit boleh gak?Tapi ada credit kamu juga

May 14, 2014 at 2:13 AM
Blogger kusyi said...

Its okay. amek je.

May 16, 2014 at 5:09 PM
Blogger Hira Rawr said...

saya guna ye :)

July 29, 2014 at 8:40 PM
Blogger kusyi said...

okay. :*

October 22, 2014 at 9:23 PM
Blogger Addin Syahirah said...

Assalamualaikum.. terima kasih akak. saya dah guna and ia menjadi =)

October 31, 2015 at 5:22 PM
Blogger sofie adie said...

holla....nak guna tuto ni...
thank you!!!
:)

Post a Comment