طريقة وضع رسالة الخطا 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://chamelcool.blogspot.com/"> الرئيسية </a> </li>

      <li>  <a href="http://chamelcool.blogspot.com/2010/01/call-us.html"> اتصل بنا </a> </li>

</ul>    

<br/>

</div>

غير http://chamelcool.blogspot.com/   برابط مدونتك
ثم غير http://chamelcool.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/mmm/
أو 
http://chamelcom.blogspot.com/fghfv/

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