How to Create 2 Column Skin // Sunday, November 6, 2011
Assalamu'alaikum...
Kemarin aku di group BBB dah janji kalau mau bikin tutorial ini. Okayh, sebelumnya aku perlu belajar sampe 2 Minggu buat belajar coding old tempelate yang membingungkan inii T^T
Kemarin aku ganti ke Denim itu gara gara templet ku yang sekarang ini error, kayak ter-encrypt gitu, so aku ganti ke Denim lagi. Tapi Alhamdulillah sekarang udah berhasil kembali lagi ^_^
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">- Merah itu spasi (jarak) antar rows column.
<tbody><tr>
- 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">
Udah? selesai, Preview. Kalau masih Fail itu wajar karena aku belajar sampe 2 Minggu >,<
