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

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

يوجد الآن مشاهدة التعليقات : 23

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

السلام عليكم إخواني أخواتي الأعزاء، نعود لكم بتدوينة من طلباتكم المتكررة لا تقل أهمية عن سابقاتها إلا أن هذه تتميز بالخفة نظرًا لاحتوائها على أكواد Css المصمم بها يمكن التعديل عليها بسهولة تامة من حيث اللون وما إلى ذلك سنتطرق لكل ذلك بعد التركيب
كما أنها متجاوبة, على الرغم من أنّ رسالة الخطأ 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-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 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-ar1web {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 وزر الرئيسية

للحصول على نفس الإعدادات التي بالمعاينة أضف هذه الأكواد فوق </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'/>
إذا واجهتك مشاكل من حيث الشكل فالمرجو ترك رابط المعاينة
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 23 تعليقًا:

  1. باركك الله حبيبنا على الصفحة المذهلة صراحة
    ضبطت معي تمام والحمد لله، آريغاتو حسام كن :)
    بالمناسبة.. القالب الجديد جميل جدًا على السابق :D
    بانتظار قوالب أنمية جديدة :p تحياتي الخالصة - ليو ساما

    ردحذف
    الردود
    1. سعدت بمرورك واشتغال الإضافة معك أخي، إن شاء الله ستكون قوالب خاصة بالأنيمي والفيديوهات...

      حذف
  2. استفسار ، عندي قالب مدونة المحترف افتراضي ، لكن شخص اللي معدل عليه واضع تحت كل تدوينه ، اسمه وشركتة ،، كيف يمكن اشيل هذه مشكلة ؟ ارجو رد

    ردحذف
    الردود
    1. أرسل رابط المعاينة لهذا الإميل : istoretech3@gmail.com
      وسيتم الحل بإذن الله

      حذف
  3. ممكن طريقة اضافة الخط المغربي للمدونة

    ردحذف
  4. ألقي نظرة في هذه التدوينة: http://www.ar1web.com/2014/08/blog-post_22.html

    ردحذف
    الردود
    1. شكرا ممكن طريقة اضافة تعليقات google ايضا بجانبها كما لديك

      حذف
    2. إن شاء الله

      حذف
  5. غير معرف8/04/2015

    جيد

    ردحذف
  6. هل صفحة الخطأ ستظهر باللون الأحمر ؟ وجزاك الله خيرا

    ردحذف
    الردود
    1. لا، ليست بأكملها يمكنك معاينة الشكل بنفسك في المعاينة 1 المرفقة بالموضوع

      حذف
  7. لم أجد الوسم body في قالبي !! ما العمل

    ردحذف
  8. أرجوك أخي ساعدني لم أجد كلمة < body >

    ردحذف
  9. اخي الكريم لم تعمل ارجو الرد السريع

    ردحذف
    الردود
    1. ممكن توضيح؟ لم تعمل بتاتا؟!

      حذف
  10. نعم ارجو المساعدة هل يمكنك ان تكون احد مسؤالي المدونة وتلقيلي نظرة

    ردحذف
    الردود
    1. أرسل القالب وسأرى المشكل : info@ar1web.com

      حذف
  11. اخى الكريم لم تعمل لدى ايضا

    ردحذف
  12. غير معرف11/20/2016

    شكرا الإضافة شغالة %100

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم