اضافة صفحة الخطأ 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 وزر الرئيسية

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

3 التعليقات

avatar

صفحة احترافية شكرا لك

avatar

العفو اخي اسعدني تعليقك

avatar

اريد تكبير الكلام
يعني تكبير 404 ++ الكلام + زر الصفحه الرئيسية دفعه واحده
يكون تقريباً ضعف الحجم كيف ؟
+ لايوجد الوان باكود
لايوجد الازرق او البرتقالي
كيف اعثر عليهم ؟!

الإبتساماتالإبتسامات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة