السلام عليكم إخواني أخواتي الأعزاء، نعود لكم بتدوينة من طلباتكم المتكررة لا تقل أهمية عن سابقاتها إلا أن هذه تتميز بالخفة نظرًا لاحتوائها على أكواد Css المصمم بها يمكن التعديل عليها بسهولة تامة من حيث اللون وما إلى ذلك سنتطرق لكل ذلك بعد التركيب
كما أنها متجاوبة, على الرغم من أنّ رسالة
الخطأ 404 قد تسبب إرباكًا للمستخدمين والتي تدّل على أنّ الموقع لم يستطع إيجاد الصفحة المطلوبة 👾
ستوضّح هذه الإرشادات أهميّة صفحة الخطأ 404 الفعّالة
توجد العديد من الخيارات التي تتضمنها صفحة الخطأ منها : كإضافة مربع بحث بداخل الصفحة منها إضافة مواضيع تلقائية أو فيديو إلخ... وعلى حسب صاحب الموقع فإن أردت أن تبقيها بسيطة وتوجهك للرئيسية مباشرة فأنت بالمكان الصحيح
ماذا يميز صفحة الخطأ وما فائدتها؟
تدور اهمية صفحة الخطأ حول كسب المزيد من الزوار من عناكب البحث أيضا، بدون خروجهم 👣 من الموقع في حالة اتباعهم للرابط خاطئ.
مثال :
ادا اتبع زائر رابط صفحة قمت بحذفها، ما يعني انه اتبع رابط صفحة غير موجودة ولذالك سيتم عرض صفحة الخطأ. تخيل معي لو
كنت مكان دالك الزائر وظهرت لك صفحة خطأ فارغة ولا تحتوي على اي رابط، مادا ستكون ردة فعلك ؟
ستكون العودة الى الوراء بإستعمال زر العودة الى الصفحة السابقة في المتصفح، اما في حالة كانت صفحة تحتوي على روابط الى صفحة الرئيسية واهم الاقسام في الموقع او تحتوي على مربع بحث، فهدا سيمنح للزائر ثلاث خيارات اخرى وسيزيد من فرص دخول الزائر الى الموقع
شرح طريقة التركيب
2. ابحث عن <head> ضع الكود التالي أسفله
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>الصفحة غير موجودة ~ <data:blog.title/></title>
</b:if>
3. ابحث عن<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 == "error_page"'>
<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:'Roboto Condensed',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: "\f119";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'/>
إذا واجهتك مشاكل من حيث الشكل فالمرجو ترك رابط المعاينة
