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

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

في درسنا اليوم سوف نتعرف على طريقة تركيب صفحة خطأ 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- احفظ القالب .

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