Merhaba arkadaşlar,
Burada böyle bir konu görmedim bilhassa yeni sunucu açanların işine yarayacağını düşündüğüm için sunucu istatistikleri sayfası hazırladım.
Sayfa özellikleri,
CSS kodlarıyla bütünleştirilmiş,
CSS tasarımıyla kıvrımlı köşeler,
CSS kodlarıyla sayfanızın renklerine uygun veya düzeltilebilir,
Html tabanlı.
Yapmanız gereken tek şey spherestatusbasehtml'deki kodları alttaki kod ile değiştirin ve kaydedin.
Sayfa kodları (Html ve css);
Kod:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
#block-top{
width:365px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
background-color:#efefef;
padding:10px;
margin-bottom:20px
}
.imgcenter{
width:600px;
vertical-align:middle;
background-color:#2f2f2f;
margin-right:8px;
margin-top:10px;
margin:4px 5px 0px 4px;
}
.imgmiddle{
vertical-align:middle;
background-color:#2f2f2f;
margin-right:8px;
margin-top:10px;
margin:4px 5px 0px 4px;
}
.imgz{
width:575px;
vertical-align:left;
background-color:#2f2f2f;
margin-right:0px;
margin-top:10px;
margin:4px 4px 0px -2px;
}
.imgleft{
width:600px;
background-color:#efefef;
margin-bottom:10px;
margin-top:20px;
margin:4px 5px 0px 4px;
}
.imgright{
float:right;
margin:3px 0 18px 14px;
}
.imgicon{
float:left;
margin:4px 0 2px 6px;
}
.shadow{
padding:4px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
box-shadow:0px 0px 4px #afaeae;
-webkit-box-shadow:0px 0px 4px #afaeae;
-moz-box-shadow:0px 0px 4px #afaeae;
}
</style>
<body bgcolor="#020202" text="#FFFFFF" topmargin="0" leftmargin="5">
</font><font color="#5B86F7" size="1" face="Arial"><br>
<h3 class="imgcenter shadow"><center>Istatistikler her 5 dakikada bir güncellenmektedir. %RTIME%</center></h3>
</font></p>
<h3 class="imgleft shadow">
<table border="0" cellpadding="2" width="100%">
<tr>
<img src="http://www.elysia.gen.tr/dosyalar/icon.png" alt="" class="imgicon" /> <p align="middle"><font color="#2f2f2f" size="3" face="Arial">SUNUCU ISMINIZ <br>SUNUCU ISTATISTIKLERI</font></p>
<td nowrap width="5%"><h3 class="imgmiddle shadow"><font face="Arial" size="2"><b>Aktif Npc</b></h3></font></td>
<td width="95%"><font color="efefef" face="Arial" size="2"><h3 class="imgmiddle shadow">%CHARS%</td></font></h3>
</tr>
<tr>
<td nowrap width="5%"><h3 class="imgmiddle shadow"><font face="Arial" size="2"><b>Aktif Esya</b></h3></font></td>
<td width="95%"><font color="efefef" face="Arial" size="2"><h3 class="imgmiddle shadow">%ITEMS%</font></td></h3>
</tr>
<tr>
<td nowrap width="5%"><h3 class="imgmiddle shadow"><font face="Arial" size="2"><b>Aktif Loncalar</b></h3></font></code></td>
<td width="95%"><font color="efefef" face="Arial" size="2"><h3 class="imgmiddle shadow">%GUILDS%</font></td></h3>
</tr>
<tr>
<td nowrap width="5%"><h3 class="imgmiddle shadow"><font face="Arial" size="2"><b>Online Oyuncu</b></h3></font></td>
<td width="95%"><font color="efefef" face="Arial" size="2"><h3 class="imgmiddle shadow">%CLIENTS%</font></td></h3>
</tr>
<tr>
<td nowrap width="5%"><h3 class="imgmiddle shadow"><font face="Arial" size="2"><b>Kullanilan Bellek</b></h3></font></td>
<td width="95%"><font color="efefef" face="Arial" size="2"><h3 class="imgmiddle shadow">%MEM%</font></td></h3>
</tr>
<tr>
<td width="5%"></td>
<td width="95%"></td>
</tr>
</table>
</div>
<div id="block-top">
<h3 class="imgz shadow">
<table border="0" cellpadding="2" width="100%">
<tr>
<td nowrap ><font color="FFFFFF" face="Arial" size="2"><strong><b>Aktif Oyuncular<b></strong></font></td>
</tr>
<font color="020202"><script language="Sphere"><tr %LISTCOL%><td>%NAME%</td><td><font color="020202">%REGION.NAME%</td></tr></script></font>
</h3>
</div>
</table>
</div>
</body>
</html>
Sayfanın görünümü :
Tıklayın
Sayfanın demosu :
Tıklayın
Arkaplan rengini değiştirmek için;
Kod:
</style>
<body bgcolor="#020202" text="#FFFFFF" topmargin="0" leftmargin="5">
Buradaki ''#020202'' değerini kendinize göre ayarlıyorsunuz.
Ortadaki css kutularının rengini değiştirmek için;
Kod:
.imgleft{
background-color:#efefef;
Bu değerdeki css kodlarını yani ''<style..'' diye başlayak ve ''</style>'' değeri ile biten aradaki kodların renk değerlerini ayarlayabilirsiniz.
Sayfa genişliğini değiştirmek için;
Kod:
width:600px;
Bu değeri aratıyoruz ve kendimize göre düzenliyoruz.
Yaptığınız web sayfasının içine almak istiyorsanız eğer,
Kod:
<iframe name="frame_ismii" src="SPHERE IP ADRESINIZ" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="700" height="1000"></iframe>
Bu kodu istatistik için açtığınız sayfaya koyabilirsiniz.
Sol köşedeki resimi değiştirmek için sayfada ''icon.png'' uzantısını ayarlayabilirsiniz.
Ben sizin için şimdilik ftp den gösterdim yolunu.Kaydedip kendi ftp sunucunuza atabilirsiniz.
Umarım yardımcı olabilmişimdir.
Güle güle kullanın.
Sevgiler.