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

إعلان أدسنس

آخر المواضيع

breaking/مقالات/15
بلوجر

الاثنين، 1 أغسطس، 2016

6:13:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم ورحمة الله تعالى وبركاته
مرحبا بكم اليوم في درس جديد وحصري على مدونة نكهة
نقدم لكم اليوم اضافة جديدة واحترافية وهي صفحة الخطأ 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://2.bp.blogspot.com/-Q0sY1pypqdM/V56WWcSvQjI/AAAAAAAABtU/zatlA2rlhl4T8YdpYCnbPscmyBKLBMqggCLcB/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. ومبروك عليك الاضافة

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

    ردحذف
    الردود
    1. شكرالك سا انور :) زرنا مجددا :lv

      حذف
  2. الكود الاليس بالقالب

    ردحذف
  3. أين أكتب 'خطأ الصفحة غير موجودة' في الكود و شكرا

    ردحذف
    الردود
    1. هذه العبارة 'خطأ الصفحة غير موجودة' مكتوبة داخل سكريبت لذى لن تحتاج أن تكتبها

      حذف
    2. أخي لا يظهر لي اي شيء : www.idea4cop.blogspot.com/l

      حذف
    3. انت محق .. لان هذا السكريبت https://723e12325b9f8f242ac8f7088af8c02ccc17b278.googledrive.com/host/0B1NQlV8aQ963bC1ta0lkd2ppMDg/ERROR-PAGE-NAK1HA.css
      للاسف لم يعد يعمل والاكواد التي كانت في السكريبت ضاعت مني
      لكن انشاء الله سأنشر صفحة خطأ اخرى
      وشكرا لزيارتك

      حذف

أخبار الانترنيت