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

9 مايو، 2022

 

كيفية انشاء وتخصيص صفحة الخطأ 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>

 

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