22 Nisan 2012 Pazar

Özel 404 Hata Sayfası Oluşturun

17 yorum

Geçtiğimiz günlerde yazdığım Yeni Arama Tercihleri İle Blogger’da SEO Daha Kolay başlıklı yazıda Blogger’ın sunduğu yeni ayarlardan bahsetmiştim.Bunlardan biri 404 hata sayfalarını özelleştirebilmemizdi.Bir kullanıcı blogunuzda sdaha önce slinmiş bir yazıya ulaşmak istediğinde veya hatalı bir URL yazarak sayfalarınızdan birine ulaşmak istediğinde sayfanın bulunamadığını belirten bir hata sayfası ile karşılaşır.İsterseniz Blogger’ın klasik hata sayfasını aşağıda resimde gördüğünüz şekilde özelleştirebilirsiniz.

 

Özel 404 Hata Sayfası Oluşturun

 

1.Adım: Öncelikle şablonunuzun ]]></b:skin> kodundan önce aşağıdaki stil kodlarını ekleyin.

 

#error {
background-color: #F2F2F2;
background-image: url('https://lh6.googleusercontent.com/-3twSg0hv6D0/T3YURiR5l4I/AAAAAAAACkQ/2paB93_TdBU/s200/bg_ku.png');
background-repeat: repeat;
color: #555555;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999;
line-height: 170%;
}
#error #halaman {
position: relative;
height: auto !important;
height: 100%;
min-height: 99%;
}
#error #halaman h2 {
margin: 1em 0;
}


#error #wadah {
margin-top: 120px;
}
#error .tengah {
margin: 0 auto;
width: 920px;
}
#error .box-atas, #error .box-bawah {
background-image: url('https://lh3.googleusercontent.com/--nADEMK3ZnY/T3YURasj1xI/AAAAAAAACkM/M_5UVVfhaoc/s944/box-sprite.png');
background-repeat: repeat;
background-position: 0 0;
height: 43px;
margin: 0 -12px;
width: 944px;
}
#error .box-atas {
background-image: url('https://lh3.googleusercontent.com/--nADEMK3ZnY/T3YURasj1xI/AAAAAAAACkM/M_5UVVfhaoc/s944/box-sprite.png');
background-repeat: no-repeat;
background-position: 0 -43px;
}
#error .box {
background-image: url('https://lh3.googleusercontent.com/-iV6QwOq_Qx4/T3YURUnHTvI/AAAAAAAACkI/TRDC-sRWYkU/s920/box-horizontal.png');
background-repeat: repeat-y;
background-position: 0 0;
min-height: 200px;
padding: 10px 50px;
}

 

2.Adım: Şimdi Ayarlar > Arama tercihleri > Sayfa Bulunamadı Sayfası İçin Özel İçerik > Düzenle diyerek kutuya aşağıdaki kodları kendinize göre düzenleyerek ekleyin ve değişiklikleri kaydedin.

 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<h1>SAYFA BULUNAMADI !</h1>
<div id="error">
<div id="wadah">
  <div class="tengah">
   <div class="box-atas"></div>
   <div class="box">
    <div id="halaman">
    <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="https://lh4.googleusercontent.com/-SoPLi3coIkw/T2t5wY036TI/AAAAAAAACdg/GYNr7YyR9Ik/s350/4041.jpg" /></p>
     <p>Ulaşmaya çalıştığınız sayfa bulunamadı.Lütfen ulaşmak istediğiniz sayfanın adresini doğru yazdığınızı kontrol edin.Eğer adresi doğru yazdığınızdan eminseniz ulaşmak istediğiniz sayfa silinmiş olabilir.  </p>
     <p> <h2><a href="http://bloghocam.blogspot.com/" title="Blog Hocam" >Ana Sayfa</a></h2></p>
    </div>
   </div>
   <div class="box-bawah"></div>
  </div>
</div>
</div>

</b:if>

 

Şimdi blogunuzda var olmayan her hangi bir sayfaya gitmye çalışın.Örneğin:

 

http://blogunuz.blogspot.com/laylaylom.html

 

Eski hata mesajının yerine tam ekran bir hata mesajı sayfası karşınıa çıkacaktır.Bu yöntemle çok daha yaratıcı hata sayfaları oluşturabilirsiniz.

