Membuat Template BLog

Membuat Template BLog

Beberapa hal penting dalam membuat template blog :

1. BACKground
Ini adalah aspek yang cukup penting dalam hal ngedit template secara keseluruhan , background itu layouts dari blog kamu ( di balik kolom postingan dan sidebar, serta header dan footer )
buat ngedit background blog KODe scrtipnya :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(http://img501.imageshack.us/img501/3962/smilecom2bm1.jpg);
background-attachment: fixed;
background-position:bottom left;
background-repeat:no-repeat;
border-color: #854c6c;
border-width:0px ;
border-style: solid;

bagian pink bisa kamu rubah dengan link kamu, gunakan photoshop atau sejenisnya lalu dapetkan urlnya dgn menggunakan imageshack atau photobucket

2. KOLOM
HAl ini juga ngak kalah pentingnya dengan background, kolom disini maksnya adalah tempat postingan dan sidebar, boleh menggunakan 1 kolom hingga 4 kolom.

buat kolom posting :

#main-wrapper {
width: 485px;
float: left;
padding: 5px;
border:2px solid $bordercolor;
background-color:#000000;

tulisan merah buat ukuran kolom kamu , kuning buat border kalau kamu mau menghilangkan blog masukkan angka 0 , Pink adalah warna buat kolom kamu.

kalau lkamu ingin warna kolom kamu terlihat samar , seperti ini:




tambah kan kode :

filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90;

HASIL nya:

#main-wrapper {
width: 485px;
float: left;
padding: 5px;
border:2px solid $bordercolor;
background-color:#000000;
filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90 ;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

SIDebaR...
kodenya :

#sidebar-wrapper {
width: 235px;
float: right;
padding: 5px;
border:2px solid $bordercolor;
background-color:#000000;
filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Semua penerapannya sama dengan kolom posting tadi :)





Tidak ada komentar:

Posting Komentar

Contact Us

Nama

Email *

Pesan *

Back To Top