Tutorial: How to Make 2 Coloumn Template

Hollaaa (。-ω-)ﾉ
I'm back to share tutorial.
Hahaha. Gimana ya, abisnya ada yang request. Request from MaylaDiva
Sekalinya bikin tutorial langsung yang levelnya tinggi gini. But, ok, dari dulu aku pingin nge-share tutorial ini tapi belom ada kesempatan dan... males.
Langsung saja, here we go..!
First, ganti template kamu jadi classic template. How? Klik template, lalu scroll hingga kebawah. Nah, dipaling bawah itu ada 'Revert to classic templates'. Like this:
Klik seperti panah digambar ya. Kalau sudah, nanti kamu ketemu kolom dengan judul 'Edit Template HTML'. Delete semua kode disana hingga benar-benar kosong :)
Lalu, langsung saja copy + paste kode ini untuk awal.

<html>
<head>
<center><img src="URL Header"></center>
<title>Your blog title</title>

Ganti warna merah dengan url gambar header milikmu. Jangan lupa ganti warna orange dengan judul blog kamu.

<style type="text/css">
#navbar-iframe {display: none;}body {
background: url(URL Background);
background-attachment:fixed;
font-size: 11px;
cursor:url(URL Cursor);
}
a:link, a:visited {
color: #666666;
text-decoration:none;
}
a:hover {
color:#000000;
border-bottom:1px solid #000000;
cursor: url(URL cursor saat dihover),auto; 

lime: kode untuk delete navbar. Kalau mau tetap ada navbar nya, silahkan delete kode tersebut.
aqua: url backgroundmu.
blue: url cursormu. Bisa dipilih di cursor 4u.
red: untuk warna link.
orange: warna link saat di hover. Kalau ingin warnanya tak berubah (saat di hover), delete kode color:#000000;
choco: border dibawah link saat di hover. Ganti warna kuning dengan warna border.

.main {
background:#FFFFFF;
color:#000000;
font-family: "century gothic";
font-size: 13px;
padding:14px;
width:450px;
border-radius:20px;
text-align:justify;
}
.sidebar {
background: #FFFFFF;
color: #666666;
font-size: 11px;
padding: 8px;
width: 300px;
border-radius: 20px;
text-align: justify;
}  

 red: warna background kolom main dan sidebar.
lime: warna tulisan di blog.
aqua: lebar kolom main dan sidebar.
blue: kelengkungan kotaknya (kalau ingin kotak yang lancip2, delete kode itu).
grey: font untuk tulisan di post

.h1 {
font-family:"century gothic";
color:#FCE2CF;
font-size:22px;
border-bottom: 2px dashed #A8A69E;
Text-align:left;
text-transform:none;
}
.h2 {
font-style:none;
color:#666666;
font-size:13px;
margin-bottom:2em;
}

fuchsia: jenis font untuk judul post title
red: warna font untuk post title
purple: ukuran font untuk post title
orange: warna border bawah.

masukkan kode ini dibagian bawah

</style>
<body>

 lalu selanjutnyaa.. setelah kode <body>

<table style="line-height: 17px;" width="850"  border="0" align="center" cellspacing="10">
<tbody><tr>
<td valign="top" width:550px;">
<div class="main">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><$blogitembody$><br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$> <span style="font-size: 7.5pt;  padding: 4px; text-transform: uppercase;"><$BlogItemCommentCount$> Comment(s) </span></a></BlogItemCommentsEnabled></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div></div>

red itu jumlah keseluruhan lebar main dan sidebar, orange: jarak antara main dan sidebar
green: title post
choco: isi post
fuchsia: comment post
blue: older and newer post

sekarang, kode untuk membuat sidebar...

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

kalau ingin membuat box sidebar baru, co-pas kode dibawah ini dibawah kode diatas

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

And... akhiri dengan kode berikut.

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

Selesai! Masih ada beberapa kode untuk mempercantik blogmu sih. Bagi yang ingin memakainya, silahkan dipilih... pastekan sebelum kode </style>

Blockquote

blockquote {
background: url(URL background);
-webkit-transition-duration: 3s;
padding: 13px;
margin: 3px 3px;
border-radius: 10px 15px;
opacity:0.70;
border:1px dashed #634750;
}
blockquote:hover {
background: url(URL background saat dihover);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transition: 3s;
opacity:0.80;
}

 red: url backgroundnya
purple: warna border disekeliling kotak quote
orange: url background saat dihover. kalau ingin backgroundnya nggak berubah, delete kode itu.

Scrollbar and highlight text

::-webkit-scrollbar {
height: 12px;
width: 7px;
background-color: #ffffff;
}
::-webkit-scrollbar-thumb {
background-color: #968084;
}
::-moz-selection{
background:#9C868D;
color: #666666;
}
::selection {
background:#9C868D;
color: #666666;
}

 red adalah warna background scrollbar. choco warna scrollbarnya. green untuk background text saat di highlight. purple adalah warna text nya (saat di highlight). Oya, untuk yang berwarna green dan purple disamakan, seperti contoh.

Image opacity

img {
opacity:0.85;
filter:alpha(opacity=90); /* For IE8 and earlier */
-webkit-transition: 0.4s;
border-radius: 10px;
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: 0.4s;
border-radius: 20px;

 fuchsia itu untuk opacity gambar. opacity itu biasanya dibawah 1.0, ya! red itu radius kelengkungan gambar. choco opacity gambar saat dihover. green radius kelengkungan gambar saat dihover.

Oya, ini ada beberapa freebies background. Credits: ransie3@deviantart.
How to use: klik kanan, save di komputer kamu. Lalu, upload ke img hosting sendiri, ya!



 p.s: untuk yang memakai background2 ini, creditsnya ke ransie3, ya!

Oke, segitu dulu deh tutorialnya. Kalau ada yang bingung karena mumet sama tutorial yang emang acakadut ini, jangan segan bertanya. Yang mau tambahan tutorial seperti 'kenapa judul post di blog saya bisa berbayang saat dihover' atau 'cara membuat navigasi seperti di blog ini' dan semacamnya, silahkan komentar saja. Nanti aku bikin tutorialnya.

Baiklah, sekian dariku. Mohon maaf kalau bikin mumet soalnya aku juga mumet bikinnya. Kalau ada pertanyaan, jangan segan komentar.

Byeee...~

referensi tutorial dari chocolettha. karena pertama kali saya membuat template dari sana.

0 Comment(s)
Older Post