TeknoAnaliz | Teknoloji & Kişisel blog
Bedava-sitem ekstraları
TeknoAnaliz - Bedava-sitem ekstraları
Evet arkadaşlar dersimize başlayalım, ilk olarak hangisini geliştirelim? Ziyaretçi defteri mi? İletişim formu mu? Her neyse birinden başlayalım sonuç olarak ikisini de anlatıcağız. Ziyaretçi defterinden başlayalım.
-İlk olarak Bedava-sitem.com adresinden sitenize giriş yapıyorsunuz.
-Daha sonra Ekstralar bölümüne tıklıyorsunuz.
-Sonra oradan Ziyaretçi defteri'ni seçiyoruz.
-Girdikten sonra Ziyaretçi defterinden önceki metin' e kodlarımızı yazıcağız.
Başlamadan önce şunları belirteyim bilmeyenler olabilir. Küçük metin alanı veya butona "input", büyük yazı alanına ise textarea diyoruz.
Css kodlarımızı yazalım ve bunun için style etiketlerine ihtiyacımız var. Çünkü bir html komutundaki bir yere style etiketsiz yazarsanız eğer kodlar düz yazı olarak gözükecektir. Etiketlerimizi açıyoruz.
<style type="text/css">
Buraya özelliklerimizi yazıcağız.
</style>
Buraya özelliklerimizi yazıcağız.
</style>
Şimdi taglarımızı açtık kodlarımızı yazmaya başlıyoruz. Hover özelliğini kullanıcağız.
<style type="text/css">
input {
border: 1px solid #333; /* Kenarlık ekledik 1px kalınlığında çizgi ve gri renk. */
background-color: none; /* Arkaplan resmi yok dedim, isterseniz renk kodu ekleyebilirsiniz. */
}
input:hover {
background-color: #333; /* Arkaplanı kapalı gri yaptık. */
color: #fff; /* Yazıyı beyaz yaptık. */
border: 1px solid #333; /* Kenarlıkları arkaplanla aynı yaptık. */
}
textarea {
border: 1px solid #333; /* Kenarlık ekledik 1px kalınlığında çizgi ve gri renk. */
background-color: none; /* Arkaplan resmi yok dedim, isterseniz renk kodu ekleyebilirsiniz. */
}
textarea:hover {
background-color: #333; /* Arkaplanı kapalı gri yaptık. */
color: #fff; /* Yazıyı beyaz yaptık. */
border: 1px solid #333; /* Kenarlıkları arkaplanla aynı yaptık. */
}
.yorum {
width: auto; /*Genişliği otomatik yaptık. */
padding: 5px; /* İçlerden 5px büyüttük. */
background-color: #333; /* Arkaplanı kapalı gri yaptık. */
color: #fff; /* Yazıyı beyaz yaptık. */
font-style: italic; /* Yazıyı yatırdık. */
}
</style>
input {
border: 1px solid #333; /* Kenarlık ekledik 1px kalınlığında çizgi ve gri renk. */
background-color: none; /* Arkaplan resmi yok dedim, isterseniz renk kodu ekleyebilirsiniz. */
}
input:hover {
background-color: #333; /* Arkaplanı kapalı gri yaptık. */
color: #fff; /* Yazıyı beyaz yaptık. */
border: 1px solid #333; /* Kenarlıkları arkaplanla aynı yaptık. */
}
textarea {
border: 1px solid #333; /* Kenarlık ekledik 1px kalınlığında çizgi ve gri renk. */
background-color: none; /* Arkaplan resmi yok dedim, isterseniz renk kodu ekleyebilirsiniz. */
}
textarea:hover {
background-color: #333; /* Arkaplanı kapalı gri yaptık. */
color: #fff; /* Yazıyı beyaz yaptık. */
border: 1px solid #333; /* Kenarlıkları arkaplanla aynı yaptık. */
}
.yorum {
width: auto; /*Genişliği otomatik yaptık. */
padding: 5px; /* İçlerden 5px büyüttük. */
background-color: #333; /* Arkaplanı kapalı gri yaptık. */
color: #fff; /* Yazıyı beyaz yaptık. */
font-style: italic; /* Yazıyı yatırdık. */
}
</style>
Kodlarımızı yazdık. Şimdi diyeceksiniz .yorum nedir? Bende şöyle söyleyeyim. O sizin ziyaretçinize vereceğiniz cevabın stil özellikleri yazmamıza neden oluyor. İsterseniz adını değişitirin size kalmış. Şöyle yapıyoruz biri yorum yaptığında bizde ona geri döndüğümüzde yazımı şu şekilde yazıcağız.
<div class="yorum">Yorumunu buraya yazıyorsun</div>
Bu yazıyı kompile yorumununa yazın yoksa özellik çalışmaz. İletişim formu için ise aynı kurallar geçerli. Bu kodları iletişim formuna da uygulayabilirsiniz. Ayrıdan yazmama gerek yok, sadece .yorum stilini eklemeyin. Çünkü yorumluk bir olay yok ortada. İsterseniz siz özellikleri çoğaltabilirsiniz. Bir sonraki dersimizde görüşürüz.