كيفية إضافة صفحة خطأ بشكل أحترافي وجديد لمدونات بلوجر

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

في درسنا اليوم سوف نتعرف على طريقة تركيب صفحة خطأ 404 على مدونات بلوجر ، قامت بلوجر في إطار التحديثات التي قامت بها مؤخرا، بإضافة خيار جديد يسمح لنا بتحكم في شكل ومحتوى صفحة الخطأ، لكي يساعد المدونين على كسب المزيد من الزوار وتحسين ارشفة المدونة.

ولكن للأسف لم يعمل العديد من المدونون على استغلال هده الميزة، هدا بفعل جهلهم بوجود هده الميزة او للجهلهم بفائدتها

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم .

2-من لوحة التحكم اختر -> قالب -> تحرير قالب HTML

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه .

 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
/* CSS Error 404 */
#oopss{background:#222;text-align:center;margin-bottom:50px;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;left:0}#error-text{top:30%;position:relative;font-size:40px;color:#eee}#error-text a{color:#eee}#error-text a:hover{color:#fff}#error-text p{color:#eee;margin:70px 0 0}#error-text i{margin-left:10px}#error-text p.hmpg{margin:40px 0 0}#error-text span{position:relative;background:#ef4824;color:#fff;font-size:300%;padding:0 20px;border-radius:5px;font-weight:bolder;transition:all .5s;cursor:pointer;margin:0 0 40px}#error-text span:hover{background:#d7401f;color:#fff;-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s}#error-text span:after{top:100%;left:50%;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ef4824;border-width:7px;margin-left:-7px}.back:active{-webkit-transform:scale(.95);-moz-transform:scale(.95);transform:scale(.95);background:#f53b3b;color:#fff}.back:hover{background:#4c4c4c;color:#fff}.back{text-decoration:none;background:#5b5a5a;color:#fff;padding:10px 20px;font-size:20px;font-weight:700;line-height:normal;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-text span{font-size:200%}#error-text a:hover{color:#fff}}
</style>
</b:if>

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

6- اضف الكود التالي فوقه .

 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
  <div id='error-text'>
    <span>404</span>
    <p>الصفحة غير موجودة </p>
    <p class='hmpg'><a expr:href='data:blog.homepageUrl' class="back">العودة إلى الرئيسية</a></p>
  </div>
</div>
</b:if>

7- احفظ القالب .

انقر هنا للمعاينة