Özel 404 Hata Sayfası Oluşturun

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.

 

 

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

 

#error {
background-color: #F2F2F2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6oHoA-muUgLc5VP98nD-kf3tJL_FPjqRmZPpHvoQvTepA98PIwJbgJQVTE64JjYnysSkw9hd2uACpS_OgQoqfd7vIemqI-_udsJMidmAr5zDlnyj-EwCHD6TeIiBvL3LycDqDB2l1Psh/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4WBLyzv1RsJo9FefCu2wPi-PUvkr-V8R-WJe5s1HmAFQDUcyFo3YLoyn7La5fD0XMX9MNZzGppBSsXJ2-xTQwD3Ak1eIgMc0dVK64sdrnBExFww7wb2IZeDNHDk9lZE4KxGjRs3Z2axtv/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4WBLyzv1RsJo9FefCu2wPi-PUvkr-V8R-WJe5s1HmAFQDUcyFo3YLoyn7La5fD0XMX9MNZzGppBSsXJ2-xTQwD3Ak1eIgMc0dVK64sdrnBExFww7wb2IZeDNHDk9lZE4KxGjRs3Z2axtv/s944/box-sprite.png');
background-repeat: no-repeat;
background-position: 0 -43px;
}
#error .box {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14EuZn8SsCYzdYnI5JuCVEmSvNjwR9ZRQwOhNDlszlpqiuryZ8ldezl9X2jS1CZi2FwegRebMrdnoOdOFp9u4LlBKOJK7cnuwX_HCUSBAs40Zh6OkjKTMg2BmFwRLA4Wl_VJikkYtm7o9/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7oQhy0bY0YitY8dSfG3cYYdGfcFhBu2Ll9bIhPikHx8hWEOCVxvI3hEPvjGOEdCzw9pJejIVf2hzPLpIFQdLXQf6OX94-Ls6sHlxJwOcUDd317bSWD2DRlrMNhz-x10uzLETPfE808LMj/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.