31‏/08‏/2014

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

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

مثال :ادا اتبع زائر رابط صفحة قمت بحذفها، ما يعني انه اتبع رابط صفحة غير موجودة ولذالك سيتم عرض صفحة الخطأ. تخيل معي لو كنت مكان دالك الزائر وظهرت لك صفحة خطأ فارغة ولا تحتوي على اي رابط، مادا ستكون ردة فعلك؟ ستكون العودة الى الوراء بإستعمال زر العودة الى الصفحة السابقة في المتصفح، اما في حالة كانت صفحة تحتوي على روابط الى صفحة الرئيسية واهم الاقسام في الموقع او تحتوي على مربع بحث، فهدا سيمنح للزائر ثلاث خيارات اخرى وسيزيد من فرص

شرح طريقة التركيب
1. مباشرة من القالب ابحث باستعمال Ctrl+F عن </body> ثم ضع الكود التالي فوقه
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/* www.ar1web.com */
#error-not-found {
    background: #ff0000;
    background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:270px;
        z-index:999999;
}
#error-not-found  h1 {
        font-size:640px!important;
        position:absolute;
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        top:70px;
        left:50%;
        letter-spacing: -8px;
        margin-left:-502px!important;
        width:960px;
        z-index:-2;
        color:rgba(0,0,0,.09)!important;
}
#error-not-found  h2 {
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        text-transform:uppercase;
        font-size:81px;
        line-height:100px!important;
        letter-spacing: -3px;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        text-transform:uppercase;
        font-size:56px;
        line-height:80px!important;
        border:none;
        font-weight: bold;
        color:rgba(0,0,0,.5)!important;
        margin:0!important;
        padding:0!important;
        text-decoration:none!important;
}
</style>
<div id='error-not-found'>
 <h1>404</h1> <h2>أووبس..الصفحة غير موجودة</h2>
 <h2>كيف وصلت إلى هنا !</h2>
 <p> <a href='/' title='الرئيسية'> الرجوع للصفحة الرئيسية</a></p>
</div>
</b:if>
2. قم بحفظ العمل ومبروك عليك أهم إضافة يمكنك تجربتها من خلال إضافة /404 في أخر الرابط وليس بالضرورة أن تكون 404 أي شيئ ..
* هناك تحديدات باللون الأخضر في الكود كروابط الصور والكلمات غيرهم بما تشاء
بلوجر وفي تحديثاتها الأخيرة قامت بإضافة صفحة الخطأ من الإعدادات تسمح لك فقط بإضافة رابط مدونتك لظهور صفحة الخطأ عندما لا تتواجد صفحة أو حذفتها فالزائر يعلم بالرسالة أنه يوجد خطأ ، طبعا عندما تحدثت عن صفحة 404 الذي تتيحها لنا بلوجر فهي ليست بتصميم إحترافي .. فقط كتابة ، وهنا يأتي دور مدونة عرب ويب في إضافة صفحة الخطأ 404 بشكل إحترافي وجذاب نعم الأن ستحضون بصفحة الخطأ بأسهل طريقة سأشرحها بدون أن تتعب في شيئ كل شيئ جاهز

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

مثال :ادا اتبع زائر رابط صفحة قمت بحذفها، ما يعني انه اتبع رابط صفحة غير موجودة ولذالك سيتم عرض صفحة الخطأ. تخيل معي لو كنت مكان دالك الزائر وظهرت لك صفحة خطأ فارغة ولا تحتوي على اي رابط، مادا ستكون ردة فعلك؟ ستكون العودة الى الوراء بإستعمال زر العودة الى الصفحة السابقة في المتصفح، اما في حالة كانت صفحة تحتوي على روابط الى صفحة الرئيسية واهم الاقسام في الموقع او تحتوي على مربع بحث، فهدا سيمنح للزائر ثلاث خيارات اخرى وسيزيد من فرص

شرح طريقة التركيب
1. مباشرة من القالب ابحث باستعمال Ctrl+F عن </body> ثم ضع الكود التالي فوقه
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/* www.ar1web.com */
#error-not-found {
    background: #ff0000;
    background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:270px;
        z-index:999999;
}
#error-not-found  h1 {
        font-size:640px!important;
        position:absolute;
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        top:70px;
        left:50%;
        letter-spacing: -8px;
        margin-left:-502px!important;
        width:960px;
        z-index:-2;
        color:rgba(0,0,0,.09)!important;
}
#error-not-found  h2 {
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        text-transform:uppercase;
        font-size:81px;
        line-height:100px!important;
        letter-spacing: -3px;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        text-transform:uppercase;
        font-size:56px;
        line-height:80px!important;
        border:none;
        font-weight: bold;
        color:rgba(0,0,0,.5)!important;
        margin:0!important;
        padding:0!important;
        text-decoration:none!important;
}
</style>
<div id='error-not-found'>
 <h1>404</h1> <h2>أووبس..الصفحة غير موجودة</h2>
 <h2>كيف وصلت إلى هنا !</h2>
 <p> <a href='/' title='الرئيسية'> الرجوع للصفحة الرئيسية</a></p>
</div>
</b:if>
2. قم بحفظ العمل ومبروك عليك أهم إضافة يمكنك تجربتها من خلال إضافة /404 في أخر الرابط وليس بالضرورة أن تكون 404 أي شيئ ..
* هناك تحديدات باللون الأخضر في الكود كروابط الصور والكلمات غيرهم بما تشاء
13 Blogger تعليقات
Disqus
13 التعليقات
المشرف
avatar

رائع أخ حسام شكرا على الإضافة واصل

المشرف
avatar

جميل لكن أنا لدي صفحة خطآ شاهدها www.Ebda2.net/404 لكنها غير جيدة !! :(

كيف يمكنني استبدالها بأحد الأمثلة في الأعلى :) ؟

المشرف
avatar

جرب أولا بوضع الكود إذا ظهرت لك الصفحة جديدة
يمكنك ترك الكود القديم أو حذفه لكن يختلف حسب الأكواد يبدء عندك هكذا : .error_page .error-title

div class="error-title">

المشرف
avatar

ملحوظة أخى : أنت وضعت كود القائمة الثانية فقط
عدل على الموضوع لأفادة الجميع

المشرف
avatar

أي قائمة !! إذا كنت تتكلم عن شكل الصفحة فالموضوع لو قرأته كامل ستلاحظ أني أشرت للمثال الذي سيطبق

المشرف
avatar

شكرا لك صديقي حسام والله حتى احببت مدنتك لئنها وبصراحة مدونة الوحيدة الموثوق بها وانا اعرف لماذا اقول موثوق بها وشكر

المشرف
avatar

شكرا لك اخي الكريم ولكن اتمنى ان تنشر كيفية وضع المثال الاول لانه احلى بكثير من الثاني

المشرف
avatar

شكرا على الاضافه الجميله دى

http://mostafaelgamal.blogspot.com/

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

بجد الله يباركلك على هذه الاضافه الاكثر من رائعه والحديثه حقيقا

المشرف
avatar

والله استفدت كتير من هذا الموضوع وجربتها وشغاله 100% فى 100 وهذا موقعى للمعاينه

keyseating

المشرف
avatar

رائع أخ حسام شكرا على الإضافة واصل

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