تهيئة وتغيير شكل صفحة الخطأ 404

السلام عليكم إخواني أخواتي الأعزاء، نعود لكم بتدوينة من طلباتكم المتكررة لا تقل أهمية عن سابقاتها إلا أن هذه تتميز بالخفة نظرًا لاحتوائها على أكواد Css المصمم بها يمكن التعديل عليها بسهولة تامة من حيث اللون وما إلى ذلك سنتطرق لكل ذلك بعد التركيب

كما أنها متجاوبة, على الرغم من أنّ رسالة الخطأ 404 قد تسبب إرباكًا للمستخدمين والتي تدّل على أنّ الموقع لم يستطع إيجاد الصفحة المطلوبة

ستوضّح هذه الإرشادات أهميّة صفحة الخطأ 404 الفعّالة

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

ماذا يميز صفحة الخطأ وما فائدتها؟

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

مثال :

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

كنت مكان دالك الزائر وظهرت لك صفحة خطأ فارغة ولا تحتوي على اي رابط، مادا ستكون ردة فعلك ؟

ستكون العودة الى الوراء بإستعمال زر العودة الى الصفحة السابقة في المتصفح، اما في حالة كانت صفحة تحتوي على روابط الى صفحة الرئيسية واهم الاقسام في الموقع او تحتوي على مربع بحث، فهدا سيمنح للزائر ثلاث خيارات اخرى وسيزيد من فرص دخول الزائر الى الموقع

معاينة 1

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

1 . توجه لقالب >> تحرير

2. ابحث عن <head> ضع الكود التالي أسفله


<b:if cond='data:blog.pageType != &quot;error_page&quot;'>



<title><data:blog.pageName/><data:blog.title/></title>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>



</b:if>

    <title>الصفحة غير موجودة ~ <data:blog.title/></title>



</b:if>

3 إبحث بإستعمال Ctrl+F عن : </body>

ضع الكود التالي قبله [ فوقه ]

<b:if cond='data:blog.pageType == "error_page"'> <div id='oopss'> <div id='error-text'> <span>4<i class='fa fa-frown-o'/>4</span> <p> هل أنت(ي) تائه(ة)!</p> <div class='er-ar1web'>نعتذر إن لم تجد(ي) الصفحة</div> <p><a class='back' href='/'><i class='fa fa-toggle-on'/> العودة للرئيسية</a></p> </div> </div> </b:if>

4. ابحث عن </head> ضع الكود التالي فوقه


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<style type='text/css'>

.sidebar,.ct-wrapper, .header-wrapper, #header, #post-wrapper, #outer-wrapper, #footer-wrapper, #credit,.topwrapper,::-webkit-scrollbar,.banner,.topwrapper{display:none!important;margin:0;padding:0;overflow:hidden;}



/* CSS Error Page */

#oopss {background:#222;text-align:center;margin-bottom:50px;font-weight:400;font-size:30px;font-family:&#39;Roboto Condensed&#39;,sans-serif;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;}



#error-text {top:30%;position:relative;font-size:30px;color:#aaa;}
#error-text a{color:#aaa;}

#error-text p {margin:0!important;  font-family: droid arabic kufi;}

#error-text a.back {  display: inline-block;margin: 10px auto;background: #F23D3D;color: #fff;padding: 6px 10px 3px;font-size: 10px;font-weight: 700;line-height: normal;border-radius: 3px;transform: scale(1);transition: all 0.5s ease-out;}



#error-text span {color:#aaa;font-size:120px;font-weight:700;letter-spacing:0.1em;}





#error-text a.back:hover {background:#181818;color:#fff;}

#error-text a.back:active {-webkit-transform:scale(0.95);-moz-transform:scale(0.95);transform:scale(0.95);background:#F23D3D;color:#fff;}



.fa-frown-o:before {content: &quot;\f119&quot;;color: #F23D3D;}



.er-ar1web {font-size: 18px!important;font-family: droid arabic kufi;}



/* CSS Error Page Responsive */

#error-text {color:#aaa;font-size:20px;}



@media only screen and (max-width:640px){

#error-text a.back {padding:5px 10px;font-size:12px;}



#error-text span {font-size:60px;}

</b:if>



#error-text a.back:hover,#error-text a.back:active {border:0;}}

</style>

* الملون بالأزرق هو لون الخلفية

* الملون بالبرتقالي هو لون الأيقونة : 4 0 4 وزر الرئيسية

تهيئة وتغيير شكل صفحة الخطأ 404

0 التعليقات:

إرسال تعليق

إنضم إلى صفحتنا في الفيسبوك

المشاركات الشائعة

تهيئة وتغيير شكل صفحة الخطأ 404

0 التعليقات:

إرسال تعليق

إنضم إلى صفحتنا في الفيسبوك

المشاركات الشائعة

احصل على أجدد مواضيعنا أول بأول