) AYEMRAWI;
HOME ABOUT CATEGORY ARCHIVE
Follow

Tutorial : Template Like Me


Assalamualaikum

Last post for this year maybe (?) Okay, tutorial ini takde siapa request pun. Saja gatal nak buat. Okaylah, apa tu 'template like me' ? Disebabkan aku mungkin tak kekal pakai design macam ni, aku sketch untuk korang. Aku pakai kod table. Senang kerja.
First, mesti dah revert to classic template dulu. Jangan lupa savecopy code template lama kat Notepad. Takut nanti nak dah jemu dengan template ni, nak pakai balik template lama. 

Pergi Template. Kosongkan content dia. 

Pastekan kod bawah. Ni kod title blog.
<html>
<head><title> TITLE BLOG </title>
Ni basic code yang mesti ada.
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:grey;
font-family: trebuchet ms;
background-attachment:fixed;
font-size: 11px;
line-height:160%;
letter-spacing: 1px;
cursor: crosshair, progress;
color: #666;
text-align: justify;
}
a{
 color: red;
 text-decoration: none;
 }
a:link, a:visited {
-webkit-transition-duration: 0.5s;
text-decoration:none;
color:blue;
}
a:hover {
-webkit-transition-duration: 0.5s;
color:white;
background:black;
}
b,strong {
text-decoration:none;
color: #000000;
}
i {
color:#7F7F7F;
}
u {
text-decoration:none;
border-bottom:1px solid #D8D8D8;
}
s {
color:#A4A4A4;
}
ul{
list-style-type:katakana-iroha;
}
.blogger-labels {
padding-top: 7px;
padding-left:5px;
font-family: georgia;
font-size: 11px;
font-style:italic;
color: black;
text-align: left;
border-top: 1px solid #eee;
}
blockquote {
background:white;
color:#2E2E2E;
border-left:10px solid red;
padding: 10px;-webkit-transition-duration: 0.5s;
}
::-webkit-scrollbar {
background: #FFF;
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #efefef;
width: 5px;
}
table {
background: #FFF;
font-size: 11px !important;
font-family: trebuchet ms !important;
color: #595959;
letter-spacing: 1px;
}
</style>
</head>
Ni kod untuk post title, sidebar title, etc. Pastekan sebelum </style>
.h1 {
font-family:Georgia;
font-size:15px;
letter-spacing: 1px;
line-height:3px;
color : #000000;
 text-align: center;
 text-transform: normal;
 border-bottom:1px dashed #2E64FE;
 }
 .h2 {
 font-family: Georgia;
 font-size:12px;
 letter-spacing: 1px;
line-height:3px;
 color: #000000;
 text-align: center;
 text-transform: normal;
 border-bottom:1px dashed #2E64FE;
 }
 .h3 {
 font-family: Century Gothic;
 font-size: 2pt;
 text-transform: normal;
 text-align: right;
 }
Ni kod untuk post and sidebar. Pastekan sebelum </style>
.entry {
width: 630px;
background: #FFF;
padding: 20px;
text-align: justify;
}
.entry img {
max-width: 600px;
max-height: auto;
}
.side {
width: 250px;
padding: 20px;
text-align: justify;
}

Ni kod table. Pastekan lepas </head>
<center><table width="980px" style="height: 100%;" cellpadding="0" cellspacing="0" border="0">

HEADER PART
<tr><td colspan="2" style="height: 199px; background: #FFF;">
<!-- Header Image --><br>
<center><img style="width:800px;" src="URL IMG HEADER"></center>
</td></tr>
POSTS PART
<tr>
<td class="entry" valign="top"><center>
<br><blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h3"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> @ <$BlogItemDateTime$></div>
<$BlogItemBody$></br></blogger>
<!-- Don't remove the line breaks 'br' tag -->
<br><br><center>
<div style="float: left;"><a href=<$OlderPosts$>>← older posts</a> </div>
<div style="float: right;">
<a href=<$NewerPosts$>> newer posts →</a></div><br><br>
</td>
SIDEBAR PART
<td class="side" valign="top"><br>
<div class="h2">SIDEBAR TITLE</div><br>CONTENT</div>
<div class="h2">SIDEBAR TITLE</div><br>CONTENT</div>
</td></tr>
FOOTER PART
<th colspan="2"><br>
CREDITS CODE MAYBE</th>
</table>

Siap. Aku buat cincai je sebab malas nak buat step by step. Kalau korang pening. Ambil je freebies kat bawah. Jangan buang credits.

<html>
<head>
<title> FRANKLIN BROOKE</title>
<link rel="shortcut icon" href="http://applepine.chu.jp/icon/sen/totori6.gif">

<style type="text/css">

#navbar-iframe {
display: none;
}

@font-face {
font-family:tinytots;
src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf')
}

