My own code.Haram for re-post ! KALAU NAK CARA MUDAH,COPY JE CODE DI NUMBER 9.WELL DONE^^
Assalamualaikum,
First time aku cuba untuk buat tutorial ni.Harap-harap menjadi walaupun agak sukar untuk difahami so aku sarankan sesiapa yang nak belajar ni,concentrate betul-betul.Kalau guna code aku,jangan lupa credit :)
Aku sarankan korang try di blog tester terlebih dulu.Then,kalau menjadi,baru copy paste di blog yang original.
1. Revert to classic template dulu atau boleh rujuk disini.Pastikan tiada apa-apa code di bahagian template tu means bahagian tu kena kosong.
2. Copy code ni dan paste di bahagian paling atas sekali.
<html>
<title> LETAK NAMA BLOG </title>
<center><img src="URL HEADER"/></center>
<head>
- Merah tu gantikan dengan nama blog
- Oren tu ganti dengan url header
3. Letakkan code ni pula di bahagian bawah code yang tadi.
<style type="text/css">
#navbar-iframe {display: none;}
body {
background:url(URL BACKGROUND);
word-wrap: break-word;
text-align: justify;
font-size:10px;
font-family:trebuchet ms;
}
u {
border-bottom: 1px dashed #F5A9BC;
text-decoration:none;
}
a:link, a:visited {
letter-spacing:2px;
color:#000000;
text-decoration:none;
}
a:hover {
color:#eee;
-webkit-transition: 0.8s;
}
</style><body><br>
- Merah tu gantikan dengan url background
- Orange tu adalah jenis font
- Purple tu adalah saiz font
- Biru tu gantikan dengan code colour sendiri
4. Tekan F3 dan cari code </style> dan pastekan code dibawah ni ke atas code </style> (KALAU TAKTAHU CARA GUNA F3,TEKAN SINI)
.entry {
width: 580px;
background: #FFF;
padding: 20px;
text-align: justify;
}
.side {
width: 200px;
padding: 20px;
text-align: justify;
}
table {
background: #FFF;
font-size: 11px !important;
font-family: trebuchet ms !important;
color: #999;
letter-spacing: 1px;
}
@font-face{font-family:porkys;src:url('http://static.tumblr.com/eq1rpir/H0Dm519mi/porkys_.ttf')}
.title {
font-family:'porkys';
font-size:15px;
color:#fff;
padding:4px;
height:7px;
margin-top:10px;
line-height: 100%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjSlYmrCUyfHAb0qY42m311MXQOGsuOM3pGlzxHgacm5t7WXahLqNv7PX0wBRJh_1MlmicNl5PbEWvYLoUZRj47npfMa4lL5TreVJHgC5eY2B2bBZCItXI6bF1NZmVZztqAD3pFncli8/s1600/gray.jpg);
text-align: center;
}
.title-2 {
text-transform: uppercase;
font-size: 6px;
font-family:arial;
letter-spacing: 1px;
color: #000;
margin-bottom: 10px;
border-bottom: 5px double #eee;
}
.side-title {
text-transform: uppercase;
font-size: 11px;
font-family:consolas;
letter-spacing: 1px;
color: #000;
text-align:center;
margin-bottom: 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnHfKuaexXv2np81xIElV41qUckvnpT8itiXTqsEGsqRoYDMRMFO_PDeyGhERbP6124Mf0gGB1laQwBA0JQE_cTYqS9pEbFMu_9D_Lbp5OO17AoUEc1Uxi92HeKItggpIiu4fLZzUeA/s1600/purple1.jpg);
border-bottom: 5px double #eee;
}
- Merah tu boleh ubah mengikut saiz post yang bersesuaian
- Orange tu adalah jenis font
- Purple tu adalah warna font
- Biru tu boleh ubah mengikut saiz sidebar yang bersesuaian
- Hijau tu boleh gantikan dengan url background untuk post title dan sidebar title
5. Tekan F3 dan search code <body> dan pastekan code ni ke bawah code <body>
<table style="line-height: 17px;" width="850" border="0" align="center" cellspacing="5">
<tbody><tr>
- Biru tu boleh ubah mengikut saiz body blog yang bersesuaian
Then,letakkan code ni dibawah code tadi.
<td class="entry" valign="top">
<blogger>
<div class="title"><BlogItemTitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
</BlogItemTitle></div><br>
<div id="title-2"> posted on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
</blogger>
<br><br><center>
<OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div></div>
</center></td> <!-- Sidebar -->
- Merah tu jangan gantikan dengan apa apa dan jangan delete !
6. Then,letakkan code ni dibawah code <!-- Sidebar -->
<td class="side" valign="top">
<div class="side-title">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
</td>
- Merah tu jangan gantikan dengan apa apa dan jangan delete !
- Biru tu gantikan dengan tajuk sidebar
- Purple tu letaklah apa apa isi untuk sidebar
7. Letak code ni di bahagian last sekali.Maksudnya,di bahagian paling bawah.
</table></body></head></html>
8. Okay,semuanya dah siap dan try preview.Kalau menjadi,bolehla save.
9. So code korang akan jadi macam dibawah :
<html>
<title> LETAK NAMA BLOG </title>
<center><img src=" URL HEADER"/></center>
<head>
<style type="text/css">
#navbar-iframe {display: none;}
body {
background:url(URL BACKGROUND);
word-wrap: break-word;
text-align: justify;
font-size:10px;
font-family:trebuchet ms;
}
u {
border-bottom: 1px dashed #F5A9BC;
text-decoration:none;
}
a:link, a:visited {
letter-spacing:2px;
color:#000000;
text-decoration:none;
}
a:hover {
color:#eee;
-webkit-transition: 0.8s;
}
.entry {
width: 580px;
background: #FFF;
padding: 20px;
text-align: justify;
}
.side {
width: 200px;
padding: 20px;
text-align: justify;
}
table {
background: #FFF;
font-size: 11px !important;
font-family: trebuchet ms !important;
color: #999;
letter-spacing: 1px;
}
@font-face{font-family:porkys;src:url('http://static.tumblr.com/eq1rpir/H0Dm519mi/porkys_.ttf')}
.title {
font-family:'porkys';
font-size:15px;
color:#fff;
padding:4px;
height:7px;
margin-top:10px;
line-height: 100%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjSlYmrCUyfHAb0qY42m311MXQOGsuOM3pGlzxHgacm5t7WXahLqNv7PX0wBRJh_1MlmicNl5PbEWvYLoUZRj47npfMa4lL5TreVJHgC5eY2B2bBZCItXI6bF1NZmVZztqAD3pFncli8/s1600/gray.jpg);
text-align: center;
}
.title-2 {
text-transform: uppercase;
font-size: 6px;
font-family:arial;
letter-spacing: 1px;
color: #000;
margin-bottom: 10px;
border-bottom: 5px double #eee;
}
.side-title {
text-transform: uppercase;
font-size: 11px;
font-family:consolas;
letter-spacing: 1px;
color: #000;
text-align:center;
margin-bottom: 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnHfKuaexXv2np81xIElV41qUckvnpT8itiXTqsEGsqRoYDMRMFO_PDeyGhERbP6124Mf0gGB1laQwBA0JQE_cTYqS9pEbFMu_9D_Lbp5OO17AoUEc1Uxi92HeKItggpIiu4fLZzUeA/s1600/purple1.jpg);
border-bottom: 5px double #eee;
}
</style><body>
<table style="line-height: 17px;" width="850" border="0" align="center" cellspacing="5">
<tbody><tr>
<td class="entry" valign="top">
<blogger>
<div class="title"><BlogItemTitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
</BlogItemTitle></div>
<br>
<div class="title-2"> posted on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
</blogger>
<br><br><center>
<OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div></div>
</center></td> <!-- Sidebar -->
<td class="side" valign="top">
<div class="side-title ">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title ">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title ">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
</td>
<br>
</table></body></head></html>
Kalau nak yang ada navigation punya,tunggu aku update 'How to create two column skin / blogskin' versi kedua okay :)
ps : Kalau tak faham,tanya aku dekat facebook okay^^
  |
