Gambar di atas adalah sebuah template css yang bisa dipakai untuk edit tampilan wapsite jika ingin tampilan wapsitemu berbeda dari wapsite lain karena tampilannya seperti tampilan Website. Tips ini aku pelajeri dari
cyberbali.co.cc
pertama anda harus punya atau sudah mendownload css templates hasil seacrh dari google. klo anda belum punya template silahkan anda seacrh di google dengan kata kunci atau keyword free css templates usahakan mencari css templates yang gratis.
kalau anda sudah menemukan templates yang cocok di pikiran anda dan merasa script-scripnya gampang di edit, sekarang mulai lah untuk men extract, biasanya css templates berfile zip maka yang mengedit memakai komputer bisa langsung memakai winrar atau winzip atau sejenisnya. klo yang memakai handphone anda bisa download winrar berfile jar atau sejenisnya. biasanya css templates didalamnya ada beberapa elemen-elemen penting untuk terbetuknya suatu halaman website, karena kita disini membahas tentang wapsite maka kita harus menyesuaikan dengan hostingan kita.
elemen atau file didalamnya berupa:
* forder gambar
* file css
* index.html
1. tahap pertama:
anda buka folder gambar didalamnya ada beberapa gambar yang mendukung css templates agar menjadi sebuah halaman. silahkan anda upload dulu gambar-gambar dalam folder tersebut ke hostingan anda. buatkan folder khusus agar anda gampang untuk mengingatnya. contohnya buat folder template sehingga alamat gambar yang didapat sebagai contoh http://username.domain/picttemplates/namagambar.tipe gambar
tipe gambar tersebut bisa berupa jpg, png, atau lainnya
2. tahap kedua:
setelah anda selesai men upload gambar-gambar, gambar tersebut akan memiliki alamat dimana alamat itu akan dipasang di css.
css tersebut bisa dengan nama default.css, ya tergantung dengan nama yang diberikan oleh pembuat templates tersebut.
buka dan edit css anda. contoh dari pengeditan css sebagai berikut
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0px;
padding: 0;
background: #2E0815;
text-align: justify;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
h1, h2, h3 {
margin-top: 0;
}
h1 {
font-size: 1.6em;
font-weight: normal;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
}
a {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
#header-wrapper {
width: 100%;
height: 150px;
background: url(
images/img01.gif
<_text_>) repeat-x left top;
}
#header {
width: 960px;
margin: 0 auto;
height: 150px;
}
yang berwarna merah,itu yang harus di rubah
CONTOH<
hasil yang sudah edit seperti di bawah ini
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0px;
padding: 0;
background: #2E0815;
text-align: justify;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
h1, h2, h3 {
margin-top: 0;
}
h1 {
font-size: 1.6em;
font-weight: normal;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
}
a {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
#header-wrapper {
width: 100%;
height: 150px;
background: url(
http://goendhul.jw.lt/template/img01.gif
) repeat-x left top;
}
#header {
width: 960px;
margin: 0 auto;
height: 150px;
}
setelah selesai mengedit css nya. sekarang anda simpan dan mulai meng upload css kedalam folder yang khusus anda buat, contoh folder files
sekarang anda sudah mendapatkan alamat css anda sebagai contoh berikut:
http://username.domain/files/default.css
simpan dulu alamat itu
3. tahap ketiga (terakhir)
dalam tahap ini anda mulai melihat file index.html
sekarang saatnya mengedit tampilan yang akan keluar dihalaman situs wapsite anda, sebelum mulai melangkah kejenjang pengeditan menu-menu dalam situs wapsite. Anda kembali ke alamat css yang anda upload (tahap 2) tadi.
silahkan anda taruh didalam script pemanggil atau didalam script index.html. pertama anda buka index.html disana anda akan melihat code atau script yang saya sudah kasi contoh dibawah ini
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Majesticby Free CSS Templates</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><meta name="Majestic" content="" /><link href="default.css" rel="stylesheet" type="text/css" media="screen" /></head><body>
dan hasilnya aka seperti di bawah ini:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Majesticby Free CSS Templates</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><meta name="Majestic" content="" /><link href="
http://goendhul.jw.lt/files/
default.css" rel="stylesheet" type="text/css" media="screen" /></head><body>
*ya,g bercetak miring dan berwarna merah ubah dengan url kamu
setelah alamat css terpasang dengan benar,. sekarang mulai untuk mengedit seluruh isi dari index.html tersebut
CONTOH
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">FREE TEMPLATES CSS</a></h1>
<p>Designed By Free CSS Templates</p>
</div>
<div id="menu">
<ul>
<li><a href="#" class="current_page_item">Home</a></li>
<li><a href="#">Blog</a></li>
setelah di edit akan seperti dibawah ini:
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="http://goendhul.jw.lt">Goendhul</a></h1>
<p>Free Download,Servis,Tips&Trick</p>
</div>
<div id="menu">
<ul>
<li><a href="http://goendhul.jw.lt" class="current_page_item">Home</a></li>
<li><a href="http:goendhul.blogspot.com">Blog</a></li>
*dan seterusnya
setelah selesai mengedit seluruh script index.html anda bisa melakukan 2 cara:
* Dengan cara upload index.html ke hostingan
* Dengan cara mencopy seluruh script dan di paste di text editor
text editor tersebut seperti hostingan xtgem dengan cara :
* login di xtgem
* buka menu file browser dan cari file index.
* klick tanda [+] -> open to-> text editor.
* setelah text area editor muncul,hapus semua kode html di sana
* paste seluruh file index.html yang tadi
* save
silahkan berkreasi dan semoga berhasil
*Note :
Sebelum anda hapus seluruh script yang ada di file index.html baiknya anda simpan dulu,untuk jaga jaga kalau trik di atas tadi tidak berhasil anda bisa mengembalikan script yang disimpan tadi ke file index.html
"TRIK DI ATAS AKU KUTIP DARI
CYBERBALI.CO.CC
DENGAN AKU TAMBAHKAN SEDIKIT PENJELASAN AGAR LEBIH MUDAH DI PAHAMI,SEMOGA BERMANFAAT"
03.57
goendhul