body {
background:url(http://subtlepatterns.com/patterns/light_wool.png);
cursor: url(http://i.imgur.com/uCuhe.png), progress;
font-family: georgia;
font-size: 11px;
color:#513200;
line-height: 16px;
text-align: justify;
}

a {color: #76B8A6; text-decoration: none; -webkit-transition: 0.5s;}
a:hover {color: #000; cursor: url(http://i.imgur.com/uCuhe.png), progress; -webkit-transition: 0.5s;}
blockquote {border-left: 12px solid #76B8A6; padding: 5px; -webkit-transition: 0.5s;}
blockquote:hover {border-left: 12px solid #980002; -webkit-transition: 0.5s;}
a:link, a:visited {
font-style: normal;
color: #81BEF7;
text-decoration: none;
-webkit-transition-duration: 0.5s;}

.blogger-labels {
padding-top: 7px;
padding-left:5px;
font-family: georgia;
font-size: 11px;
font-style:italic;
color: black;
text-align: left;
border-top: 1px solid #eee;
}

.tr-caption {
font:8px tinytots;
background:white;
color:black;
text-transform:uppercase;
padding:1 2px;
}

.entry {
width: 630px;
background: #FFF;
padding: 20px;
text-align: justify;
}

.entry img {
max-width: 600px;
max-height: auto;
}

.side {
width: 250px;
padding: 20px;
text-align: justify;
}

.h1 {margin-top:4px; text-align:left; color:grey; font-family:georgia; letter-spacing:1px; font-size:20px; padding:5px; margin-bottom:-10px;}
.h2 {font-family: tinytots; background-color:#f9f9f9; letter-spacing: 2.5px; color: #B1B1B1; text-transform: uppercase; font-size: 8px; text-align: right; padding:3px; margin:7px;}
.h3 {margin-top:4px; text-align:left; color:grey; font-family:consolas; letter-spacing:1px; font-size:14px; margin-bottom:3px; border-bottom: 1px solid #efefef; text-transform:uppercase; }


::-webkit-scrollbar {background: #f8f8f8; width: 7px;}
::-webkit-scrollbar-thumb {background: #76B8A6; width: 12px;}
u {text-decoration: none; border-bottom: 1px solid #980002;}

a.box{
background: #f5f5f5;
font: normal 11px consolas;
color: #858585;
display: inline-block;
letter-spacing: 1px;
padding: 4px 9px;
text-transform: uppercase;
-webkit-transition-duration: 0.5s;
border: 1px solid #f5f5f5;
}

a.box:hover{
background: #fff;
-webkit-transition-duration: 0.5s;
}


.sd {
width: 300px; padding: 8px; background:url(http://25.media.tumblr.com/tumblr_m0g3ybPmqj1r6uwfxo7_250.png); z-index: 100; text-align: justify; border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .10);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .10);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .10);
}

table {
background: #FFF;
font-size: 11px !important;
font-family: georgia !important;
color: #595959;
letter-spacing: 1px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .10);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .10);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .10);
}

::selection {
background: black;
color: white;
}

</style>

<div style="display:scroll; position:absolute; top:10px; left:10px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=<$BLOGID$>" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> </div>

</head>

<center><table width="980px" style="height: 100%;" cellpadding="0" cellspacing="0" border="0">

<tr><td colspan="2" style="height: 199px; background: #FFF;">
<!-- Header Image -->
                        <br>
<center><img style="width:auto;" src="http://2.bp.blogspot.com/-flr-lYsnOsg/UKHdeHYmNeI/AAAAAAAAAro/uJtbitpNkLw/s1600/Untitled-5.png"></center>
</td></tr>
<tr>
<td class="entry" valign="top">

<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> @ <$BlogItemDateTime$></div>
<$BlogItemBody$></br></blogger>
<!-- Don't remove the line breaks 'br' tag -->
<br><br><center>
<div style="float: left;"><a href=<$OlderPosts$>>← older posts</a> </div>
<div style="float: right;">
<a href=<$NewerPosts$>> newer posts →</a></div><br><br>
</td>

<td class="side" valign="top"><center>
<img src="http://4.bp.blogspot.com/-UXbg6moHKHU/TpBfwpVlp5I/AAAAAAAAAX0/-lm17mYWC_8/s1600/vintage+brush.jpg"></center>
<div class="h3">SIDEBAR TITLE</div>
PUT ANYTHING HERE. <br></br>

<div class="h3">SIDEBAR TITLE</div>
PUT ANYTHING HERE. <br><br>

<center><img src="http://1.bp.blogspot.com/-yu8AePqwTVA/TpBhRok_MYI/AAAAAAAAAX4/KRcg6aNokLU/s1600/vintage+brush1.jpg"></center>

</td></tr>
<th colspan="2"><br>
<center>
<span style="font-family:consolas;font-size:11px;">
<!-------DONT REMOVE THIS CREDITS------!>
<a href="http://blogger.com">Blogger</a> hosting. Layout by <a href="http://www.ayemrawi.blogspot.com/">AYEMRAWI</a>. Resources <a href="http://applepine.chu.jp/" title="Favicon">x</a><a href="http://subtlepatterns.com/" title="Background">x</a><a href="http://poppinstuff.blogspot.com/" title="Cursor and Divider">x</a><a href="http://chibipikachu.blogspot.com/" title="Header">x</a>
<!-------DONT REMOVE THIS CREDITS------!></center></span>
</center><br></th>
</table>

p/s : tuto and freebies will be updated nicely soon.






Sunday, December 23, 2012

| ALL RIGHT RESERVED © EST. 2010