poppinsteff.

Tutorials Freebies Downloads Tips and Tricks Themes

Let's Design Own Template - Classic Template

Saturday 14 January 2012 @ 11:45

Heyho, alls !

Ada yang tanya aku pakai template apa ? Own Classic template. So, korang nak pakai template like me ? Yang sidebar rapat dengan post body ? Let's get start !

First, korang mesti dah Revert to Classic Template. Belum lagi ? Okayy, klik sini.

After dah revert. Prepare Notepad and Blog Tester. Nanti banyak kod nak di-tweaks + takut kod crash.

Pergi Template. Kosongkan segala isi perut dalam box tu. Biarkan kosong. Takut kod blogskin hilang ? Save copy kat Notepad.

Kita start dengan Title yang akan keluar kat bar.

<html>

<head><title>Your's Blog Title</title>

Gantikan dengan Title blog anda yang hot.

Next, kita letak Favicon. Tengok sini.

Kalau nak pakai Own Navbar yang macam aku tu, klik sini.

Then, korang copy basic code di bawah ni.

<style type="text/css">

#navbar-iframe {

display: none;

}

body {

background:url(URL IMG);

font-family: verdana;

font-size: 8pt;

background-attachment:fixed;

text-align: justify;

}

a:link, a:visited {

font-style: normal;

color: #81BEF7;

text-decoration: none;

-webkit-transition-duration: 0.5s;

}

a:hover{

border-bottom:1px solid #9F9F9F;

}

blockquote {

background:url(URL IMG);

border: 1px solid #ffffff;

padding: 4px;

margin:1em 20px;
}

blockquote:hover {

background:url(URL IMG);

border-right: 1px dashed #2E64FE;

border-left: 1px dashed #2E64FE;

border-bottom: 1px solid #2E64FE;

border-top: 1px solid #2E64FE;

padding: 4px;
margin:1em 20px;
}

u {

text-decoration: none;

border-bottom: 1px solid #FFB0B0;

}

b, strong {

font-weight: bold;

color: #FFBBBB;

}

</style>

</head>

</body>

</html>

Underline - Remove Blogger Navbar

Merah - URL gambar

Biru - Tulisan kat post

Hijau - Warna

Purple - Saiz

Oren - Boleh tukar dengan solid, dashed, dotted, etc

Pink - Boleh tukar dengan center, right, left, justify, etc

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;

}

Bold - h1 (Post Title) • h2 (Sidebar Title) • h3 (Description - date, time, comment, etc)

Merah - Font

Biru - Saiz

Hijau - Warna

Purple - Boleh tukar left, right, center, justify

Oren - Boleh tukar dengan solid, dashed, dotted, etc

Pink - Boleh tukar dengan capitalize, none, uppercase, lowercase, etc

Sekarang kita letak header pula. Pastekan selepas </head>

<center><img border="0" src="URL IMG" /></center>

Gantikan dengan kod header anda.

Okay, sekarang nak buat column. Yang ini 2 column. Pastekan kod bawah ni selepas kod header.

<table style="font-size: 11px; color: #848484; line-height: 16px; background:url(URL IMG); border-radius:20px; box-shadow:0px 0px 7px #9BB9C0;" width="800" align="center" border="0" cellspacing="10">

<tbody><tr>

Merah - Background dekat post

Biru - Saiz

Hijau - Warna

Ungu - Kelebaran post body dan sidebar

Now, untuk post.

<td valign="top" style="width:530px; padding-left:5px; border-right:1px solid #eee; padding-bottom:5px; box-shadow:0px 0px 5px #ffffff; padding-right:15px; ">

<div id="post">

<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>

<div class="h3"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> • <$BlogItemDateTime$> • <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</span></a></BlogItemCommentsEnabled> </div><$BlogItemBody$></br><iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&layout=standard&show-faces=true&width=490&height=25&font=arial&";action=like&colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe></blogger><br><center><OlderPosts><a href=<$OlderPosts$>>OLD</a> </OlderPosts> <NewerPosts> • <a href=<$NewerPosts$>>NEW</a></NewerPosts></center>

Purple - Kelebaran post body

