-->

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

» » كيفية وضع صفحة الخطأ 404 مثل مدونة عرب ويب

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

6/15/2015 02:00:00 م
الكثير منا من أراد أن يضع صفحة الخطأ مثل شكل مدونة عرب ويب بالضبط .ولكن الاغلبية لم يجدوا كود صفحة الخطأ هذه تماما.. لذا في هذه التدوينة سأتطرق الى طريقة إضافة هذه الصفحة بشكلها الجميل و المتجاوب.

طريقة تركيبها على المدونة:
  1. نسخ الكود الموجود أسفل التدوينة
  2. البحث عن الوسم <body>
  3. لصق الكود تحت الوسم
  4. حفظ القالب

الكود:

<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,#tabber-wrapper,#GoToDown,.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>
<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>
<div class='topwrapper'>
  <div id='dialogoverlay'/>
  <div id='dialogbox'/>
<div>
  <div id='dialogboxhead'/>
  <div id='dialogboxbody'/>
  <div id='dialogboxfoot'/>
</div></div>
</b:if>

و شكرا لكم أعزائي الكرام على تشريف المدونة





عن الكاتب

مري 15 سنة اعيش بمدينة وجد .أهتم بكل ماهو جديد في العالم الافتراضي .و أهدف الى تطوير المحتوى المعلوماتي العربي

شكرا لتعليقك
الاشتراك في: تعليقات الرسالة (Atom)