BEAST: Classic Templates 2 Colums with Pages and FREEBIES

\Bismillahirrahmanirrahim/ Holaaa everyone. Okayy, hari neh Eyra nak buad tutorial Classic Template 2 Columns with Pages. Actually Eyra sendiri baru nak berjinak dalam buad template sendiri neh. Eyra buad template sendiri yang ringkas. Takot jahanam blog korang kalau tersalah letak code. Okayy, let's start.

1. Click Revert To Old Templates dekat bahagian design yang Edit HTML, bawah skali. Ade punye.

2. Bile dah revert tuh, dekat Edit HTML tuh korang kosongkan. Ulang suara, KOSONGKAN tanpa sebarang 1 code pon tau !

3. Letak code bawah neh dekat tempat paling atas dekat Edit HTML yang kosong tadi. Paling atas tau !

<html>
<head>
<center><img src="URL Header korang" /></center>
<title>Title blog</title>

- Warne merah tuh tukar dgn URL Header korang sendiri.
- Warne biru tukar dengan title blog korang. Mcm Jaja punye The Show. So, tulislah The Show.

4. Letak code bawah neh dkt 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>

- Warna merah tukar dgn URL background and URL cursor korang sendiri.
- Warne biru tuh tukar dengan code warne yang korang nak untuk link and hover dy.

5. Tekan CTRL+F and search code : </style> . Pastekan code bawah neh dekat atas code </style> tuh.

.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: #696969;
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
blockquote {
border: 1px solid #000000;
padding: 2px;
}

- Yang warne pink tuh tukar dengan width content and bar korang sendiri.
- Yang warne biru tukar dengan code warne korang sendiri untuk body and sidebar font and untuk warne border blockquote korang.

6. Then korang tekan CTRL+F and search code : <body oncontextmenu='return false;'>. Paste code bawah neh dkt bawah code <body oncontextmenu='return false;'>.

<table style="line-height: 17px;" width="900" border="0" align="center" cellspacing="5">
<tbody><tr>

- Yang warne pink tuh tukar dengan width keseluruhan content and bar korang.

7. Paste code bawah neh dkt bawah code : <tbody><tr>

<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>

8. Copy code bawah neh and paste dkt bawah code 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>

- Yang warne pink tuh tukar dengan width bar korang. Pastikan same mcm yang atas tadi tuh.
- Yang warne biru tuh tukar dengan title sidebar korang lah kan.
- Yang warne oren tuh tukar lah dengan ape yang korang nak tulis kat sidebar tuh.
- Yang warne merah tuh penting. Jangan tukar pape. Dkt bawah nanti adelah function dy ~

9. Copy code bawah neh and paste dkt bawah sekali. Ulang suara, BAWAH sekali tau !

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

Okay untuk buad navigations pulokk. Navigations korang akan muncul kat bahagian sidebar korang. Macam jEyra punye, hehe. Jom buad untuk navigations pulok.

1. Tekan CTRL+F and once again search for : </style> Copy code bawah neh and paste atas </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 #449BE1 solid;
background : #E2F3FF;
color: #449BE1;
}

- Yang warne biru tuh korang boleh tukar dengan code color yang korang nak untuk background navigations, warne font and warne border korang.
- Yang warne purple tuh korang boleh tukar sama ada nak : solid, dashed, dotted.
- Yang warne pink tuh korang boleh tukar dgn width yang korang nak untuk navigations.

2. Copy code bawah neh and paste kan dekat atas code </td> . Yang Jaja merahkan tau. Bukan yang Jaja boldkan. Kan ade dua code mcm tuh. So, yang merahkan tau !!!

<div class="bar">
<div class="main-title">TITLE SIDEBAR</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>

- Yang warne biru tuh tukar lah dengan title sidebar korang.

3. Copy code bawah neh and paste dkt bawah code 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>

4. Kalau korang nak letak ape ape code HTML, macam nak letak follow and dashboard button, korang boleh letak code dy SEBELUM code </html>. Sebelum tau ! Then, preview dulu baru save. Lepastuh, siaplah korang punye template, Happy tak? XD

