tanganku, tulisanku;: Tutorial: Make Own Classic Template

Assalamu'alaikum
Hi, all :) Sekarang buat template sendiri! Memang classic tuh sulit banged. Tapi coba dulu kali yah?

Let's start. Siapkan:
- Blog Tester
- Baca Do'a

Click "Revert to Old Tempelate" di blog tester kamu, scroll sampai bawah di page edit HTML. Make sure, semua codes sudah terdelete.

Letakkan code ini di paling atas kotak edit HTML yang kosong tadi:

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

- Merah URL Header
- Magenta nama blog

<style type="text/css">#navbar-iframe {display: none;}body {background: url(URL Bg);background-attachment:fixed;font-family: arial;font-size: 11px;}a:link, a:visited {color:#000000;text-decoration:none;}a:hover {border-bottom:1px solid #87689;}</style><body><br>

- Oren itu coding for delete d'Navbar
- Blue URL background
- Red colour of link
- Green colour of link hover

Search code </style> pastekan coding ini diatas nya:

.main {background:#ffffff;color:#666666;padding:14px;width:500px;border-radius:10px;text-align:justify;}.sidebar {background: #ffffff;color: #666666;padding: 8px;width: 240px;border-radius: 10px;text-align: justify;}.h1 {color:#FF9FCC;font-size:18px;padding:3px;border-bottom:1px solid #c0c0c0;}.h2 {font-style:italic;font-size:10px;margin-bottom:2em;}

- Pink warna font dalam blog
- Oren width setiap bagian blog, sidebar and main blog
- Blue radius kelengkungan layer blog, *kalau mau kotak kaku, delete coding itu*
- Magenta warna font post title

Dah? cari code <body> pastekan code ini dibawahnya:

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

- Merah itu spasi (jarak) antar rows column.
- Oren itu kelebaran seluruh tables, meliputi main and sidebar.

Kalau udah, pastekan kode dibawah ini setelah coding tables diatas:
<td valign="top" width:550px;">

<div class="main"><blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="h2"><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>

Jangan ganti coding coding merah kalau kamu nggak ganti coding di group layer >,<
Selalu tutup tables dengan </td>

- Oren bagian post title
- Biru bagian date, comments
- Green perkataan komentar
- Magenta perkataan older post and newer post
- Purple itu width main.

Time to create SIDEBAR.
Setelah coding diatas selesai, lanjutkan dengan yang ini. Memang tutorial ini sulit banget, kalau belum pernah main code blogskins nanti kebanyakan FAILED >,< coba coba aja ya aku sampai keringetan bikinnya xD

<td valign="top" width="250px"><div class="sidebar"><div class="h1">TITLE SIDEBAR</div>ISI SIDEBAR</div>
<br>

- Merah itu width sidebar
- Blue judul/title sidebar
- Green isi sidebar
Kalau mau bikin box box sidebar lebih banyak, pastekan code ini dibawah code sidebar diatas:

<div class="sidebar"><div class="h1">TITLE SIDEBAR</div>ISI SIDEBAR</div>
<br>

Ulangi kalau mau box sidebar lagi dibawah bawah bawah lagi lagi dan lagi \stress/ xP

Jangan lupa kalau setiap part, misalnya sidebar atau main udah selesai, SELALU TUTUP dengan code:
</td>

So, jadi seperti ini:

<td valign="top" width="250px">
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>
</td>

Tapi kalau masih mau bikin box sidebar, jangan tutup coding dengan </td> dulu. Hokay?

Done main and sidebar, jangan lupa akhiri dengan letakkan coding ini setelah semua coding main and sidebar mu selesai:

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

P/s: Kalau mau letak apa apa tentang Javascript, letak diatas code <style type="text/css">

Kalau FAILED boleh ambil freebies

<html>
<head>
<center><img src="http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/freeheader2.png" /></center>
<title>//LIL FREAK</title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:url(http://i959.photobucket.com/albums/ae76/Onimomo159/55235022-1.png);
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RadNQ6p9Yu4EXWc-kZs8zFkx7CzFXeNkh3TqXXZj1_VLPFGHbHigxZ0WWDELl85kn2d0Uv1SQkktzfxFIKyBOD7GgraDhHCHyprIMADxl77MUuVpUY3MRsveH_MabgXxZogzFulGX4k/s1600/CURSO.png), progress;
background-attachment:fixed;
font-family: Century Gothic;
color: #666666;
}
a:link, a:visited {
color:#FFBBBB;
text-decoration:none;
}
a:hover {
cursor: crosshair;
border-bottom:1px dashed #c0c0c0;
}
.entry {
background:#ffffff;
padding:14px;
font-size:11px;
line-height:17px;
border-radius:10px;
-moz-border-radius: 10px;
text-align:justify;
}
.sid {
padding:14px;
line-height:17px;
background: #FFFFFF;
font-family: verdana;
font-size: 11px;
text-align: center;
border-radius:10px;
-moz-border-radius: 10px;
}
.tit {
color:#FFBBBB;
text-align: right;
font-family: georgia;
font-style: italic;
font-size:15px;
padding:3px;
border-bottom:1px dashed #c0c0c0;
}
.com {
text-align: right;
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
blockquote {
border-right:10px solid #FFBBBB;
padding:8px;
}
u {
border-bottom:2px solid #FFBBBB;
text-decoration:none;
}
</style>
<body>
<table style="line-height: 18px;" width="900" align="center" border="0" cellspacing="8">
<tbody><tr>
<td valign="top" width:550px;">
<center><div class="entry">
<blogger><div class="tit"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="com"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br>
</blogger>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div></center></td>
<td valign="top" width="250px">
<div class="sid">
<div class="tit">Bonjour!</div>
Hi, fellas. My name is Sintya Swasthi from Indonesia 11 y/o this blog is just my TESTER!<br>
</div><br>
<div class="sid">
<div class="tit">Tagboard</div>
go to www.shoutmix.com<br>
Height: 120px<br>
Width: 100%<br>
</div><br>
<div class="sid">
<div class="tit">Contact Me</div>
<a href="http://sintyablueberryblue.blogspot.com/">First Blog</a> l
<a href="http://nanamiasintyaria.blogspot.com/">My Second Blog</a>
<a href="http:///"></a>
<a href="http:///"></a>
<a href="http:///"></a>
<a href="http:///"></a>
<a href="http:///"></a>
<a href="http:///"></a>
<a href="http:///"></a>
<a href="http:///"></a>
</div><br>
<div class="sid">
<div class="tit">Credits</div>
<!----DONT REMOVE CREDIT OR I WILL MAKE YOU SHAME-----!>
Basecodes from <a href="http://www.letthaprincess.blogspot.com/">Lettha</a> <a href="http://lettha-story.blogspot.com/">Kyra</a><br>
Background from <a href="http://www.blogskins.com/info/362185/">Miss Alice</a><br>
Best view: <a href="http://www.google.co.id/">Google Chrome</a><br>
Header <a href="http://faqihahhusni.blogspot.com/">Kihah</a><br>
Re-edit by <a href="http://www.sintyablueberryblue.blogspot.com/">Sintya</a> <a href="http://www.nanamiasintyaria.blogspot.com/">Swasthi</a>
<!----DONT REMOVE CREDIT OR I WILL MAKE YOU SHAME-----!>
</div><br></td>
</body>
</head>
</html>

Originally by me:

<head>
<center><img src="http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/freeheader3.png" /></center>
<title>//My Tester</title>
<style type="text/css">
#navbar-iframe {display: none;}body {
background: url(http://i1208.photobucket.com/albums/cc361/Letthalicious/Backgrounds/chocolettha-1.gif);
background-attachment:fixed;
font-family: Century Gothic;
font-size: 11px;
}
a:link, a:visited {
color:#F778A1;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #F52887;
}
.main {
background:#ffffff;
color:#6E6A6B;
padding:14px;
width:500px;
border-radius:8px;
text-align:justify;
}
.sidebar {
background: #ffffff;
color: #6E6A6B;
padding: 10px;
width: 240px;
border-radius: 8px;
text-align: center;
}
.h1 {
color:#000000;
font-size:12px;
padding:3px;
border-bottom:1px solid #c0c0c0;
}
.h2 {
font-style:italic;
font-size:12px;
margin-bottom:2em;
}
</style>
<body><br>
<table style="line-height: 17px;" width="850" border="0" align="center" cellspacing="5">
<tbody><tr>
<td valign="top" width:550px;">
<div class="main">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>dreamer (s)</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Future</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Past</a></NewerPosts></center></div>
</div>
</td>
<td valign="top" width="250px">
<div class="sidebar">
<div class="h1">About</div>
Hy name is Sintya,little girl, i'am from Indonesia. 11 y/o, this is just MY TESTER BLOG!</div>
<br>
<div class="sidebar">
<div class="h1">Credits</div>
letthaprincess.bs.com l faqihahhusni.bs.com l sintyablueberryblue.bs.com l

This blog basecodes made by me! Don't take out the credits!</div>
<br>
<div class="sidebar">
<div class="h1">Contact Me</div>
Fb: Sintya Swasthi
✿ Twitter: Sintya_Swasthi
Blog: sintyablueberryblue.bs.com ✿ nanamiasintyaria.bs.com</div>
<br>
</td>

JANGAN REMOVE CREDITS!

Kbye~

Credits: Lettha

15 Oktober 2011

Tutorial: Make Own Classic Template

1 komentar: