Mengubah Tampilan Index di Apache/2.2.4
Di komputer saya menggunakan server local (localhost) dengan apache versi 2.2.4. Saya yakin di komputer anda juga pasti ada sebuah server local, apalagi bagi para web programmer. Namun kadang-kadang saya bosan juga dengan tampilan index yang akan muncul ketika kita ketikkan “localhost” di web browser kita. Tampilan itu kurang lebih seperti ini.
Mungkin bagi beberapa orang tampilan seperti diatas tidak berpengaruh atau biasa saja. Tapi bagi orang yang butuh suatu hal berbeda, atau mungkin juga untuk mengurangi kejenuhan saat membuka localhost, hal seperti itu sangat butuh perhatian.
Berawal dari situ, ada temen kost saya yang coba-coba membuat beberapa script untuk mengubah tampilan localhost. Saya pun ikut ngoprek-oprek, g’ mau kalah 
Langsung aja yach kita mulai :
1. Langkah pertama berdoa dulu , itu penting loh
2. Nah, yang kedua mulai cermat dikit. Kita cari lokasi file hasil instalasi appserv kita. Biasanya sih disini C:\AppServ\www
3. Udah ketemu kan? Selanjutnya kita buat sebuah folder dengan nama index_files , kemudian di paste di alamat tadi (C:\AppServ\www).
4. Kemudian bukalah notepad, kita buat halaman html. Saya beri contoh script html yang saya gunakan, silahkan dicoba.
<html><head>
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1″>
<link rel=”shortcut icon” href=”index_files/ico.gif” type=”image/x-icon” />
<link type=”text/css” rel=”stylesheet” href=”index_files/css.css”>
</head><body style=”background-color: black;”>
</body></html>
<br><font style =”color : #33FF55;”>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%<br>
<font size=4><blink>| androes server | 192.167.0.2 | Madina Workgroup |</blink></font><br>
<font size=4>
e-mail: androes@tekkomp-uns.com<br>
blog : androes.wordpress.com <br>
YM : andrey_ayyasha22<br></font>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%<br>
<a href=”http://192.167.0.2/index_files/androes.JPG” class=”tambah”>Author</a>
<a href=”http://192.167.0.2/_Shared_files/css_style.txt” class=”tambah”>CSS style</a>
<a href=”http://192.167.0.2/_Shared_files/html.txt” class=”tambah”>Html Support</a>
<a href=”http://192.167.0.2/_Shared_files/avg_Update/” class=”tambah”>update AVG</a>
<br style=”clear:both;”>
<a href=”http://192.167.0.111/CSS+AJAX” class=”tambah2″>CSS & Ajax</a>
<a href=”http://192.167.0.111/MODUL” class=”tambah2″>Modul</a>
<a href=”http://192.167.0.2/_Shared_files/wordpress_2.7″ class=”tambah2″>My Blog</a>
<a href=”http://192.167.02/_Shared_files/Joomla_1.5.3″ class=”tambah2″>News.COM</a>
</font>
5. Setelah selesai ngetik (kalau kelamaan ya di copy paste aja deh gpp 
), selanjutnya kita simpan script html tadi sebagai .html dengan nama readme di www pada appserv atau di C:\AppServ\www ……hehe,sama saja ya
6. Abis itu kita bikin CSS untuk melembutkan tampilan (haiiyah…. ). Contoh script yang saya gunakan seperti ini, karena saya baik silahkan dicopy
/* CSS Document */
a
{
color:#33FF55;
font-size:14px;
text-align:left;
text-decoration:none;
-moz-border-radius: 10px;
border:solid 2px #33FF55;
margin:0px 3px 8px 0px;
display:block;
}
td a
{
background:url(ico.png) no-repeat;
padding:2px 10px 3px 25px;
}
td a:hover
{
background:url(ico-hv.png) no-repeat;
}
a:hover
{
color:#33ff55;
border:solid 2px #ffffff;
}
h1
{
display:none;
}
td
{
font-size:14px;
padding:1px 2px 1px 2px ;
vertical-align:middle;
color:#33FF55;
}
tr
{
}
img
{
display:none;
}
table
{
border:solid 2px #33FF55;
-moz-border-radius: 20px;
padding:10px 10px 0px 10px;
margin-top:10px;
}
hr
{
border:solid 0px;
display:none;
}
th a
{
font-size:18px;
font-weight:normal;
padding:2px 10px 3px 10px;
}
th
{
padding-bottom:5px;
border-bottom:solid 2px #33FF55;
}
.tambah
{
color:#33FF55;
font-size:15px;
width:110px;
text-align:center;
padding:2px 3px 3px 3px;
margin:5px 5px 0px 0px;
float:left;
}
.tambah2
{
color:#33FF55;
font-size:15px;
width:110px;
text-align:center;
padding:2px 3px 3px 3px;
margin:5px 5px 5px 0px;
float:left;
}
.clear
{
clear:both;
}
7. Ingat, tadi kita sudah membuat folder index_files . Simpan script diatas sebagai .css dengan filename css ke dalam folder index_files (C:\AppServ\www\index_files).
8. Selain script html dan css diatas, kita tambahkan juga icon sebagai pemanis.
Icon tadi kita simpan bersama file css.css ke dalam folder index_files (C:\AppServ\www\index_files).
9. Sekarang kita buka browser kita, lalu ketik http://localhost
Silahkan nikmati perubahannya sambil tersenyum tentunya
10. Kalau anda kurang suka dengan background gelap seperti diatas silahkan ganti warnanya atau bisa juga memasukkan wallpaper kesayangan anda atau bahkan foto anda sendiri sebagai background halaman indexnya. Caranya kita tambahkan script pada file CSS yang tadi telah kita buat.
11. Buka kembali file css.css dengan notepad lalu tambahkan script berikut (jangan lupa di save sesudahnya):
body
{
background:url(vista1.jpg) repeat left top;
font-family:”Segoe UI”, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
}
Vista1.jpg merupakan nama file wallpaper yang kita gunakan. Jangan lupa untuk memasukkan file gambar/wallpaper yang kita pakai ke dalam folder index_files (C:\AppServ\www\index_files)
12. Kita kembali ke web browser, ketikkan lagi http://localhost
Lihat sekali lagi perbedaannya
Nah, wallpaper vista muncul sebagai background halaman index localhost kita.
Tambahan :
> Untuk tampilan maksimal saya sarankan menggunakan web browser Mozilla Firefox (pada contoh saya menggunakan firefox 3.0.5)
> Script diatas boleh dimodifikasi sesuai dengan keinginan anda, terutama untuk pemilihan warna font, line, dan ukurannya.
> Jika anda menginginkan tampilan tersebut disetiap directory, tinggal copy paste saja file readme.html dan folder index_files di dalam directory yang anda inginkan.
> Kalau sudah berhasil ucapkan “alhamdulillah” dan terimakasih pada saya dengan memberi comment di blog ini
Cari Uang, Bisnis 2009 2010
hehe….keren ui…nyoba yah..
matur nuwun….
klo diganti warna pink, jadinya gimana ya….
@mas rudi
nggih silahkan dicoba…semoga berhasil
@mbak onix
kalu warna pink gmn ya??jadi imut mungkin …. hihi