اضافة صفحة الخطأ 404 بشكل احترافي

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

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

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

اليك معاينة للصفحة قبل تطبيقها

• معاينة

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

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

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

الكود

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
    <title><data:blog.pageName/><data:blog.title/></title>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <title>الصفحة غير موجودة ~ <data:blog.title/></title>
    </b:if>

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

الكود

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<div id='error-text'>
<span>4<i class='fa fa-frown-o'/>4</span>
<p> هل أنت(ي) تائه(ة)!</p>
<div class='er-Pro7web'>نعتذر إن لم تجد(ي) الصفحة</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 span {color:#aaa;font-size:120px;font-weight:700;letter-spacing:0.1em;}
#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 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-Pro7web {font-size: 18px!important;font-family: droid arabic kufi;}

/* CSS Error Page Responsive */
@media only screen and (max-width:640px){
#error-text {color:#aaa;font-size:20px;}
#error-text span {font-size:60px;}
#error-text a.back {padding:5px 10px;font-size:12px;}
#error-text a.back:hover,#error-text a.back:active {border:0;}}
</style>
</b:if>

التغييرات الأساسية

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

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

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق