The Tutobies
About;
What's Happening?

Liyana Izzati. Fifteen. Seoul. I'm Kpoppers and maybe not forever. All tutorial is here. Multifandom.

Shout here;
Talk to much



Credit;
The Cretive!

© 2013 - Full Template by Arrien Amani and someone help me is Mayra and Inficon . Edit by Liyana Izzati.

Tutorial : Cara Buat Blogskin Sendiri .
Thursday 13 December 2012 | 13 Comments
Tumblr_mehgu01ejy1qerubao1_500_large

Huh . Letih hari ni buat tuto banyak-banyak . Post kali ini , saya nak ajar korang , cara nak buat Blogskin sendiri . Saya tengok , ramai pakai blogskin buat masa ni . Tuto ini khas untuk sesiapa yang senang mencuba buat skin sendiri . P/s tuto ini amat susah di fahami . Tengok dengan teliti . LOL .

1. Revert to CLASSIC TEMPLATE dulu .
2. DELETE semua code2 yang ada di RUANGAN EDIT HTML tu .
3. Dah kosong? Ok now copy code bawah ni , letak atas sekali .
<html>
<head>
<center><img src="URL HEADER" /></center>
<title>BLOG NAME</title>
merah : URL header korang
biru : nama/tajuk blog korang

4. Then copy code bawah ni dan paste DEKAT BAWAH code tadi .
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:url(URL BACKGROUND);
font-family: verdana, tahoma, sans-serif;
background-attachment:fixed;
cursor: url(URL Cursor), auto;
}
a:link, a:visited {
color:#CC99FF;
text-decoration:none;
}
a:hover {
color: #549DF1;
border-bottom:1px solid #FF99D5;
}
</style>
<body oncontextmenu='return false;'>
<br>
merah : URLbackground korang
biru : url cursor korang
hijau : code warna

5. Lepas dah siap , tekan CTRL+F dan code </style>
dan bila dah jumpa , paste kod di bawah ni dekat atas code </style> tu .

.content {
background:#ffffff;
color:#666666;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
.bar {
background: #ffffff;
color: #666666;
font-size: 11px;
padding: 8px;
width: 230px;
border-radius: 10px;
text-align: justify;
}
.main-title {
color:#3BBDEC;
font-size:14px;
padding:3px;
border-bottom:1px solid #999999;
}
.sec-title {
color: #3BBDEC;
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
blockquote {
border: 1px solid #000000;
padding: 2px;
}
merah : warna tulisan
hijau : warna border sideber
oren : warna border blockqoute 

6. Lepas dah siap , CTRL+F dan cari kod <body oncontextmenu='return false;'> 
7. Copy code di bawah ni dan pastekan DI BAWAH code 
<body oncontextmenu='return false;'> tadi .

<table style="line-height: 17px;" width="900"  border="0" align="center" cellspacing="5">
<tbody><tr> 
8. Then , copy code dibawah ni dan pastekan DI BAWAH code tadi .
<td valign="top" style="width:600px; padding:10px; border-radius:10px; background:#ffffff; font-size:11px;"><div id="content"><blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</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>
9. Copy code dekat bawah ni dan pastekan DIBAWAH kod tadi . 
<td valign="top" width="230px"><div class="bar"><div class="main-title">TITLE SIDEBAR</div>ISI SIDEBAR</div><br><div class="bar"><div class="main-title">TITLE SIDEBAR</div>ISI SIDEBAR</div><br><div class="bar"><div class="main-title">TITLE SIDEBAR</div>ISI SIDEBAR</div><br></td>
biru : tajuk sideber cth: about , link , friend 

10. Copy code dekat bawah ni dan pastekan dekat bawah sekali .
</table></body></head></html>
Sekarang . code untuk buat navigate pulak .

1) CTRL+F dan cari kod </style> . Copy code dekat bawah ni dan pastekan DI ATAS kod </style>
a.cute {
background: #FFE2EA;
padding: 2px;
letter-spacing: 2px;
display: inline-block;
width: 190px;
color: #FF789F;
border: 1px #FF789F solid;
}
a.cute:hover {
border: 1px #FF789F solid;
background : #FFE2EA;
color: #FF789F;
}

biru : warna background navigations
hijau : warna tulisan navigations
oren : warna border navigations

2) Ingat tak code </td> Yang step no-9 . Copy kod bawah ni dan pastekan DI ATAS kod </td> tadi 
<div class="bar"><div class="main-title">NAVIGATIONS</div><br><center><a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('me').innerHTML" title="About">About</a><a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('love').innerHTML" title="Linkies">Links</a><a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('you').innerHTML" title="Posts">Entries</a></div><br> 
3) Copy code di bawah dan pastekan DI BAWAH kod tadi . 

<div id="me" style="display:none;"><div class="main-title">The Webmaster</div><br>
Tulislah ape-ape berkenaan diri korang kat sini / Biodata korang</div><div id="love" style="display:none;"><div class="main-title">Affies&Linkies</div><br><a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a></div>
<div id="you" style="display:none;"><blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</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> 
Done . Thanks To Akak Atin sebab Tuto ni . 


PASTFUTURE


Blogger Unknown said...

Alhamdulillah , tuto awak sangat-sangat menjadi, dah merata saya cari tuto yang menjadi nak buat navigate ni, akhirnya jumpa juga. Terima kasih awak .

 
Blogger Unknown said...

thanks you! memang jadi. lawa!

 
Blogger Alin Official said...

Yeay ! menjadi :D thanksyou so much

 
Blogger Iyah said...

Tak jadi :( huwaa ._.

 
Blogger Unknown said...

TQ

 
Blogger Barniyah Ammara said...

Thanks! ^_^

 
Blogger Unknown said...

Menjadi! Thanks yaaa :D

 
Anonymous Anonymous said...

Susah Sangat lah nak buat.

 
Blogger sparkle taeyeon said...

Thank You! Akhirnya menjadi juga.. ^^

 
Blogger Nurul Syahirah said...

jadi laa.. dah merata saya cari.. tuto awak yang paling saya faham.. tq ^^

 
Blogger boss techikk said...

thanks a lot . :)

 
Blogger Unknown said...

tuto ni sgt2 berguna.. thank you~ :D

 
Blogger Dea Amalia said...

tutorial kakak sangat bermanfaat buatku loh kak..makasihh

 

Post a Comment