Blueberry Peanut;

Classic Templates 2 Column with Navigation

POSTED ON 04 January 2012 AT Wednesday, January 04, 2012 \ leave a comment (0)

Hello everyone! Hari ini saya sangat-sangat baik. Saya akan ajar korang satu-persatu macam mana nak buat classic templates 2 column with navigation sendiri. Saya ajar basic saja, nanti korang pandai-pandailah nak cantikkan okay? If korang using code saya make sure korang credit kan saya. Macam ini;

Basecodes by: Zhyzhy Chin.

Ingat! Saya hafal codes saya tau. Korang tak credit saya sumpah blog korang hodoh! Ceh, gurau jek. Hihi. Tapi wajib, mesti credit kan ke nama saya tau, haha. Penat saya buat. Okay, let's start.

<html><head><title>Blog Name</title></head>

- Kaler Merah itu korang tukarlah ikut suka hati korang okay. Itu nama blog. Kalau nak ada header guna code ini.

<html><head><center><img src="URL Header" /></center><title>Blog Name</title>

Kemudian, paste kan code ini di bawah code di atas.

<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url (URL Background);
font-family: Trebuchet MS;
background-attachment:fixed;
cursor: url (URL Cursor), auto;
}
a:link, a:visited {
color: #E76E7C;
Cursor: url (URL Cursor), auto;
text-decoration:none;
}
a:hover {
Cursor: url (URL Cursor), auto;
color:#F4F800;
}
</style>
<body oncontextmenu='return false;'><br>

- Kaler Merah macam biasa, amek direct link mana yang berkenan.
- Kaler Biru tuh, korang boleh warna yang korang suka lah. But make sure, warna different so dia nampak cantik jek.
- Yang saya bold kan itu, penting korang letak supaya page source korang tak boleh kena curi.

Okay, now. Nampak tak kaler ini kat atas? Pastekan code ini kat bawah kaler ini.

.content {
background:#ffffff;
color: #666666;
font-size: 11px;
padding:14px;
width: 600px;
text-align:left;
}
.bar {
background: #ffffff;
color: #666666;
font-size: 11px;
width: 230px;
padding: 12px;
border-radius: 10px;
margin-bottom: 15px;
text-align: left;
}
.main-title {
color:#424242;
font-family: Segoe UI Symbol;
font-size: 15px;
padding: 3px;
border-bottom:1px solid #E76E7C;
}
.sec-title {
color:#424242;
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
blockquote{
border-left: 10px solid #F4F800;
padding: 7px;
background: #FFFFFF;
}
a:hover {
Cursor: (http://cur.cursors-4u.net/cursors/cur-9/cur818.cur), auto;
color: #F4F800;
-webkit-transition:1s;
}
b {
color: #E76E7C;
}
u {
text-decoration: none;
color: #E76E7C;
border-bottom: 1px solid #F4F800;
}
i{
color: #F4F800;
}
s{
color: #E76E7C;
}
::-moz-selection{
background: #FFFFFF;
color: #F7819F;
}
::selection{
background: #FFFFFF;
color: #F7819F;
}

- Kaler Merah tuh, korang jangan pandai-pandai tukar taw? Ngam dah setting dia tuhh.
- Biru, Purple, Pink, dengan kaler Hijau tuh korang tukar lah ikut korang punya suka. Tapi make sure ikut tiap golongan warna tau. Nati jadi pelik pula. Contoh kalau kaler Biru tuh make sure, dua-dua warna sama code!

Lepaih itu, Ctrl+F kan code ini <body oncontextmenu='return false;'><br> kemudian paste kan code ini kat bawah nya.

<table style="line-height: 17px;" width="900" border="0" align="center" cellspacing="10">
<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>

Dah siap? Eh bukan siap buat lah, siap paste. Haha! Kemudian post lagi. Sambung sahaja okay?

<td valign="top" width="230px">
<div class="bar">
<div class="main-title">Title Sidebar</div>
Content Sidebar</div><br>
<div class="bar">
<div class="main-title">Title Sidebar</div>
Content Sidebar</div><br>
<div class="bar">
<div class="main-title">Title Sidebar</div>
Content Sidebar</div><br>
<div class="bar">
<div class="main-title">Title Sidebar</div>
Content Sidebar</div><br>
</td>

- Kaler Merah, korang boleh tukar pergi Bounjor, Tagboard, Credit or apa-apa sahaja.
- Kaler Biru, korang isi dengan ayat yang korang nak lah. Tapi Sidebar pertama mesti masukkan code dibawah ini tau :>

Okay, now untuk navigation lagi. Ini navigation macam biasa sahaja tau. Takda block or shape sume. Korang boleh letak suke hati kat na korang suke di Content Sidebar di atas.

<a class="bar" onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML" title="">About</a><br><br>
<a class="bar" onClick="document.getElementById('content').innerHTML=document.getElementById('link').innerHTML" title="">Links</a><br><br>
<a class="bar" onClick="document.getElementById('content').innerHTML=document.getElementById('goodie').innerHTML" title="">Goodies</a><br><br>
<a class="bar" onClick="document.getElementById('content').innerHTML=document.getElementById('Post').innerHTML" title="">Home</a>
</div>

Copy code ini dan pastekan dekat bawah code atas ini hah.

<div id="profile" style="display:none;"><div class="main-title">The Webmaster</div><br>Tulislah ape-ape berkenaan diri korang kat sini / Biodata korang</div>

<div id="link" 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="goodie" style="display:none;"><div class="main-title">Tutorial & Freebie</div><br><a href="blogger.com"/>Tutor</a><br><a href="blogger.com"/>Tutor</a><br>
<a href="blogger.com"/>Tutor</a><br><br><a href="blogger.com"/>Freebie</a><br><a href="blogger.com"/>Freebie</a><br><a href="blogger.com"/>Freebie</a><br></div>

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

Kalau nak letak button Follow ngan Dasboard letak sebelum code </html>. Apa-apapun sebelum save jangan lupa PREVIEW dulu tau. Kalau korang tak faham, tanya saja dekat Cbox saya. Kalau nak guna tutor ini atau pun nak buat skin dengan code saya, make sure creditkan. kalau tak saya benci dia. hoho!

Nanti saya buat freebie untuk skin ini kalau saya rajin :> tapi saya dah ada blogskin dah. Ni hah, http://www.blogskins.com/me/nana_zhyzhy. Saya nak off dulu, Ejal dah merajok! Hoho, bye! Good luck.

Labels: Skin Made, Tutor