Blogger 404 Hata Sayfası Oluşturma

Arlina Design: Blogger 404 Hata Sayfası Oluşturma 27.4.16
Blogger 404 Hata Sayfası Oluşturma

Blogger 404 Hata Sayfası Oluşturma - Blogunuz bir web sitesi gibi çalışmasını sağlamak ve blog okuyucularına sayfalar hakkında bilgi verebilmek için Blogger Eklentilerinin sunmuş olduğu blogger 404 hata sayfası önem kazanan blogger eklentilerden biri haline geldi.


Bir çok blog yazarının oluştumak istediği blog 404 hata sayfasını aşağıdaki adımları takip ederek blogunuzunda 404 hata sayfasını oluşturabilirsiniz.

Blog 404 Sayfa Bulunamadı Eklentisi Nasıl Eklenir?


Birinci adım: Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde Şablon > HTML'i Düzenle diyoruz. CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki kodları </head> kodunun bir satır üzerine ekleyin.

CSS
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#error-pages{background:#232323;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;text-align:center;margin-bottom:50px;z-index:9999;left:0}
#error-page{font-size:40px;top:30%;position:relative;color:#eee}
#error-page a{color:#eee}
#error-page a:hover{color:#fff}
#error-page p{color:#eee;margin:70px 0 0}
#error-page i{margin-left:10px}
#error-page p.home-page{margin:40px 0 0}
#error-page span{background:#ef4824;color:#fff;font-size:300%;padding:0 20px;border-radius:5px;position:relative;font-weight:bolder;transition:all .5s;cursor:pointer;margin:0 0 40px}
#error-page span:hover{background:#d7401f;-webkit-animation:jelly .5s;color:#fff;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s}
#error-page span:after{top:100%;left:50%;border:solid transparent;content:'';height:0;width:0;border-color:rgba(136,183,213,0);border-top-color:#ef4824;border-width:7px;position:absolute;pointer-events:none;margin-left:-7px}
.back:active{background:#f53b3b;-webkit-transform:scale(.95);-moz-transform:scale(.95);transform:scale(.95);color:#fff}
.back:hover{background:#4c4c4c;color:#fff}
.back{text-decoration:none;background:#5b5a5a;font-size:20px;font-weight:500;line-height:normal;color:#fff;padding:10px 20px;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all .5s ease-out}
@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}
@keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}
@media only screen and (max-width:640px){#error-page span{font-size:200%}#error-page a:hover{color:#fff}}
</style>
</b:if>

İkinci adım: CTRL+F yardımıyla <body> kodunu bulun ve aşağıdaki kodları <body> kodunun bir satır altına ekleyin.

HTML
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-pages'>
<div id='error-page'>
<span>404</span>
<p>SAYFA BULUNAMADI!</p>
<p class='home-page'><a expr:href='data:blog.homepageUrl' class="back">ANA SAYFAYA DÖN</a></p>
</div>
</div>
</b:if>

Blogger 404 hata sayfası blogunuzda bulunan etiketlere bağlı olarak çalışan bir eklentidir. Etiket koşullu çalışan Blogger 404 hata sayfası yönlendirme içermez. Daha fazla bilgi yorum bölümünden bize ulaşabilirsiniz.


Üçüncü adım: Şablonu kaydedin ve blog_ismi.blogspot.com/404 olarak kontrol edin.

Yorum Gönder