إضافة صفحة الخطأ إحترافية لقوالب بلوجر

إضافة صفحة الخطأ إحترافية لقوالب بلوجر



    بلوجر وفي تحديثاتها الأخيرة قامت بإضافة صفحة الخطأ من الإعدادات تسمح لك فقط بإضافة رابط مدونتك لظهور صفحة الخطأ عندما لا تتواجد صفحة أو حذفتها فالزائر يعلم بالرسالة أنه يوجد خطأ ، طبعا عندما تحدثت عن صفحة 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 أي شيئ ..
    * هناك تحديدات باللون الأخضر في الكود كروابط الصور والكلمات غيرهم بما تشاء
    غير معرف
    @مرسلة بواسطة
    كاتب ومحرر اخبار اعمل في موقع دليلك نحو الاحتراف .

    إرسال تعليق