03‏/08‏/2015

السلام عليكم إخواني أخواتي الأعزاء، نعود لكم بتدوينة من طلباتكم المتكررة لا تقل أهمية عن سابقاتها إلا أن هذه تتميز بالخفة نظرًا لاحتوائها على أكواد 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'/>
إذا واجهتك مشاكل من حيث الشكل فالمرجو ترك رابط المعاينة
السلام عليكم إخواني أخواتي الأعزاء، نعود لكم بتدوينة من طلباتكم المتكررة لا تقل أهمية عن سابقاتها إلا أن هذه تتميز بالخفة نظرًا لاحتوائها على أكواد 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'/>
إذا واجهتك مشاكل من حيث الشكل فالمرجو ترك رابط المعاينة
23 Blogger تعليقات
Disqus
23 التعليقات
المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

إن شاء الله

المشرف
avatar
المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

لم أجد الوسم body في قالبي !! ما العمل

المشرف
avatar

إبحث عنه هكذا <body

المشرف
avatar
المشرف
avatar

إبحث عنه هكذا : <body

المشرف
avatar

اخي الكريم لم تعمل ارجو الرد السريع

المشرف
avatar

ممكن توضيح؟ لم تعمل بتاتا؟!

المشرف
avatar

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

المشرف
avatar

أرسل القالب وسأرى المشكل : info@ar1web.com

المشرف
avatar

اخى الكريم لم تعمل لدى ايضا

المشرف
avatar

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

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