طريقة تخصيص وانشاء صفحة الخطأ 404 لمدونات بلوجر
بسم الله الرحمن الرحيم
مع تطور تقنيات السيو , اصبحت صفحة الخطأ احد العوامل المهمة في مجال السيو , حيث انها تقود الزائر الى الوجهة الصحيحة , لذلك لابد ان يمتلك كل موقع صفحة خطأ خاصة به حيث تمكن زائر من التوجه الى الصفحة الرئيسية للمدونة , في هذا المقال ساشرح لكم طريقة انشاء صفحة خطأ بتصميم فريد ورائع .
لمعاينة تصميم الصفحة " اضغط هنا "
شرح طريقة التركيب
توجه الى لوحة التحكم في بلوجر > القالب > تحرير HTML ثم اضغط Ctrl+f وابحث عن الوسم <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>
<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>
بعدها ابحث عن الوسم <body> واضف الكود التالي تحته مباشرة :
<b:if cond='data:blog.pageType == "error_page"'>
<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>
<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 == "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: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: "\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: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>
<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: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: "\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: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>
بعد ذلك قم بحفظ القالب , بذلك تنتهي عملية انشاء صفحة الخطأ
ودمتم في حفظ الله و رعايته