Oren - Boleh tukar dengan solid, dashed, dotted, etc

Biru - Boleh guna ayat sendiri

Hijau - Kod Facebook like. Position under post

Merah - Warna

Ni, sidebar pulak.

<td valign="top" style="line-height:15px; letter-spacing:1px; font-size:10px; width:240px; padding-left:10px;">

<div class="h2">Title</div><br></br>

Content </div>

<div class="h2">Title</div>

Content </div>

</td>

</tr></tbody>

</table>

Merah - Kelebaran sidebar

Biru - Edit-lah

Nak buat page ? Mula-mula kita buat button page dulu.

Pastekan kod di bawah sebelum </style>

a.button {

color: #353535;

font-size:11px;

-moz-border-radius: 9px;

border-radius: 5px;

-webkit-transition:1.5s;

border: 1px solid #ff0d62;

}

Biru - Saiz

Hijau - Warna

Oren - Boleh tukar dengan solid, dashed, dotted, etc

Sekarang, pastekan kod di bawah sebelum kod sidebar tadi.

<center><a class="button" onClick="document.getElementById('post').innerHTML=document.getElementById('profile').innerHTML" title="Owner">About</a> <span style="padding:4px;"></span>

<a class="button" onClick="document.getElementById('post').innerHTML=document.getElementById('tuto').innerHTML" title="Hot Tuto">Tutorial</a> <span style="padding:4px;"></span></center>

Biru - Word on button. Boleh tukar.

Now, kita edit page pula. Pastekan sebelum </body>

<div id="profile" style="display: none;">

<div class="h1">Title</div>

Content </div>

<div id="tuto" style="display: none;">

<div class="h1">Title</div>

Content </div>

Biru - Edit-lah.

#Korang pun boleh tambah page and sidebar kalau nak.

Okay, done. And last but not least jangan lupa tekan Save Template.

See the Blog Tester to preview. Okay, kalau nak kerja lagi senang atau tak faham tuto atas. Korang boleh ambil freebies code kat bawah. Tolong jangan remove credit. Nanti geget baru tahu. Penat aku buat. Kalau korang ambil, sila beritahu.

<html>

<head><title>Whispers.</title>

<link rel="shortcut icon"

href="http://applepine.chu.jp/sozai/tibikuma.gif">

<div style="position: absolute; top:0px; left: 0px;

width:100%; position:absolute; padding:3px;

background:#000000; color:#ffffff; font-size:11px;">

<center><i>Heyho !</i>. Welcome to Whispers !

What to do ? <a

href="http://www.blogger.com/follow-blog.g?

blogID=7249473482689828363">Follow </a> or <a

href="http://www.blogger.com/home">Dashboard</

a> ? </div></center>

<style type="text/css">

#navbar-iframe {

display: none;

}

body {

background:url

(http://i1208.photobucket.com/albums/cc361/Letthali

cious/Backgrounds/lettha2.png);

font-family: Georgia;

font-size: 8pt;

background-attachment:fixed;

text-align: justify;

}

a:link, a:visited {

font-style: normal;

color: #2E2EFE;

text-decoration: none;

-webkit-transition-duration: 0.5s;

}

a:hover{

border-bottom:1px solid #5858FA;

}

blockquote {

background:color: #FFFFFF;

border-right: 8px double #0080FF;

border-left: 4px solid #0080FF;

padding: 4px;

margin:1em 20px;

}

blockquote:hover {

background:color: #A4A4A4;

border-right: 4px solid #0080FF;

border-left: 4px double #0080FF;

border-bottom: 1px dashed #0080FF;

border-top: 1px dashed #0080FF;

padding: 4px;

margin:1em 20px;

}

u {

text-decoration: none;

border-bottom: 1px solid #0080FF;

}

b, strong {

font-weight: bold;

color: #0080FF;

}

img {

filter: alpha(opacity=70);

opacity: .6;

-webkit-transition: 0.4s;

}

img:hover {

filter: alpha(opacity=100);

opacity: 2;

}

.h1 {

font-family:Georgia;

font-size:15px;

letter-spacing: 2px;

line-height:20px;

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:20px;

color: #000000;

text-align: center;

text-transform: normal;

border-bottom:1px dashed #2E64FE;

}

