MENU

Web siteniz için 404 sayfası oluşturun.

Anasayfa » CSS / CSS3 » Web siteniz için 404 sayfası oluşturun.
Web siteniz için 404 sayfası oluşturun.

Web site sahipleri bu konuda çok özenliler. Büyük sitelerde bunların örneklerini çokça görüyoruz aslında hatta 404 sayfalarını şekillendiren güzel tasarımlar yapan web siteleride var.

Twitter’ın daha önceden 404 sayfaları için kuşlarla balina kaldırmalarını biliyoruz. Sizde bu tarz yada sade bir 404 sayfası oluşturabilirsiniz.

http://4.bp.blogspot.com/-U9xuj5wF9fY/T0_E__M-ZdI/AAAAAAAAF5Y/CgeG1WWeFNU/s1600/twitter-404-page.png

404 Sayfası oluşturmak

Aslında bunu oluşturmak kolay ancak bunu otomatik yönlendirme ile yapmayı bilmeyen çok arkadaşımız var .htaccess yardımı ile otomatik hatalı sayfaları yönlendiricez.

Dipnot: Hatalı linkleri bulmak ve 301 yönlendirme yapmak

Öncelikle hatalı sayfanın sadece 404 olmadığı belirtmek istiyorum. 400, 401, 403, 404, 500 bunlar web sayfanızın hatalı bağlantılarıdır bunlar için özel bağlantıları yönlendirmek için .htaccess dosyanıza alttakini yerleştirmeniz gerekiyor.

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/404.html
ErrorDocument 500 /errors/serverr.html

Elimde alttaki gibi hazır bir 404 sayfası var. Bunu kendi sitenize uyarlamayı anlatıcam. Ben türkçeleştirdim ancak indirdiğiniz dosyada hala ingilizce olabilir türkçeleştirmeyide anlatıcam.

http://1.bp.blogspot.com/-UtTJmb-P7OU/T0_Gm_Dg7kI/AAAAAAAAF5o/-lm6rH7r8ZY/s1600/404-hatali-linkler-rooteto1.jpg

Öncelikle htaccess dosyasına yukarıdaki söylediğim kodları ekleyin ve FTP Ana dizine alttaki dosyayı indirip errors klasörünü ftp ana dizine yükleyin.

Aşağıdaki kod 404 sayfasındaki görünen kısımdaki kodlar. Yani buradaki yazıları kendi 404 sayfanıza göre değiştirebilirsiniz. Metin editörünüz yoksa Notepad++‘yı kesinlikle kullanın.


<body>

<div class="wrapper">
  <div class="error_number">404</div>
  <div class="error_exp">
    <h1>Üzgünüm aradiginizi bulamadim.</h1>
  Lütfen ana sayfaya dönüp arama yapın. <a href="/">Ana Sayfa</a> </div>
</div>
</body>

Style.css içerisindeki kodlarda yazı tipi ve kullanılan 2 resimin dosya yolunu doğru girdiğinizden emin olun.


@font-face {
  font-family: KOMIKA;
  src: url(../fonts/KOMIKAX_.ttf);
}

body {
	background-image: url(../images/bg_repeat.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
}

.wrapper {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	min-height:542px;
	padding-top: 110px;
	background-image: url(../images/bg_highlight.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.