طريقة وضع رسالة الخطا 404 لمدونتك بطريق احترافية وبتقنية CSS

السلام عليكم زوار مدونة شامل كول ,كنت قد وضعت شرحا شرحت فيه تفعيل أخر تحديثات بلوجر الأخير ,وفي نفس الموضوع تطرقت أيضا لكيفية  انشاء رسالة خطأ خاصة بمدونتك غير الرسالة التقليدية التي تخرج عند الدخول لصفحة غير موجودة ,معاينة المثال الدي قدمته ,أما الأن فسأضع بين أيديكم طريقة وضع رسالة خطا احترافية وجميلة بتقنية css


                                               <معاينة  >

طريقة التركيب 

أولا سجل الدخول من هنا Draft.blogger.com
الان أدخل على لوحة التحكم الرئيسة
ثم اعدادات
 ثم تفضيلات البحث
 ثم ٍالأخطاء وعمليات إعادة التوجيه
ثم  ٍلم يتم العثور على الصفحة المخصصة   ثم  اضغط تحرير  

 ثم قم بنسخ الكود التالي وضعه  في الصندوق الدي سيضهر 


الكود 

<!-- 404 Page Not Found code -->

<div id='PBT-404-template'>

 <p align='center'><font color='#0080ff' style='font-size: 36px'><strong>404</strong></font> <span><font size='5'>الصفحة المطلوبة غير موجودة!</font></span></p>

<br/>

 <p style='line-height: 30px'><strong>

<font color='#ff0000' size='5'>

عفوا!

</font> <font color='#000'>

لم يتم العثور على الصفحه يبدوا أنك ضغطت على رابط  أو أدخلت عنوان غير صحيح !

</font></strong></p>

<p>يمكنك الاستعانة بأحد الختيارات أسفله وشكرا على التفهم . </p>

 <ul style="line-height:25px;">   <li><a href='javascript:history.go(-1)'> ارجع للخلف</a> </li>

 <li> <a href="http://chamelcom.blogspot.com/"> الرئيسية </a> </li>

      <li>  <a href="http://chamelcom.blogspot.com"> اتصل بنا </a> </li>

</ul>    

<br/>

</div>

غير http://chamelcom.blogspot.com/   برابط مدونتك 
ثم غير http://chamelcom.blogspot.com/2010/01/call-us.html  برابط الصفحة التي تخصصها للاتصال بك

ثم اضغط حفض التغيرات 

ثانيا  

لاتنسى اخد نسخة احتياطية للقالب
1.لوحة التحكم
2.القالب
3. ثم تحريرhtml         
 4.متابعة
5.توسيع القالب
ثم ابحث عن الكود التالي :بالضغط على       alt  

 ]]></b:skin>

ثم ضع الكود التالي مباشرة فوقه 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <style type='text/css'>
    .status-msg-wrap {
        font-size: 100%;
        margin: none;
        position: static;
        width: 100%;
    }
    .status-msg-border {
        display:none
    }
    .status-msg-body {
        padding: none;
        position: static;
        text-align: inherit;
        width: 100%;
        z-index: auto;
    }
    .status-msg-wrap a {
        padding: none;
        text-decoration: inherit;
    }

    #PBT-404-template {
      background:#FFFFFF;
      width:98%;
      margin:-12px 0px 10px 0px;
      padding:20px 10px;
      border:1px solid #ddd;
  
  
    }
    </style>
    </b:if>

ثم احفض القالب 


لتأكد من الاضافة تعمل جيدا يكفي فقط  اضافة 404  او اي شىء غير موجود  على هدا الشكل 
http://chamelcom.blogspot.com/404
أو 
http://chamelcom.blogspot.com/chm

ومبروك الاضافة