17 yorum:

  1. paylaşım için teşekürler.

    YanıtlaSil
  2. paylaşım için teşekkürler Serdar BEY
    bloguma uyguladım fakat hata sayfası için çok büyük görünüyor.daha doğrusu hata resminin bir kısmı çıkıyor. diğer kısımları gözükmüyor.aşağıdaki ekran görüntüsünde sadece kırmızı ile çizdiğim alanda gözüküyor.bir çözümü varmı?
    http://2.bp.blogspot.com/-QhG30fb5Xi0/T5WrWd03SSI/AAAAAAAACwE/PsKkQBGgfOY/s1600/ScreenShot001.png

    YanıtlaSil
  3. @Bahadır Çelik
    Uyardığınız çok iyi oldu, kodları eksik yazmışım.Amacım tüm sidebar, footer, header öğelerini saklayıp hata sayfalarını tam sayfa yapmaktı.2.adımdaki kodları güncelledim.Tekrar denerseniz resimdeki görüntüyü elde edeceğinizi tahmin ediyorum.

    YanıtlaSil
  4. sanırım temadan kaynaklanan bir problem var.diğer blogumda düzgün çalışıyor.İlgin için teşekkürler Serdar BEY :)

    YanıtlaSil
  5. Paylaşım için teşekkürler Serdar Abicim.sitemde uyguladım fakat menüler ve ust cubuk hala gözkmekte ve tm ortalamamakta.birde mozilla firefoxta düzgün çalışmıyor.acaba bir yardımcı olabilirmsin abicim . bu şekilde oluyor . http://2.bp.blogspot.com/-3KKJoes6BDc/T5aZPP2dPyI/AAAAAAAAAes/RAs5eEijKqw/s320/hataa.jpg

    YanıtlaSil
  6. @Şuayip KAMBUR
    Kullandığın temada header stillerini iptal etmelisin.Örneğin temada o bölüm header olarak tanımlandıysa ikinci adımdaki kodlarda bulunan SAYFA BULUNAMADI satırından önce .header {display:none;} kodunu eklemelisin.Temada üt bölüme ait kodları bilmiyorsan temayı kodlayan kişiye başvur, o kodladığına göre biliyordur hangi kod olduğunu.

    Kolay gelsin.

    YanıtlaSil
  7. Serdar abicim bilgin için çok teşekkür ederim. bir hata daha var mozilla firefoxta hiç düzgün çalışmıyor.sitemi mozilla firefoxtan açıp bakarmısın.bu hatanın sebebi nedir acaba :( çok zahmet verdim k.bakmazsın inşallah.

    http://3.bp.blogspot.com/-zzGUFewo8XI/T5ar3BW54CI/AAAAAAAAAf8/ltNgwDXrj5U/s320/hataa.jpg

    YanıtlaSil
  8. Firefox'ta hiç denememiştim.Ben Chrome kullandığım için tüm tasarımları Chrome tarayıcıda test ediyorum.Firefox'ta çalışmıyorsa yapabileceğim bir şey yok maalesef.

    YanıtlaSil
  9. serdar abi css kodlarında siteyi arka plana alıp hata sayfasını tam ekran yapan kod hangisi. ?

    YanıtlaSil
  10. <b:if cond='data:blog.pageType == &quot;error_page&quot;'>

    YanıtlaSil
  11. Benim eski kod çalışıyordu. Temayı değiştirdim. Çalışmayı bıraktı. Sizin kodu ve internetteki bir kaç kodu denedim çalışmadı. Bunu nasıl düzeltebilirim.

    Sitenin ismi: ergodinamik.blogspot.com

    YanıtlaSil
  12. o 404 grafiğini de ben yapmıştım he r10 da paylaştıktan sonra her sitede görmeye başladım Helali hoş olsun ama :D

    YanıtlaSil
  13. şimdi ben de kodları alıp kullanım ve bir kerede oldu:)) eline sağlık blog hocamm:))

    YanıtlaSil
  14. Gerçekten güzelmiş saol :)

    YanıtlaSil
  15. hocam ekledim ama sayfada çıkmıyor
    site : http://blogyilmaz.blogspot.com/2014/03/baaa

    YanıtlaSil
  16. Merhaba hocam, ellerinize sağlık harika olmuş bende kendi siteme ekledim lakin birkaç değişiklik yapmadan geçemedim yeni haline bir göz atarsanız çok sevinirim :).

    Bloğum: http://marjinalbeyin.blogspot.com.tr/404

    YanıtlaSil

Picardes

LİNKLER