Sape yang malas nak ikot tutorials neh? Mesti ade yang malas, kan? Sebab tutorials neh agak compicated. Tak gituh? Hehe. Eyra ade buad 2 freebies. Korang boleh amek kalau nak. Tolong lah sesangat jangan remove credit. Eyra penat buadkan untuk korang tau tak. Sape remove, Eyra benci dy. Huh. 2 freebies neh. 1 tema warne dy ialah pink+grey. So, neh sesuai untuk perempuan lah, hehe. Comel gile tau tk. . Yang lagy 1 tema warne dy ialah hitam+biru. Yang neh sesuai untuk umum. Mcm "kel" pon ade. Haha bak kate fynaz ahh XD

Tema pink+kelabu :

<html>
<head>
<center><img src="http://i863.photobucket.com/albums/ab195/shz97/Blog%202/Cookie-Monsterrrr-2.png" /></center>
<title>Cookie Monster</title>

<style type="text/css">
#navbar-iframe {display: none;
}
body {
background:url(http://i863.photobucket.com/albums/ab195/shz97/bg/wood3.png);
font-family: verdana, tahoma, sans-serif;
background-attachment:fixed;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
a:link, a:visited {
color:#FFA8C1;
text-decoration:none;
}
a:hover {
color: #999999;
border-bottom:1px dashed #FF99D5;
-webkit-transition:1s;
}
.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:#FF97B5;
font-size:14px;
padding:3px;
border-bottom:1px dashed #999999;
}
.sec-title {
color: #696969;
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
blockquote {
background: #FFDAE4;
border: 1px solid #FF9BB8;
border-right: 40px solid #FF9BB8;
padding: 2px;
}
blockquote:hover {
background: #E9E9E9;
border: 1px solid #999999;
border-left: 40px solid #999999;
-webkit-transition:1s;
}
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 #999999 solid;
background : #E9E9E9;
color: #999999;
-webkit-transition:1s;
}
u {
text-decoration: none;
background: #FF9BB8;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
}
u:hover {
background: #999999;
color: #FFFFFF;
-webkit-transition: 1s;
}
b {
color: #999999;
}

</style>
<body oncontextmenu='return false;'><br>

<table style="line-height: 17px;" width="900" 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="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>

<td valign="top" width="230px">
<div class="bar">
<div class="main-title">Holaaaaa</div>
<center>Holaa everyone. You've just enter my territory. Muahahahaha, lol. Okayy, write anything here about your blog or about yourself.</center></div>
<br>
<div class="bar">
<div class="main-title">Let's Talk</div>
<center>Put your shoutmix code here. The width must be 200px - 230px only.</center></div>
<br>
<div class="bar">
<div class="main-title">Bias?</div>
<center>You can put anything here. You can put your bias photos or talk bout anything else. Do whatever you want :D</center></div>
<br>
<div class="bar">
<div class="main-title">Credit</div>
<center>Template by : <a href="http://storysayeawakmereka.blogspot.com">Jaja</a><br>
Background by : <a href="http://fivepointsapart.blogspot.com"/>FPA</a></center>
<!----- DON'T YOU EVER REMOVE THE CREDIT IF YOU DON'T WANT TO REGRET LATER -----!></div>
<br>
<div class="bar">
<div class="main-title">Navigations Here</div><br>
<center><a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('want').innerHTML" title="About">About</a>
<a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('some').innerHTML" title="Linkies">Links</a>
<a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('cookies').innerHTML" title="Posts">Entries</a>
</div>
<br>

<div id="want" style="display:none;">
<div class="main-title">The Webmaster</div><br>
<center>Hello, my name is Jaja. I'm the creater of this templates with the help of Sis Nana and Lettha. Okayy, replace all this nonsense that I talk with your about me or biodata.</center>
</div>
<div id="some" style="display:none;">
<div class="main-title">Affies&Linkies</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> | <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></div>

<div id="cookies" 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>

</td>

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

Tema hitam+biru :

<html>
<head>
<center><img src="http://i863.photobucket.com/albums/ab195/shz97/Blog%202/Apple-Crunchyyy.png" /></center>
<title>Apple Crunchy</title>

<style type="text/css">
#navbar-iframe {display: none;
}
body {
background:url(http://i863.photobucket.com/albums/ab195/shz97/bg/black.png);
font-family: verdana, tahoma, sans-serif;
background-attachment:fixed;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
a:link, a:visited {
color:#678DFF;
text-decoration:none;
}
a:hover {
color: #59B5FF;
border-bottom:1px dashed #999999;
-webkit-transition:1s;
}
.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:#84C8FF;
font-size:14px;
padding:3px;
border-bottom:1px dashed #999999;
}
.sec-title {
color: #696969;
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
blockquote {
background: #E0E8FF;
border: 1px solid #678DFF;
border-right: 1px solid #678DFF;
padding: 2px;
}
blockquote:hover {
background: #E0F2FF;
border: 1px solid #59B5FF;
border-left: 20px solid #59B5FF;
border-right: 20px solid #59B5FF;
-webkit-transition:1s;
}
a.cute {
background: #E0E8FF;
padding: 2px;
letter-spacing: 2px;
display: inline-block;
width: 220px;
color: #678DFF;
border: 1px #678DFF solid;
}
a.cute:hover {
border: 1px #59B5FF solid;
border-right: 20px #59B5FF solid;
background : #E0F2FF;
width: 220px;
color: #59B5FF;
-webkit-transition:1s;
}
u {
text-decoration: none;
background: #678DFF;
color: #FFFFFF;
border-radius: 4px;
padding: 3px;
}
u:hover {
background: #59B5FF;
color: #FFFFFF;
-webkit-transition: 1s;
}
b {
color: #59B5FF;
}

</style>
<body oncontextmenu='return false;'><br>

<table style="line-height: 17px;" width="900" 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="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>

<td valign="top" width="230px">
<div class="bar">
<div class="main-title">Holaaaaa</div>
<center>Holaa everyone. You've just enter my territory. Muahahahaha, lol. Okayy, write anything here about your blog or about yourself.</center></div>
<br>
<div class="bar">
<div class="main-title">Let's Talk</div>
<center>Put your shoutmix code here. The width must be 200px - 230px only.</center></div>
<br>
<div class="bar">
<div class="main-title">Bias?</div>
<center>You can put anything here. You can put your bias photos or talk bout anything else. Do whatever you want :D</center></div>
<br>
<div class="bar">
<div class="main-title">Credit</div>
<center>Template by : <a href="http://storysayeawakmereka.blogspot.com">Jaja</a><br>
Background by : <a href="http://fivepointsapart.blogspot.com"/>FPA</a></center>
<!----- DON'T YOU EVER REMOVE THE CREDIT IF YOU DON'T WANT TO REGRET LATER -----!></div>
<br>
<div class="bar">
<div class="main-title">Navigations Here</div><br>
<center><a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('craving').innerHTML" title="About">About</a>
<a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('for').innerHTML" title="Linkies">Links</a>
<a class="cute" onClick="document.getElementById('content').innerHTML=document.getElementById('apples').innerHTML" title="Posts">Entries</a>
</div>
<br>

<div id="craving" style="display:none;">
<div class="main-title">The Webmaster</div><br>
<center>Hello, my name is Jaja. I'm the creater of this templates with the help of Sis Nana and Lettha. Okayy, replace all this nonsense that I talk with your about me or biodata.</center>
</div>
<div id="for" style="display:none;">
<div class="main-title">Affies&Linkies</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> | <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></div>

<div id="apples" 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>

</td>

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

Alhamdulillah dah siap. Goodluck, you all. Tak reti tanye tau ;)

Credit : Ziera

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

BEAST

Classic Templates 2 Colums with Pages and FREEBIES

1 comments:

Menu

Welcome

Contact

Old posts

Thanks to