Teroroid 1O1 : بالعلم نرقى Teroroid 1O1 : بالعلم نرقى
الأخبار

آخر الأخبار

الأخبار
recent
جاري التحميل ...
recent

اضافة صفحة الخطأ بشكل انيق مع ازرار التنقل

مواضيع مفيدة


السلام عليكم ورحمة الله تعالى وبركاته في درس جديد وموضوع آخر حول تغيير صفحة الخطأ 404, هذه المرة الصفحة متطورة حيث انها لا تحتوي على اي صورة التي تثقل قالب المدونة, بل الصفحة عبارة عن Svg متحركة مع زرين للعودة الى الخلف وزر آخرر للعودة الى الرئيسية, طريقة التركيب ستتعرفون عليها في الاسفل, ان واجهتم اي مشكلة في التركيب فباب التعليقات مفتوح للجميع !!

شرح طريقة التركيب:
  1. كالعادة ننتقل الى لوجة تحكم المدونة ثم تحرير القالب
  2. ثم ابحث عن الوسم <body باستعمال Ctrl+f
  3. واضف تحته هذه الاكواد
الكود:
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/*=====================================
= errorPage v3 By: "http://www.Teroroid1o1.com"
=====================================*/
  body {
  background-color: #2F3242;
}
svg {
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -250px;
  margin-right: -400px;
}
.message-box {
  height: 200px;
  width: 380px;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -100px;
  margin-right: 50px;
  color: #FFF;
  font-family: Roboto;
  font-weight: 300;
}
.message-box h1 {
  font-size: 60px;
  line-height: 46px;
  margin-bottom: 40px;
}
.buttons-con .action-link-wrap {
  margin-top: 40px;
}
.buttons-con .action-link-wrap a {
  background: #68c950;
  padding: 8px 25px;
  border-radius: 4px;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.3s linear;
  cursor: pointer;
  text-decoration: none;
  margin-left: 10px
}
.buttons-con .action-link-wrap a:hover {
  background: #5A5C6C;
  color: #fff;
}
#Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 {
  animation: float 1s infinite ease-in-out alternate;
}
#Polygon-2 {
  animation-delay: .2s;
}
#Polygon-3 {
  animation-delay: .4s;
}
#Polygon-4 {
  animation-delay: .6s;
}
#Polygon-5 {
  animation-delay: .8s;
}
@keyframes float {
100% {
    transform: translateY(20px);
  }
}
@media (max-width: 450px) {
  svg {
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -250px;
    margin-right: -190px;
  }
  .message-box {
    top: 50%;
    right: 50%;
    margin-top: -100px;
    margin-right: -190px;
    text-align: center;
  }
}
</style>
<svg width="380px" height="500px" viewBox="0 0 837 1045" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z" id="Polygon-1" stroke="#007FB2" stroke-width="6" sketch:type="MSShapeGroup"></path>
        <path d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z" id="Polygon-2" stroke="#EF4A5B" stroke-width="6" sketch:type="MSShapeGroup"></path>
        <path d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z" id="Polygon-3" stroke="#795D9C" stroke-width="6" sketch:type="MSShapeGroup"></path>
        <path d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z" id="Polygon-4" stroke="#F2773F" stroke-width="6" sketch:type="MSShapeGroup"></path>
        <path d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z" id="Polygon-5" stroke="#36B455" stroke-width="6" sketch:type="MSShapeGroup"></path>
    </g>
</svg>
<div class="message-box">
  <h1>404</h1>
  <p>الصفحة غير موجودة</p>
  <div class="buttons-con">
    <div class="action-link-wrap">
      <a onclick="history.back(-1)" class="link-button link-back-button">الرجوع الى الوراء</a>
      <a href="" class="link-button">الانتقال الى الصفحة الرئيسية</a>
    </div>
  </div>
</div>
  </b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
  1. بعدها ابحث عن الوسم </body>
  2. وضع فوقه مباشرة هذا الكود

</b:if>
ثم قم بعمل حفظ للقالب .. ومبروك عليك الاضافة

لا تنسى الإشتراك بقناتنا على اليوتيوب

عن الكاتب

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

قال سبحانه: مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ
لا تنسى ذكر الله

التعليقات



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

إتصل بنا

عن الموقع

موقع Teroroid 1o1 مختص في مجال التكنلوجيا و التقنيات و كل ما يخص الهواتف الذكية و الحواسيب ، و هدفي هو تصحيح الأفكار و الدروس الخاطئة في المحتوى العربي عن طريق دروس و حلقات في قناتنا على اليوتيوب ، و يسهر على إشراف و سير الموقع الشاب اللبناني ذو 15 عام ' معتصم الأيوبي ' الذي يحيكم و يشجعكم على الزيارة الدائمة و الإشتراك في موقعنا لتتوصل بكل جديد منا .

حمل تطبيقنا

Get it on Google Play

جميع الحقوق محفوظة

Teroroid 1O1 : بالعلم نرقى

2017