إنشاء صفحة خطأ 404 أحترافية

السلام عليكم ورحمة الله وبركاته.

[ html ] إنشاء صفحة خطأ 404 أحترافية 

صفحة الخطأ هي من اهم الصفحات التي يجب ان يتم التركيز عليها من قبل صاحب الموقع حيث انها يجب ان تكون منظمه وسهله للزائر بحيث يستوعب ويفهم ان الرابط غير موجود والصفحة التي اتى ليبحث عنها غير موجوده او تم حذفها , لذالك نحن سنقوم بتصميم صفحة خطأ 404 مخصصة وذات تنسيق جميل وسنضعها في الموقع .

مميزات صفحة الخطأ 404 المخصصة : 

• تنسيق حصري.
• خط كوفي.
• عبارة 404! لكي يفهم الزائر انها صفحة خطأ.
• ايضا اضفنا جملة بسيطة.

مثال مباشر : http://tec1new.blogspot.com/p/404.html

او جرب اي رابط خاطء في مدونتي :
http://tec1new.blogspot.com/2014/04/gggggggg.html
http://tec1new.blogspot.com//2014/04/dddddddd.html
http://tec1new.blogspot.com/2014/04/aaaaaaaaa.html
لا يهم , اي رابط خاطئ سيتم تحويلة الى صفحة مخصصة.

صورة : 

 إنشاء صفحة خطأ 404 أحترافية

طريقه التركيب : 

1. توجه لقالب >> تحرير

2. إبحث بإستعمال Ctrl+F عن : </body>

3. ضع الكود التالي قبله [ فوقه ]

<b:if cond='data:blog.pageType == &quot;error_page&quot;'><style>/* www.tec1new.blogspot.com */#error-not-found {    background: #ff0000;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEC8jzA074auZYgHK0KjTPPvTVQLcJsPsYYH8yVbG46ZmZNuJHbNPzNLiYx8M2g5sZ-3tk9uHnibMe2llV7I14AZ9ixVIVJccLYoedFUSBS6I9csn-gvD-HZYr8tuu-JA7lgFLVQws7g/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEC8jzA074auZYgHK0KjTPPvTVQLcJsPsYYH8yVbG46ZmZNuJHbNPzNLiYx8M2g5sZ-3tk9uHnibMe2llV7I14AZ9ixVIVJccLYoedFUSBS6I9csn-gvD-HZYr8tuu-JA7lgFLVQws7g/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );        text-align:center;        position:fixed;        top:0px;        right:0px;        bottom:0px;        left:0px;        padding-top:270px;        z-index:999999;}#error-not-found  h1 {        font-size:640px!important;        position:absolute;        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;        top:70px;        left:50%;        letter-spacing: -8px;        margin-left:-502px!important;        width:960px;        z-index:-2;        color:rgba(0,0,0,.09)!important;}#error-not-found  h2 {        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;        text-transform:uppercase;        font-size:81px;        line-height:100px!important;        letter-spacing: -3px;        color:#fff!important;        margin:0!important;        padding:0!important;}#error-not-found p a,#error-not-found p a:visited,#error-not-found p a:hover{        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;        text-transform:uppercase;        font-size:56px;        line-height:80px!important;        border:none;        font-weight: bold;        color:rgba(0,0,0,.5)!important;        margin:0!important;        padding:0!important;        text-decoration:none!important;}</style><div id='error-not-found'> <h1>404</h1> <h2>أووبس..الصفحة غير موجودة</h2> <h2>كيف وصلت إلى هنا !</h2> <p> <a href='/' title='الرئيسية'> الرجوع لصفحة الرئيسية</a></p></div></b:if>