Berat Bozkurt İndex HTML CSS

14-12-2014, 10:36:01

Merhabalar, ne zamandır yazı yazmıyordum. Bu kez çoğu ziyaretçilerden duyduğum olan kelime Sitendeki İndex i nereden bulabilirim sorusu oluyordu. İlk görenlerin aklına Twitter gelebilir, gelmesi de normal. Çünkü oradan esinlendim ve kendime göre şekillendirdim diyebilirim. Size şuan sitemde de olan index in Html-Css şeklinde arşivleyip sizlere paylaşmayı düşünüyorum.

Vereceğim arşivi indirdikten sonra düzenlemeniz gereken olacaktır. Çünkü index i html ve css olarak kodladım. Php kodlamayı tam olarak bilmiyorum. Eğer bilseydim admin paneli yapacaktım. O yüzden admin paneli panelini yapamadım notepad++, sublime text vs gibi program ile düzenlemeniz gerekmektedir. Size düzenlemeniz gereken yerleri bir sonraki paragrafta veriyorum. Bir sonraki paragrafta dediğim yerleri kendinize göre düzenlerseniz. İstediğiniz gibi şekillenecektir.

1. Kapak Fotoğrafını Değiştirmek

style.css dosyamızı açtıyoruz

.kapak-foto{
background: url(images/kapak-foto.png);
width: 590px;
height: 195px;
}

Bu kodu bulduktan sonra url(images/kapak-foto.png); kalın ve altılı yazılan kısmına kapak fotoğrafına koymak istediğiniz resmi yerleştirebilirsiniz. Sadece dediğim yeri değiştirirseniz hiç bir sorun olmayacaktır.

2. Profil Resmini Değiştrmek

index.html dosyamızı açıyoruz

<div class="resim"><img src="http://*******.com/forum/images/resim.png"></div>
<div class="icerik-resim"><img src="http://*******.com/forum/images/resim.png"></div>

Bu kodu bulduktan sonra images/resim.png kısmına profil resmi olarak kullanmak istediğiniz resmin URL adresinizi yazdıktan sonra istediğiniz resim görülecektir. Sadece dediğim yeri değiştirirseniz hiç bir sorun olmayacaktır.

3. İsimleri değiştirmek

index.html dosyamızı açıyoruz

<div class="kim"></div>

bu tagımızın içindeki bilgileri kendinize göre düzenlersiniz. Diğer yazılan ismi de değiştirmek için aşağıdaki tagın içindeki yine kendinize göre düzenleyin.

<div class="icerik-isim"></div>

4. İçeriği Değiştirmek

index.html dosyamızı açıyoruz

<div class="aciklama"></div>
<div class="icerik"></div>
<div class="icerik-tarih"></div>

Bu kodları bulup teker teker içerisindeki yazıları kendinize göre düzenleyiniz.

5. Linkleri Düzenlemek

index.html dosyamızı açıyoruz

<div class="blog"><a href="http://www.beratbozkurt.net/blog"></div>
<div class="portfolyo"><a href="http://www.beratbozkurt.net/portfolyo"</div>

Kendinize göre düzenleyin.

<div class="iletisim">

içindeki linkleri ve e-mail adreslerini kendinize göre düzenleyin.

Dipnot: Alt tarafta yazan Berat Bozkurt ismini ve linkini kaldırmazsanız sevinirim.

Demo | İndir
Rar Şifresi : www.beratbozkurt.net

KAYNAK : http://www.beratbozkurt.net/blog/ber...-html-css.html

20-06-2015, 12:27:59

#2