"Css Template" , inilah yang mungkin akan membuat halaman web kamu akan lebih terlihat indah,cantik dan lebih menarik. Mulanya saya juga masih pusing dengan apa yang namanya css template dan bagaimana cara membuatnya. Semua web yang memuat artikel tentang ini pun aku jelajahi, namun demikian masih saja belum ngerti alias blank.Karena banyaknya web yang telah aku jelajahi, akhirnya aku tarik kesimpulan dan hasilnya web ku pun berubah dengan tampilan css template seperti yang sekarang ini. Nah.... kali ini saya ingin berbagi pengalaman tentang bagaimana cara meng-edit halaman dengan css template di wen.ru.
Ketika kamu buka default.css akan tampilan sebagai berikut;
Pertama
Download css template yang masih berbentu file zip disini. Untuk pertama kali cobalah dengan css template dengan tampilan yang yang sederhana, agar kamu mudah untuk mengedit file html nya.
Download css template yang masih berbentu file zip disini. Untuk pertama kali cobalah dengan css template dengan tampilan yang yang sederhana, agar kamu mudah untuk mengedit file html nya.
Kedua
Biar kamu tidak merasa bingung dan mudah untuk memberikan gambaran, kami sarankan lakukan edit pada sebuah komputer. Ekstrak tema yang telah kamu pilih tadi dan hasilnya ada 4 file yaitu; css,lisensi.txt, images danindex.html. Setelah itu buatlah sebuah folder di wen.ru dengan menamainya sesuai dengan nama tema yang kamu pilih, "sunflower" misalnya. Kemudian Upload file css ( biasanya dinamai "default.css" atau style.css), lisensi.text. Untuk mengupload images ke wen.ru kamu harus buat dulu folder didalam folder "sunflower" tadi dengan menamainya "images" lalu gambar atau foto dari images hasil ekstrak diatas kamu upload satu-persatu ke dalam folder images yg telah kamu buat pada folder "sunflower" pada wen.ru. Untuk " index.html" nya tidak perlu diupload.
Biar kamu tidak merasa bingung dan mudah untuk memberikan gambaran, kami sarankan lakukan edit pada sebuah komputer. Ekstrak tema yang telah kamu pilih tadi dan hasilnya ada 4 file yaitu; css,lisensi.txt, images danindex.html. Setelah itu buatlah sebuah folder di wen.ru dengan menamainya sesuai dengan nama tema yang kamu pilih, "sunflower" misalnya. Kemudian Upload file css ( biasanya dinamai "default.css" atau style.css), lisensi.text. Untuk mengupload images ke wen.ru kamu harus buat dulu folder didalam folder "sunflower" tadi dengan menamainya "images" lalu gambar atau foto dari images hasil ekstrak diatas kamu upload satu-persatu ke dalam folder images yg telah kamu buat pada folder "sunflower" pada wen.ru. Untuk " index.html" nya tidak perlu diupload.
Ketiga
Untuk mengedit css mulailah dengan membuka file images lalu perhatian dimana images tersebut tersimpan ( alamat url images ). Sebagai contoh css template yang kamu pilih adalah "sunflower".css template. Dan alamat url dari images-nya adalah sebagai berikut;
Untuk mengedit css mulailah dengan membuka file images lalu perhatian dimana images tersebut tersimpan ( alamat url images ). Sebagai contoh css template yang kamu pilih adalah "sunflower".css template. Dan alamat url dari images-nya adalah sebagai berikut;
- http://apa-maumu.wen.ru/sunflower/images/img.01.gif
- http://apa-maumu.wen.ru/sunflower/images/img.02.jpg
Keempat
Langkah selanjutnya adalah adalah "meng-edit CSS". Buka atau klik file default.css atau style.css lalu buka kembali dengan fulltext editor wen.ru perhatikan kembali dimana alamat url default.css atau style.css tersebut berada, contoh;
Langkah selanjutnya adalah adalah "meng-edit CSS". Buka atau klik file default.css atau style.css lalu buka kembali dengan fulltext editor wen.ru perhatikan kembali dimana alamat url default.css atau style.css tersebut berada, contoh;
- http://apa-maumu.wen.ru/sunflower/sunflower/default.css
- http://apa-maumu.wen.ru/sunflower/sunflower/style.css
Ketika kamu buka default.css akan tampilan sebagai berikut;
#header {Lalu masukkan alamat url images hingga menjadi seperti ini.....
width: 680px;
margin: 0 auto;
padding: 0 0 0 0;
background: url(http://images/img01.gif) no-repeat 74px 18px;
}
#header {
width: 680px;
margin: 0 auto;
padding: 0 0 0 0;
background: url(http://apa-maumu.wen.ru/sunflower/images/img.01.gif) no-repeat 74px 18px;
Kelima
Setelah selesai "meng-edit CSS", langkah berikutnya adalah "meng-edit index.html". Buka atau klik file "index.html" hasil ekstrak tema diatas, dan kamu bisa memulai pengeditan dengan cara menggantikan atau menambahkan dari html yang ada. Sebaiknya mulailah dari tag html yang paling atas yaitu tag meta keyword, discription, title dan seterusnya hingga tag body. Dan satu hal yang teramat penting yaitu jangan sampai kamu kelewat untuk meng edit "TAG CSS", Isikan alamat url dari css pada tag css tersebut, contoh;
Setelah selesai "meng-edit CSS", langkah berikutnya adalah "meng-edit index.html". Buka atau klik file "index.html" hasil ekstrak tema diatas, dan kamu bisa memulai pengeditan dengan cara menggantikan atau menambahkan dari html yang ada. Sebaiknya mulailah dari tag html yang paling atas yaitu tag meta keyword, discription, title dan seterusnya hingga tag body. Dan satu hal yang teramat penting yaitu jangan sampai kamu kelewat untuk meng edit "TAG CSS", Isikan alamat url dari css pada tag css tersebut, contoh;
<link href="default.css" rel="stylesheet" type="text/css" />
lalu edit menjadi seperti ini ...
<link href="http://apa-maumu.wen.ru/sunflower/default.css" rel="stylesheet" type="text/css" />
Setelah pengeditan "index.html" kamu rasa cukup,termasuk isi atau tulisan dari "index.html" telah sesuai dengan yang kamu kehendaki, kemudian copy lau paste pada "index.html" di wen.ru dimana ini akan merupakan halaman muka atau index dari website kamu (http://apa-maumu.wen.ru/
Untuk membuat halaman file dari website kamu (http://apa-maumu.wen.ru/template-css.html) misalnya, langkahnyapun tidak berbeda cuma tag title, diskripsi dan sebagainya demikian isi dari file tersebut tentunya yang perlu kamu rubah. Apabila serangkaian proses yang kamu buat semuanya benar, maka hasilnyapun akan tampak persis seperti contoh css template yang kamu pilih.
Untuk membuat halaman file dari website kamu (http://apa-maumu.wen.ru/template-css.html) misalnya, langkahnyapun tidak berbeda cuma tag title, diskripsi dan sebagainya demikian isi dari file tersebut tentunya yang perlu kamu rubah. Apabila serangkaian proses yang kamu buat semuanya benar, maka hasilnyapun akan tampak persis seperti contoh css template yang kamu pilih.