Thankyou for visiting.
I make some blog tutorial here & I hope you like it.
*No repost (just backlink if you want to share)
*All tutors are mine unless stated
|
My own code.Haram for re-post ! KALAU NAK CARA MUDAH,COPY JE CODE DI NUMBER 9.WELL DONE^^
Assalamualaikum,
First time aku cuba untuk buat tutorial ni.Harap-harap menjadi walaupun agak sukar untuk difahami so aku sarankan sesiapa yang nak belajar ni, concentrate betul-betul. Kalau guna code aku,jangan lupa credit :)
Aku sarankan korang try di blog tester terlebih dulu.Then,kalau menjadi,baru copy paste di blog yang original.
1. Revert to classic template dulu atau boleh rujuk disini.Pastikan tiada apa-apa code di bahagian template tu means bahagian tu kena kosong.
2. Copy code ni dan paste di bahagian paling atas sekali.
<html>
<title> LETAK NAMA BLOG </title>
<center><img src="URL HEADER"/></center>
<head>
- Merah tu gantikan dengan nama blog
- Oren tu ganti dengan url header
3. Letakkan code ni pula di bahagian bawah code yang tadi.
<style type="text/css">
#navbar-iframe {display: none;}
body {
background:url(URL BACKGROUND);
word-wrap: break-word;
text-align: justify;
font-size:10px;
font-family:trebuchet ms;
}
u {
border-bottom: 1px dashed #F5A9BC;
text-decoration:none;
}
a:link, a:visited {
letter-spacing:2px;
color:#000000;
text-decoration:none;
}
a:hover {
color:#eee;
-webkit-transition: 0.8s;
}
</style><body><br>
- Merah tu gantikan dengan url background
- Orange tu adalah jenis font
- Purple tu adalah saiz font
- Biru tu gantikan dengan code colour sendiri
4. Tekan F3 dan cari code </style> dan pastekan code dibawah ni ke atas code </style> (KALAU TAKTAHU CARA GUNA F3,TEKAN SINI)
.entry {
width: 580px;
background: #FFF;
padding: 20px;
text-align: justify;
}
.side {
width: 200px;
padding: 20px;
text-align: justify;
}
table {
background: #FFF;
font-size: 11px !important;
font-family: trebuchet ms !important;
color: #999;
letter-spacing: 1px;
}
@font-face{font-family:porkys;src:url('http://static.tumblr.com/eq1rpir/H0Dm519mi/porkys_.ttf')}
.title {
font-family:'porkys';
font-size:15px;
color:#fff;
padding:4px;
height:7px;
margin-top:10px;
line-height: 100%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjSlYmrCUyfHAb0qY42m311MXQOGsuOM3pGlzxHgacm5t7WXahLqNv7PX0wBRJh_1MlmicNl5PbEWvYLoUZRj47npfMa4lL5TreVJHgC5eY2B2bBZCItXI6bF1NZmVZztqAD3pFncli8/s1600/gray.jpg);
text-align: center;
}
.title-2 {
text-transform: uppercase;
font-size: 6px;
font-family:arial;
letter-spacing: 1px;
color: #000;
margin-bottom: 10px;
border-bottom: 5px double #eee;
}
.side-title {
text-transform: uppercase;
font-size: 11px;
font-family:consolas;
letter-spacing: 1px;
color: #000;
text-align:center;
margin-bottom: 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnHfKuaexXv2np81xIElV41qUckvnpT8itiXTqsEGsqRoYDMRMFO_PDeyGhERbP6124Mf0gGB1laQwBA0JQE_cTYqS9pEbFMu_9D_Lbp5OO17AoUEc1Uxi92HeKItggpIiu4fLZzUeA/s1600/purple1.jpg);
border-bottom: 5px double #eee;
}
- Merah tu boleh ubah mengikut saiz post yang bersesuaian
- Orange tu adalah jenis font
- Purple tu adalah warna font
- Biru tu boleh ubah mengikut saiz sidebar yang bersesuaian
- Hijau tu boleh gantikan dengan url background untuk post title dan sidebar title
5. Tekan F3 dan search code <body> dan pastekan code ni ke bawah code <body>
<table style="line-height: 17px;" width="850" border="0" align="center" cellspacing="5">
<tbody><tr>
- Biru tu boleh ubah mengikut saiz body blog yang bersesuaian
Then,letakkan code ni dibawah code tadi.
<td class="entry" valign="top">
<blogger>
<div class="title"><BlogItemTitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
</BlogItemTitle></div><br>
<div id="title-2"> posted on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
</blogger>
<br><br><center>
<OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div></div>
</center></td> <!-- Sidebar -->
- Merah tu jangan gantikan dengan apa apa dan jangan delete !
6. Then,letakkan code ni dibawah code <!-- Sidebar -->
<td class="side" valign="top">
<div class="side-title">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
</td>
- Merah tu jangan gantikan dengan apa apa dan jangan delete !
- Biru tu gantikan dengan tajuk sidebar
- Purple tu letaklah apa apa isi untuk sidebar
7. Letak code ni di bahagian last sekali.Maksudnya,di bahagian paling bawah.
</table></body></head></html>
8. Okay,semuanya dah siap dan try preview.Kalau menjadi,bolehla save.
9. So code korang akan jadi macam dibawah :
<html>
<title> LETAK NAMA BLOG </title>
<center><img src=" URL HEADER"/></center>
<head>
<style type="text/css">
#navbar-iframe {display: none;}
body {
background:url(URL BACKGROUND);
word-wrap: break-word;
text-align: justify;
font-size:10px;
font-family:trebuchet ms;
}
u {
border-bottom: 1px dashed #F5A9BC;
text-decoration:none;
}
a:link, a:visited {
letter-spacing:2px;
color:#000000;
text-decoration:none;
}
a:hover {
color:#eee;
-webkit-transition: 0.8s;
}
.entry {
width: 580px;
background: #FFF;
padding: 20px;
text-align: justify;
}
.side {
width: 200px;
padding: 20px;
text-align: justify;
}
table {
background: #FFF;
font-size: 11px !important;
font-family: trebuchet ms !important;
color: #999;
letter-spacing: 1px;
}
@font-face{font-family:porkys;src:url('http://static.tumblr.com/eq1rpir/H0Dm519mi/porkys_.ttf')}
.title {
font-family:'porkys';
font-size:15px;
color:#fff;
padding:4px;
height:7px;
margin-top:10px;
line-height: 100%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjSlYmrCUyfHAb0qY42m311MXQOGsuOM3pGlzxHgacm5t7WXahLqNv7PX0wBRJh_1MlmicNl5PbEWvYLoUZRj47npfMa4lL5TreVJHgC5eY2B2bBZCItXI6bF1NZmVZztqAD3pFncli8/s1600/gray.jpg);
text-align: center;
}
.title-2 {
text-transform: uppercase;
font-size: 6px;
font-family:arial;
letter-spacing: 1px;
color: #000;
margin-bottom: 10px;
border-bottom: 5px double #eee;
}
.side-title {
text-transform: uppercase;
font-size: 11px;
font-family:consolas;
letter-spacing: 1px;
color: #000;
text-align:center;
margin-bottom: 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnHfKuaexXv2np81xIElV41qUckvnpT8itiXTqsEGsqRoYDMRMFO_PDeyGhERbP6124Mf0gGB1laQwBA0JQE_cTYqS9pEbFMu_9D_Lbp5OO17AoUEc1Uxi92HeKItggpIiu4fLZzUeA/s1600/purple1.jpg);
border-bottom: 5px double #eee;
}
</style><body>
<table style="line-height: 17px;" width="850" border="0" align="center" cellspacing="5">
<tbody><tr>
<td class="entry" valign="top">
<blogger>
<div class="title"><BlogItemTitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
</BlogItemTitle></div>
<br>
<div class="title-2"> posted on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
</blogger>
<br><br><center>
<OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div></div>
</center></td> <!-- Sidebar -->
<td class="side" valign="top">
<div class="side-title ">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title ">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
<div class="side-title ">TAJUK SIDEBAR</div>
ISI SIDEBAR
<br>
</td>
<br>
</table></body></head></html>
Kalau nak yang ada navigation punya,tunggu aku update 'How to create two column skin / blogskin' versi kedua okay :)
ps : Kalau tak faham,tanya aku dekat facebook okay^^
|