Untuk membuat website dengan template CSS kita memerlukan sebuah teks editor untuk mengedit script dan browser untuk melihat preview hasil template CSS yang sudah diedit. Yang perlu diperhatikan disini adalah kita harus menyimpan setiap perubahan script pada template sebelum melihat preview hasilnya pada browser.
Persiapan
Sebelum melakukan langkah-langkah membuat website dengan template CSS kita harus mempersiapkan hal-hal berikut ini :
-Pastikan kita telah mendownload file template dalam format ZIP disini.
-Ekstrak file ZIP pada sebuah folder.
Silahkan buka file index.html hasil ekstrak file ZIP tadi menggunakan teks editor, caranya ----misal klik kanan open with Geany.
-Kemudian buka file index.html yang sama ----pada browser, caranya misal klik kanan open with Google Chrome.
Untuk contoh kasus berikut ini kita akan membuat website distributor pulsa elektrik.
Mengganti Title
Title adalah keterangan teks yang muncul pada header window browser. Title ini biasanya merupakan judul artikel dan atau nama website.
Untuk mengganti title kita cari kata title menggunakan tool Find. Kemudian ganti teks yang ada diantara tag <title> dan </title> seperti contoh berikut ini :
Sebelumnya :
<title>Compromise by Free CSS Templates</title>
Menjadi :
<title>Distributor Pulsa Elektrik Jawa Tengah</title>
Mengganti Header
Header adalah informasi yang tampil pada bagian atas halaman website. Header ini berupa nama website dan atau logo website. Selain itu header juga bisa diisi dengan tag line website.
Untuk mengganti header kita cari kata header didalam tag body. Jika kesulitan bisa menggunakan tool Find. Kemudian ganti teks yang ada diantara tag <div id="header"> dan </div> seperti contoh berikut ini :
Sebelumnya :
<div id="header">
<div id="logo">
<h1><a href="#">Compromise </a></h1>
<p> design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
</div>
</div>
Menjadi :
<div id="header">
<div id="logo">
<h1><a href="nama website kita">Nama Website</a></h1>
<p> Nomor 1 <a href="nama website kita">Distributor Pulsa Elektrik Jawa Tengah</a></p>
</div>
</div>
Mengganti Menu
Menu adalah alat navigasi yang berupa link ke halaman-halaman yang ada pada website. Menu mirip dengan shortcut pada desktop komputer yang berfungsi sebagai jalan pintas membuka sebuah halaman website. Yang perlu diperhatikan adalah, pastikan kita membuat semua halaman yang dituju oleh link pada menu agar menu tidak error ketika di klik.
Untuk mengganti menu kita cari kata menu dibawah header. Jika kesulitan juga bisa menggunakan tool Find. Kemudian ganti teks yang ada diantara tag <div id="menu"> dan </div> seperti contoh berikut ini :
Sebelumnya :
<div id="menu">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Menjadi :
<div id="menu">
<ul>
<li class="first"><a href="nama website kita">Home</a></li>
<li><a href="produk.html">Produk</a></li>
<li><a href="transaksi.html">Transaksi</a></li>
<li><a href="deposit.html">Deposit</a></li>
<li><a href="pendaftaran.html">Pendaftaran</a></li>
<li><a href="tentangkami.html">Tentang Kami</a></li>
</ul>
</div>
Mengganti Isi atau Konten (content)
Isi merupakan meteri utama sebuah website. Isi ini biasanya berupa uraian teks yang agak panjang dan merupakan penjelasan dari website atau produk kita. Isi website biasanya disebut juga dengan content. Didalam isi website dapat dibagi menjadi beberapa bagian misalnya judul artikel/title (tapi berbeda dengan title pada head tadi) dan uraian artikel/post.
Untuk mengganti isi kita cari kata content yang ada dibawah menu tadi. Jika kesulitan juga bisa menggunakan tool Find lagi. Kemudian ganti teks yang ada diantara tag <div id="content"> dan </div> seperti contoh berikut ini :
Sebelumnya :
<div class="post">
<h1 class="title"><a href="#">Welcome to Compromise </a></h1>
<div class="entry">
<p>This is ...
</p>
</div>
<p class="meta">Posted by <a href="#">Someone</a> on March 10, 2008
• <a href="#" class="comments">Comments (64)</a>
• <a href="#" class="permalink">Full article</a></p>
</div>
Menjadi :
<div class="post">
<h1 class="title"><a href="nama website kita">Selamat Datang di Nama Website Kita </a></h1>
<div class="entry">
<p>Website kita adalah ...dan seterusnya
</p>
</div>
<p class="meta">
Ditulis oleh <a href="nama website kita">Nama Pemilik</a> pada 28 Januari 2015
</p>
</div>
Mengganti Sidebar
Sidebar adalah ruang yang biasa berada disisi artikel. Biasanya ada beberapa pilihan sidebar, misalnya sebelah kiri saja, sebelah kanan saja atau dobel di kiri dan kanan. Jumlah sidebar pun bermacam-macam tergantung pemilik. Khusus pada template compromise ini jumlah sidebarnya ada satu disebelah kiri.
Sidebar bisa kita isi dengan beberapa informasi seperti rekening bank transfer, statistik kunjungan, profil pemilik website dan lain-lain.
Untuk mengganti isi kita cari kata sidebar yang ada dibawah content. Jika kesulitan silahkan gunakan tool Find saja lagi. Kemudian ganti teks yang ada diantara tag <div id="sidebar"> dan </div> seperti contoh berikut ini :
Sebelumnya :
<div id="sidebar">
<ul>
<li>
<h2>Aliquam tempus</h2>
<p>Mauris ... dan seterusnya</p>
</li>
.......
</ul>
</div>
Menjadi :
<div id="sidebar">
<ul>
<li>
<h2>Rekening Bank</h2>
<p>Rekening BCA...</p>
<p>Rekening BNI...</p>
</li>
.......
</ul>
</div>
Mengganti Footer
Footer adalah bagian paling bawah halaman website. Footer ini biasanya berisi informasi tentang hak cipta website, designer website, designer template dan sebagainnya. Khusus untuk template CSS gratis sebaiknya tidak menghilangkan kredit nama pembuat template seperti www.freecsstemplates.org atau www.templated.co.
Untuk mengganti isi kita cari kata footer yang ada dibagian paling bawah. Jika kesulitan silahkan gunakan tool Find saja lagi. Kemudian ganti teks yang ada diantara tag <div id="footer"> dan </div> seperti contoh berikut ini :
Sebelumnya :
<div id="footer">
<p>Copyright (c) 2008 Sitename.com. All rights reserved.
Design by
<a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.
</p>
</div>
Menjadi :
<div id="footer">
<p>Copyright (c) 2015 nama Website. All rights reserved.
Design by
<a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.
</p>
</div>
0 komentar:
Posting Komentar