.h3 {

font-family: Georgia;

font-size: 8pt;

text-transform: normal;

text-align: right;

}

a.button {

padding:4px;

color:#353535;

background: #0080FF;

font-size:11px;

-moz-border-radius: 9px;

border-radius: 5px;

-webkit-transition:1.5s;

}

</style>

</head>

<center><img border="0"

src="http://i1124.photobucket.com/albums/l579/fieKr

ieY/transparent-1.png" /></center>

<table style="font-size: 11px; color: #848484; line-

height: 16px; background:url

(http://www.unitedwaytja.org/images/WhiteBackgro

und_Adjustable.gif); border-radius:20px; box-

shadow:0px 0px 7px #9BB9C0;" width="850"

align="center" border="0" cellspacing="10">

<tbody><tr>

<td valign="top" style="width:530px; padding-

left:5px; border-right:1px solid #eee; padding-

bottom:5px; box-shadow:0px 0px 5px #ffffff;

padding-right:15px; ">

<div id="post">

<blogger><div class="h1"><BlogItemTitle><

$BlogItemTitle$></BlogItemTitle></div>

<div class="h3"><BlogDateHeader><

$BlogDateHeaderDate$></BlogDateHeader> • <

$BlogItemDateTime$> • <a href="<

$BlogItemCommentCreate$>"<

$BlogItemCommentFormOnClick$>> <

$BlogItemCommentCount$>

comments</span></a></BlogItemCommentsEnable

d> </div><$BlogItemBody$></br><iframe

src="http://www.facebook.com/plugins/like.php?

href=<$BlogItemPermalinkURL

$>&layout=standard&show-

faces=true&width=490&height=25&fo

nt=arial&";action=like&colorscheme=dark;

colorscheme="dark" scrolling="no"

frameborder="0" allowTransparency="true"

style="border:none; overflow:hidden; width:280px;

height:30px;"></iframe></blogger><br><center><Ol

derPosts><a href=<$OlderPosts$>>OLD</a>

</OlderPosts> <NewerPosts> • <a href=<

$NewerPosts$>>NEW</a></NewerPosts></center>

<td valign="top" style="line-height:15px; letter-

spacing:1px; font-size:10px; width:220px; padding-

right:10px;">

<center><a class="button"

onClick="document.getElementById

('post').innerHTML=document.getElementById

('profile').innerHTML" title="Owner">About</a>

<span style="padding:4px;"></span>

<a class="button"

onClick="document.getElementById

('post').innerHTML=document.getElementById

('tuto').innerHTML" title="Hot Tuto">Tutorial</a>

<span style="padding:4px;"></span>

</center>

</br>

<div class="h2">Welcome</div>

You can place anything here.</div><br></br>

<div class="h2">Tagbooard</div>

Your tagboard dimension 210 x 150</div><br></br>

<div class="h2">Credits</div>

<!----PLEASE DON'T REMOVE THE CREDIT OR I'LL

HUNT YOU !-----!>

Code Template Made by <a

href="http://www.ayemrawi.blogspot.com">AyemRa

wi</a></br>

Edited by <a

href="http://www.yourlink.blogspot.com">You</a></

br>

Favicon by <a

href="http://www.applepine.chu.jp">ApplePine</a><

/br>

Background by <a

href="http://www.letthaprincess.blogspot.com">Lett

ha</a>

<!----PLEASE DON'T REMOVE THE CREDIT OR I'LL

HUNT YOU !-----!></div>

</td>

</tr></tbody>

</table>

<div id="profile" style="display: none;">

<div class="h1">Profile</div>

You can write about yourself here. </div>

<div id="tuto" style="display: none;">

<div class="h1">Tutorial</div>

You can also list your tutorial here. </div>

</body>

</html>

Kalau ter-suka secara tiba-tiba tuto ni, klik lah button like tu ~ Baik lagi ? Klik yang "Click Here Thank You" tu.

tag : Lettha, kak Nazihah

Labels: Freebies, Tutorial

0 Comments:

Post a Comment