Tutorial Membuat Website Seperti Kartu Nama

Setelah melihat beberapa contoh trend website seperti kartu nama pada artikel sebelumnya, maka kali ini akan membahas bagaimana cara membuatnya.

Caranya gampang sekali. Tadi malam, saat mengintip di Wall of Fame karena ada email bahwa web mini saya terfitur disana, diantara puluhan web yang terfitur lainnya ada salah satu yang memberikan template XHTML dan CSS plus script gratis yang khusus untuk membuat web seperti kartu nama. Blog itu milik mas Gillbert Pellegrom.

Ya, dia memberikan template gratis itu lewat artikel ini dan bisa di download disini (MiniProfile.zip) serta demonya ada disini. Isi file MiniProfile.zip adalah ini :

• DOCS
• PSD
• images
• scripts
• styles
• index.html

Yang harus di upload ke server hanya folder : images, scripts, styles. Dan file : index.html saja.

Langsung saja, langkah demi langkahnya :

Edit File index.html

Saya asumsikan Anda sudah bisa mengupload dan mengekstrak file MiniProfile.zip di server. Setelah ter-ekstrak, buka file index.html. Pada file itu yang harus Anda ganti :
Mengganti judul web

Cari kode :

<title>Mini Profile</title>

Ganti dengan :

<title>Nama Anda</title>

Mengganti judul header :

Cari kode :

<h1>Mini Profile</h1>

Ganti dengan :

<h1>Om Ipit</h1>

Mengganti Style warna :

Template tersebut punya 3 style warna, yaitu : Dark, Light dan Blue. Maka untuk mengganti style warna, Anda harus mengganti dark.css dengan blue.css atau light.css. Contoh :

<link rel="stylesheet" href="styles/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/blue.css" type="text/css" media="screen" />

Mengganti Data Setiap Panel

Karena template itu hasil download gratis, maka contoh data yang tampil masih punyanya mas Gillbert. Jadi harus diganti dengan data Anda sendiri. Untuk mengubah data tersebut, tinggal ganti teksnya saja. Bisa dilihat pada gambar di bawah :

Nah, setelah selesai mengedit, simpan lalu test.

Hasil modif

Untuk contoh template hasil modif bisa di download disini atau juga lihat demonya.

Artikel Terkait

• Merancang Desain Website Seperti Kartu Nama - Jurus Grafis
• Tutorial Desain Website Format Kartu Nama Dengan 960 Grid System - Visual Magz