colourful -tuto+stuff-: : Tutorial Make Your Own Clasic Template or Blogskin !

\\Bismillahirrahmanirrahim// Assalamualaikum
hari ini nak ajar macam mana nak buat template blogskin sendiri ,
Tuto nie saya dapat daripada adik kita, Nurin Asyada.... so,a big clap to her
BUT

INI HANYA ASAS YANG PERLU ADA DALAM BLOGSKIN , HARAP MAKLUM

KALAU NAK IKUT TUTO INI , SILA ADJUST DI NOTEPAD DAN PREVIEW DULU

TUTO NI BELUM JADI BLOGSKIN 100 %

HARAP MAKLUM

1) Bagi sesiapa yg belum ubah template denim, simple dll, korang kene pegi ke Dashboard >> Edit HTML >> Click Revert To Classic Template.

2) Nanti die akn jadi mcm kat bwh ni :

3) Korang right click, select all lpastuh delete semua code yg ada kat dlm kotak tuh. Jgn ada satu code langsung!

4) Copy code kat bwh ni dan pastekan di bahagian atas skali :

<html>
<head>
<link href='URL Gambar' rel='shortcut icon' type='image/gif'/>
<title>Title blog</title>

Ungu : Url Gmbr utk Favicon
Hijau : Tajuk blog korang

5) Copy code bwh ni and pastekan di BAWAH coding tadi :

<style type="text/css">
#navbar-iframe {display: none;}body {
background:url(URL Bckground);
font-family: verdana, tahoma, sans-serif;
font-size:11px;
background-attachment:fixed;
cursor: url(URL Cursor), auto;
}
a:link, a:visited {
color:#999999;
text-decoration:none;
cursor: url( URL Cursor), auto;
}
a:hover {
color: #dddddd;
border-bottom:1px solid #FFD0E5;
text-decoration:none;
cursor: url(URL Cursor), auto;
}

Biru : Code buang navbar^^
Coklat : URL background blog korang
Merah : URL cursor korang
Hijau : Warna link korang

6) Korang copy code bwh ni & pastekan dekat BAWAH code tadi :

.blog {background:#ffffff;color:#666666;font-size: 11px;padding:14px;width:600px;border-radius:10px;text-align:justify;}.sidebar {background: #ffffff;color: #666666;font-size: 11px;padding: 8px;width: 230px;border-radius: 10px;text-align: justify;}.first-title {color:#555555;font-size:14px;padding:3px;border-bottom:1px dashed #999999;text-align: right;}.second-title {color: #696969;font-style:italic;font-size:10px;margin-bottom:2em;}

7) Copy code kat bwh ni dan pastekan di BAWAH code yg tadi :

a.navi {
letter-spacing: 1px;
}
a.navi:hover {
color: #dddddd;
}

Ini adalah coding utk Navigation korang :) korang ubahlah ape2 yg patut ikut citarasa sendiri ^^
8) Korang copy & pastekan dekat BAWAH code tadi, korang continue je :

</style><body oncontextmenu='return false;'><br><center><img border="0" src="URL Header" /></center><table style="line-height: 17px;" width="800" border="0" align="center" cellspacing="5"><tbody><tr><td valign="top" style="width:600px; padding:10px; border-radius:10px; background:#ffffff; font-size:11px;"><div id="blog"><blogger><div class="first-title"><BlogItemTitle><$BlogItemTitlegt;</BlogItemTitle></div><div class="second-title"><BlogDateHeader><$BlogDateHeaderDategt;</BlogDateHeader> | <$BlogItemDateTimegt; | <a href="<$BlogItemCommentCreategt;"<$BlogItemCommentFormOnClickgt;><$BlogItemCommentCountgt; Notes</a></BlogItemCommentsEnabled></div><$blogitembodygt;</blogger><br><center><OlderPosts><a href=<$OlderPostsgt;>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPostsgt;>Newer Post</a></NewerPosts></center></div></div></td>

Biru : Code disable right click
Coklat : URL header blog korang
Ungu : Width pages dgn sidebar

9) Code kat bwh ni ialah code sidebar korang ^^ Copy dan pastekan dekat BAWAH code tadi :

<td valign="top" width="230px"><div style='display:scroll; position:fixed;'><div class="sidebar"><div class="first-title">Your Title!</div><br><img src="URL Icon"> <a class="navi" onClick="document.getElementById('blog').innerHTML=document.getElementById('author').innerHTML">The Webmiss</a><br><img src="URL Icon"> <a class="navi" onClick="document.getElementById('blog').innerHTML=document.getElementById('links').innerHTML">Taggie & Linkies</a><br><img src="URL Icon"> <a class="navi" onClick="document.getElementById('blog').innerHTML=document.getElementById('post').innerHTML">Homepage</a><br></div><br></td>

10) Copy code ni dan pastekan di bawah code </td> yg di-Birukan :)

<div id="author" style="display:none;"><div class="first-title">The Webmiss</div><br>Hello Stalker! My Name Is Nurin Asyada, I'm this template designer or owner. Write your biography here ^^V</div><div id="links" style="display:none;"><div class="first-title">The Buddyz</div><br><center><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></center><br><div class="first-title">Creditos</div><br>- Template By : <a href="blogger.com"/>Friends</a> <a href="blogger.com"/>Friends</a><br>- Background : <a href="blogger.com"/>Friends</a><br>- Icon : <a href="blogger.com"/>Friends</a></div><div id="post" style="display:none;"><blogger><div class="first-title"><BlogItemTitle><$BlogItemTitlegt;</BlogItemTitle></div><div class="second-title"><BlogDateHeader><$BlogDateHeaderDategt;</BlogDateHeader> | <$BlogItemDateTimegt; | <a href="<$BlogItemCommentCreategt;"<$BlogItemCommentFormOnClickgt;><$BlogItemCommentCountgt; comments</a></BlogItemCommentsEnabled></div><$blogitembodygt;</blogger><br><center><OlderPosts><a href=<$OlderPostsgt;>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPostsgt;>Newer Post</a></NewerPosts></center></div>

11) Copy code ni dan pastekan di bahagian bwh skali :

</table>
</body>
</head>
</html>

alright,done...da siap akhirnya.....#ho.ho.ho

korang kena sabar sikit tau dalam buat blogskin nie sebab dia rumit sikit...

so,pape pun gud luck to you all's semua yang nak buat blogskin sendiri

wassalam.....

colourful -tuto+stuff-

Thursday, June 14, 2012

: Tutorial Make Your Own Clasic Template or Blogskin !

5 comments: