إضافة صفحة الخطأ 404 لمدونات بلوجر سيف المالكي للمعلوميات

ماهي صفحة الخطأ 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'>
<span>4<i class='fa fa-frown-o'/>4</span>
<p> هل أنت(ي) تائه(ة)!</p>
<div class='er-ar1web'>نعتذر إن لم تجد(ي) الصفحة</div>
<p><a class='back' href='/'><i class='fa fa-toggle-on'/>  العودة للرئيسية</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:30%;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:20px;}
#error-text span {font-size:60px;}
#error-text a.back {padding:5px 10px;font-size:12px;}
#error-text a.back:hover,#error-text a.back:active {border:0;}}
</style>
</b:if>

أهم التعديلات

الكود #222 باللون الأزرق هو لون الخلفية ويمكن تعديله

الكود #F23D3D باللون الزهري هو لون النصوص ولون الأيقونة 404 ويمكن تغييره باللون الذي تريده

الكود droid arabic kufi باللون البرتقالي هو كود الخط ويمكنك تعديله
منقول من عرب ويب

إضافة صفحة الخطأ 404 لمدونات بلوجر

الأكثر زيارة

مقالاتي

اخر التعليقات

أقسام المدونة

تابعنا أول بأول

إضافه سمايلات ( إبتسامات ) داخل التدوينة لمدونات بلوجر