Create Classic Templates 2 Column With Pages
Wednesday, January 25, 2012 | 1:33 AM | 0 comments
Hi! Eh,eh,btw,judulnya panjang bgt yaa? iya nih. sebelumnya..aku mau bilang kalau tuto ini..credits to kak jaja. thanks kak! aku jd tau cara buat template gimana:p<3 mau tau cara buatnya dan hasilnya gimana? SIMAK TUTO INI BAIK2. Salah satu code,salahsemua. eaaa wkwk.

1. Sign in blog > design > edit html > scroll ke bawah > click "Revert to All Templates"
2. Kalau sudah,HAPUS semua code yg ada disitu. Jangan sampai ada yang tersisa,ok?.
3. Copy kode dbwh ini dan paste di paling atas.


<html><head><center><img src="URL Header" /></center><title>Title blog</title>
-Merah diganti dengan url header kalian. Gak punya? klik disini atau disono.
-Biru diganti dengan title blog kalian.

4. Copy kode dibawah ini dan paste dibawah code yg 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> 
 -Merah diganti dengan url background kalian.
-Magenta diganti dengan url cursor kalian.
-Hijau diganti dengan code warna yg kalian mau utk link dan hovernya.

5. Tekan CTRL + F serentak dan cari kode </style> Paste kan code dibawah ini diatas code </style> tadi.


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;}
 -Merah diganti dengan width content dan bar kalian.
-Biru diganti dengan code warna kalian,untuk body,sidebar font dan warna sidebar blockquote.

6. Tekan CTRL + F secara serentak dan search code <body oncontextmenu='return false;'> Paste kode dibawah ini dibawah code <body oncontextmenu='return false;'> 



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

-Orange diganti dengan width keseluruhan content dan bar kalian.

7. Copy kode dibawah ini dan paste dibawah 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 kode dibawah ini dan paste dibawah code td.


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

-Magenta ganti dengan width bar kalian. Pastiin sama kyk yg diatas.
-Biru tuker sm title sidebar kalian, Misalnya "Meet the Webmistrees" atau enggak "Disclaimer"
-Biru aqua JANGAN PERNAH DITUKAR! Karena itu penting bgt,untuk function dibawahnya.

9. Copy kode dibawah ini dan paste dipaling bawah. 

</table></body></head></html>
Time to make navigations:) gak tau navigation itu apa? waduh-,,- tp gapapa,liat aja gmbr dibawah ini!:D


Itu cuma salah satu bentuk navigations. Yuk langsung lanjut aja:D

1. Tekan CTRL + F serentak dan search kode </style> copy kode dibawah dan paste di atas kode </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;}

 -Merah boleh diganti dengan width yg diinginkan utk navi nyaa:)
-Biru diganti dengan code color untuk background navigations,warna font dan warna bordernya.
-Bold diganti dengan bentuk bordernya ; solid,dashed,dotted

2. Copy kode dibawah ini diatas code </td> inget ya,code </td> yg berwarna BIRU AQUA! Bukan yg bold. Check baik2 ya.


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

-Biru diganti sama title sidebar kalian.

3. Copy kode dibawah ini,dan paste dibawah 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>
~Selesai~

Jadilah,template pertama kalian:P kalau gak jadi..aku gk tau ya. karena aku jg masih newbie!

P/S: jika pengen nambahin gadget code HTML lainnya,seperti follow button,taruh sebelum code </html> 

Goodluck:))






OLD / NEW

Template designed by Nazihah Anuar. Background from FPA