Belajar Membuat Template CSS

by Tomo koeswoyo on 06:39 PM, 03-Jul-14


Download

"Css Template " , inilah yang mungkin akan membuat halaman web atau blog kamu lebih terlihat indah dan menarik. Mulanya saya juga masih pusing dengan apa yang namanya css template dan bagaimana cara membuat template css. Semua web yang memuat artikel tentang ini pun aku jelajahi, namun demikian masih saja belum ngerti alias blank. Tapi lama kelamaan pelan-pelan akhirnya paham juga. Nah.... kali ini saya ingin berbagi pengalaman tentang belajar cara membuat halaman web dengan css template.

Pertama
Untuk membuat template css langkah pertama adalah download css template yang masih berbentu file zip disini. Untuk pertama kali cobalah dengan css template dengan tampilan yang yang sederhana, agar nanti kamu mudah untuk mengedit "file html"-nya. Ekstrak tema yang telah kamu pilih tadi hingga hasilnya akan menjadi 4 file yaitu; css, lisensi.txt, folder images dan index.html.

Kedua
Langkah selanjutnya dari cara membuat template css ini adalah masuklah ke situs atau wapsite kamu ( saya ambil contoh di wen.ru, sebuah situs gratis dari rusia ). Sebagai contoh pula nama wapsite kamu di wen.ru adala http://apa-maumu.wen.ru. Lalu buka wexplorer, buatlah folder dengan menamainya sesuai dengan nama tema yang telah kamu pilih, misalnya nama tema yang kamu pilih adalah sunflower. Kemudian Upload file berbentuk css. Biasanya dinamai file css ini dinamai "default.css" atau " style.css ". Dalam contoh ini file css-nya adalah "style.css". Setelah style.css ini diupload berikutnya adalah dan "lisensi.text" ( file ini hanya menunjukkan bahwa tema yang kita pakai adalah atas lisensi si pembuat ). Tak ketinggalan pula images. Untuk meng-upload images ini buatlah folder didalam folder sunflower dengan menamainya "images". Buka folderimages tersebut lalu upload file-file yang berupa gambar didalam folder images hasil ekstrak tadi. Mungkin kamu bertanya "kenapa folder images hasil ekstrak tidak langsung diupload aja ?? Menurut pengalaman cara langsung tidak akan berhasil, file harus dipecah-pecah terlebih dahulu walaupun pada akhirnya file yang berupa gambar tadi akhirnya diletakan pada folder images, persis sama dengan hasil dari ekstrak tadi. Sebagai gambaran file hasil ekstak tadi akan beralamatkan sbb:

  1. Alamat dari folder tema adalah : http://apa-maumu.wen.ru/sunflower
  2. Alamat dari file css tema adalah : http://apa-maumu.wen.ru/sunflower/style.css
  3. Alamat dari folder images tema adalah : http://apa-maumu.wen.ru/sunflower/images
  4. Alamat dari gambar-gambar yang berada dalam folder images tema adalah : http://apa-maumu.wen.ru/sunflower/images/img_01.jpg
    http://apa-maumu.wen.ru/sunflower/images/img_02.jpg
    http://apa-maumu.wen.ru/sunflower/images/img_03.jpg dan seterusnya.

Ketiga
Langkah ketiga dari cara membuat template css ini adalah meng-edit file "css". Pada langkah edit "css" ini hanyalah memberikan atau melengkapi sebuah alamat url gambar-gambar yang ada pada file css tersebut. Buka style.css" dengan fulltex editor lalu edit seperti contoh berikut;

#header {
width: 680px;
margin: 0 auto;
padding: 0 0 0 0;
background: url(http://images/img_01.jpg) no-repeat 74px 18px;
}

Lalu masukkan alamat url images hingga menjadi seperti ini.....

#header
{
width: 680px;
margin: 0 auto;
padding: 0 0 0 0;
background: url(http://apa-maumu.wen.ru/sunflower/images/img_01.jpg) no-repeat 74px 18px;
}

Dan seterusnya hingga semua gambar yang berada di style.css semuanya telah diberikan alamat url, kemudian klik save atau simpan.

Keempat
Langkah keempat dari cara membuat template css ini adalah meng-edit file "html". Buat kembali wExplore, kemudian buatlah file yang berformatkan html dan namai file tersebut dengan index. ketika telah selesai buka file index tersebut dengan fulltexeditor lalu clear-kan semua. Disisi lain buka juga file html hasil ekstrak tadi dengan notepad. Cari yang tulisan seperti berikut:

<link href="style.css" rel="stylesheet" type="text/css"/>

lalu edit menjadi seperti ini ...

<link href="http://apa-maumu.wen.ru/sunflower/style.css" rel="stylesheet" type="text/css" />

Jika telah selesai, copy notepad html itu dan paste-kan ke fulltexeditor yang telah diclearkan tadi. Setelalah itu klik save atau simpan. Nah... sekarang satu dari file kamu (index) telah selesai dibuat. Untuk melihat hasilnya lihat lalu klik diatas fulltexeditor tadi yang ada tulisan-link "File /index.html was successfully saved".

Apakah tulisan ini bermanfaat buat anda...? Kalau "YA" jangan lupa mohon partisipasinya untuk share ;


This June use AF15JUN Get 15% Off - Rp 350.00 minimum spend. Shop Now On ZALORA

KEYWORD FOR THIS PAGE
Cara membuat template css, cara membuat tema website, membuat tema untuk wapsite,bagaiman cara memasang atau membuat tema untuk website

" Mudahnya dapatkan uang dari internet melalui idsurvei yang tebukti membayar ". Cuma isi survei dibayar Rp 2.000,-, sehari bisa survei 100 data berarti dapat Rp 200.000,-, coba aja: >>survei<<

Guestbook

Contact Us

Artikel Seputar Facebook

Internet Access

Web Of Development

Software & Application

Lain-lain

Hobby - Mancing mania

Bisnis-Online

Link Patner


Download

Create site!