Wednesday, January 28, 2015

Cara Membuat Website Dengan Template CSS

Salah satu cara mudah dalam membuat website adalah dengan menggunakan template CSS. Dengan cara ini kita tidak perlu membuat desain website dari awal dan hany aperlu mengubah isi dan beberapa tampilan pada template CSS. Untuk memperileh template CSS yang gratis kita bisa cari di google dengan kata kunci template css gratis atau fee css template.

Apa itu Template CSS ?

Template CSS adalah sebuah pola website jadi yang berupa file index.html lengkap dengan tampilan dan file CSS-nya. CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut.

Salah satu situs yang menyediakan banyak template CSS gratis adalah www.freecsstemplates.org atau yang kini telah diforward ke situ www.templated.co. Ada banyak sekali pilihan template yang bisa didownload dan digunakan secara gratis. Untuk melihat demo dan detail template, kita bisa klik pada template dan akan tampak halaman live preview. Kemudian pada halaman preview tersebut kita bisa langsung klik icon download yang berisi link untuk mendownload template.

Berikut ini screenshot dari situs www.templated.co :

screenshot tampilan www.templated.co

Dan untuk contoh belajar membuat website kita pilih salah satu template, yaitu compromise. Template ini tampak sederhana namun sudah memenuhi unsur-unsur standar tampilan website seperti header, menu, isi, sidabar dan footer.

Berikut ini screenshot dari template compromise dari www.templated.co :

screenshot template compromise

Membuat website dengan Template CSS

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 :
  1. Pastikan kita telah mendownload file template dalam format ZIP disini.
  2. Ekstrak file ZIP pada sebuah folder.
  3. Silahkan buka file index.html hasil ekstrak file ZIP tadi menggunakan teks editor, caranya misal klik kanan open with Geany.
  4. Kemudian buka file index.html yang sama pada browser, caranya misal klik kanan open with Google Chrome.
  5. 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  
    &nbsp;&bull;&nbsp; <a href="#" class="comments">Comments (64)</a> 
    &nbsp;&bull;&nbsp; <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>  

2 komentar:

  1. Gan ini disimpan dalm bentuk file .css atau .html?

    ane udah coba, gak bisa. tetap dalam index yg agan sudurh download tu.

    ReplyDelete
  2. mantap , tinggal edit dit dikit biar lebih responsive

    ReplyDelete