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.
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.
Ö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.
Ö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.
- Dosyaları indirin: 404 page creator
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; }