تحويل تلقائي صفحة الخطأ الى الصفحة الرئيسية لمدونة بلوجر

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

المدون

MimoPlus

تاريخ النشر

12 ديسمبر 2020

التصنيف

دروس بلوجر

يمكنك معاينة صفحة الخطأ وذلك بزيارة رابط غير شغال في مدونتك (مثلا : رابط لتدوينة تم حذفها) أو بإضافة ما تشاء بعد رابط مدونتك، مثال : https://articleplus7.blogspot.com/

1لماذا وجب عليك الإهتمام بصفحة الخطأ ؟

- شخصيا، لم يعجبني التصميم الإفتراضي لصفحة الخطأ في مدونات بلوجر.
- يمكن أن تفقد بعض الزوار خاصة إذا صادفوا صفحة الخطأ في أول زيارة لهم لمدونتك.
- رسالة الخطأ وحدها ليست كافية، ومن الأفضل إضافة روابط في صفحة الخطأ كـ (الرئيسية، راسلنا، الرجوع إلى الخلف) لضمان بقاء الزائر في مدونتك.

2تغيير محتوى رسالة الخطأ

إذا كنت ترغب فقط في تغيير محتوى رسالة الخطأ والحفاظ على تصميمها الإفتراضي، إتبع الخطوات التالية :
- من لوحة التحكم إظغط على Setting ثم بعدها إختر Search preferences
- الآن إضغط على Edit في Custom Page Not Found
- سيظهر لك مربع فارغ أكتب فيه رسالة الخطأ كما تشاء ثم إضغط على الزر Save changes لحفظ التغييرات.
 أما إذا كنت تريد تصميم صفحة الخطأ وتعزيزها بروابط كما سبق وأن ذكرت، فيمكنك تجاهل الخطوة السابقة والمرور إلى الفقرة التالية.

3تصميم صفحة الخطأ لمدونتك

- انسخ كود التالي وضعه في المربع الخاص برسالة الخطأ :

<div id="pb-404">
    <div id="error-image"></div>
    <div id="error-msg">
        <h3>Page not found</h3>
        <b>الصفحة التي تبحث عنها في هذه المدونة ليست متوفرة</b>
    </div>
    <div id="error-nav">
        <ul>
            <li><a onclick="history.go(-1);return true;" style="cursor: pointer;">الرجوع إلى الخلف</a></li>
            <li><a href="/p/contact-us.html">راسلنا</a></li>
            <li><a href="/">الرئيسية</a></li>
        </ul>
   </div>
</div>

- قم باستبدال الرابط التالي : /p/contact-us برابط صفحة الإتصال الخاصة بمدونتك
- إضغط على الزر Save changes لحفظ التغييرات
- الآن ستقوم بإضافة CSS في قالب مدونتك لتنسيق كود HTML السابق. إتجه إلى لوحة التحكم ثم إختر Template وبعدها Edit HTML
- ابحث عن ]]&gt&lt/b:skin&gt وضع قبلها مباشرة الكود التالي :

 #pb-404
    {
        width: 99%;
        height: 450px;
        border: 1px solid #ddd;
        background: #1FB5AD;
    }
    
    #error-image
    {
        width: 100%;
        height: 200px;
        background-color: #fff;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bX3UPduD4BeIy6IJLLJn5nvqxHZ6Pl5XTbAGN1UMmrTEdcnpwmqRQoQYOJlbwgsCGXUqxh6U9BDnZ4vNJxzR6_e7mbX31VR8DEygRSyv4nZwEfUrlgdKoYYx7Og8fF3OTeqKPME-w2gm/s1600/404.png);
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    
    #error-msg
    {
        width: 99%;
        height: 120px;
        background-color: #1FB5AD;
        text-align: center;
    }
    
    #error-msg h3
    {
        margin: 0;
        padding: 0;
        text-align: center;
        font-weight: normal;
        line-height: 80px;
        color: #fff;
        font-size: 40px;
        font-family: sans-serif;
        text-transform: uppercase;
    }
    
    #error-msg b
    {
        font-weight: normal;
        color: #fff;
        font-family: tahoma;
        text-transform: uppercase;
    }
    
    #error-nav
    {
        background: #35BCB5;
        width: 100%;
        height: 90px;
        padding-top: 40px;  
    }
    
    #error-nav ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 309px;
        margin: auto;   
    }
    
    #error-nav ul li
    {
        float: left;
        margin-right: 20px;
        border: 1px solid #1FB5AD;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all 0.3s ease-in-out 0s;
        background:#fff;
    }
    
    #error-nav ul li:last-child
    {
        margin-right:0px;
    }
    
    #error-nav ul li:hover
    {
        opacity:0.9;
        transition: all 0.3s ease-in-out 0s;
    }
    
    #error-nav ul li a
    {
        text-decoration: none;
        color: #1FB5AD;
        font-family: tahoma;
    }

- قم بحفط التغييرات وذلك بالضغط على الزر Save template