اضافة صفحة الخطأ 404 احترافية ومتحركة

السلام عليكم ورحمة الله تعالى وبركاته
مرحبا بكم اليوم في درس جديد وحصري على مدونة نكهة
نقدم لكم اليوم اضافة جديدة واحترافية وهي صفحة الخطأ 404 متحركة تعطي لمدونتك مضهرا جميلا خصوصا عندما تضغط على رابط غير شغال بالمدونة فتضهر هذه الصفحة وبعد 8ثواني تحولك مباشرة الى الرئيسية ونرجو ان تعجبكم الاضافة ولا تبخلو علينا بتعليقاتكم لتقديم المزيد اما عن طريقة التركيب فهي سهلة جدا ويستطيع اي شخص ان يعملها وسنمر الأن مباشرة للمعاينة.
ملاحظة: الصفحة من تصميم مدونة دبور فون www.dabourphone.com

يمكنك معاينة الصفحة من هنا

معاينة إضغط هنا

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

1. ابحث عن الوسم </body وقم بوضع الأكواد التالية اسفلها
2. صوة للتوضيح

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<meta HTTP-EQUIV='REFRESH' content='8; url=http://nak1ha.blogspot.com/'/>

<style>
.erorr{
  background: #000;
  color: #fff;
  line-height: 1.5;
}

a {
  color: #fff;
  text-decoration: none;
  border-bottom: solid 2px;
}

@media (min-width: 640px) {
  .erorr{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3n0H9t6uAav9nGx5rNJvrG5QCvEUTnsvTw_B29AQMlRoqOCsPd3tb4Js1wEUlcLfXDi2_AbsAjXKpB4NuR_oxhvSObwMwW0USaEpP4diUM9JCdfZ3ZzdVOFNrd-7mfOXAqvNix8gjbE/s1600/photo-1467173572719-f14b9fb86e5f.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
  }

  .content-err {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #333;
    padding: 45px 20px 20px;
    box-sizing: border-box;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    border-radius: 5px 5px 0 0;
  }

  .browser-bar-err {
    background: #f9f9f3;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
  }

  .button-err {
    display: inline-block;
    float: left;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  .close-err {
    background: #fc635d;
  }

  .min-err {
    background: #fdbc40;
  }

  .max-err {
    background: #34c84a;
  }
  .text  {text-align:center;direction: rtl;font-size: 24px;}
}
</style>
<div id='oopss'>
<div class='erorr'>
<div class='content-err'>
<div class='browser-bar-err'>
<span class='close-err button-err'/>
<span class='min-err button-err'/>
<span class='max-err button-err'/>
</div>
<div class='text'/>
</div>
<script src='https://723e12325b9f8f242ac8f7088af8c02ccc17b278.googledrive.com/host/0B1NQlV8aQ963bC1ta0lkd2ppMDg/ERROR-PAGE-NAK1HA.css'/>
  </div></div>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

1. ثم ابحث عن الوسم </body> ستجدونها في اسفل القالب
2. ثم ضع هذا الكود فوقه مباشرة
3. صورة للتوضيح اكثر

</b:if>

1. ثم قم بحفظ العمل
2. ومبروك عليك الاضافة

• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على 
• أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع.