طريقة تخصيص وانشاء صفحة الخطأ 404 لمدونات بلوجر

بسم الله الرحمن الرحيم


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

لمعاينة تصميم الصفحة " اضغط هنا "

شرح طريقة التركيب

توجه الى لوحة التحكم في بلوجر > القالب > تحرير HTML ثم اضغط Ctrl+f وابحث عن الوسم <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>

بعدها ابحث عن الوسم <body> واضف الكود التالي تحته مباشرة :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<div id='error-text'>
  <img src="https://cdn4.iconfinder.com/data/icons/seo-4-1/447/15-_Broken_link-256.png"
  style="width:350px;height:200px;margin-bottom:60px"/>
<div style="font-size:350%;margin-bottom:50px">404</div>
<p>عفوا الصفحة التي تبحث عنها غير موجودة</p>
<div class='er-ar1web' style='color:#F47F17'>يمكنك التوجه الى الصفحة الرئيسية للموقع</div>
<p><a class='back' href='/' style="text-decoration:none">العودة للرئيسية</a></p>
</div>
</div>
  </b:if>

بعد ذلك ابحث عن الوسم </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:10%;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:50px;}
#error-text span {font-size:60px;}
#error-text a.back {padding:5px 10px;font-size:122px;}
#error-text a.back:hover,#error-text a.back:active {border:0;}}
</style>
</b:if>

بعد ذلك قم بحفظ القالب , بذلك تنتهي عملية انشاء صفحة الخطأ


ودمتم في حفظ الله و رعايته
مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق