صفحة خطأ 404 بتصميم أنيق



السلام عليكم ورحمة
الله وبركاته


نعود لكم بتدوينة جديدة نقدم لكم فيها صفحة الخطئ 404 احترافية من تطوير عصام ويب




طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي اسفل <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>

      1. ابحث عن <body> وضع اسفله الكود التالي
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <div id='oopss'> <div id='imgbackiss'> <section class='error-container' style=' text-align: center; font-size: 106px; font-family: &apos;Catamaran&apos;, sans-serif; font-weight: 800; margin: 70px 15px; margin-top: 15% !important; '> <span class='four' style='display: inline-block;position: relative;width: 136px;height: 43px;border-radius: 999px;background: linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%), linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%), linear-gradient(to right, #fd9107, #f65605);'><span class='screen-reader-text' style=' position: absolute; top: -9999em; left: -9999em; '>4</span></span> <span class='zero' style='vertical-align: text-top;width: 156px;height: 156px;border-radius: 999px;background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%), linear-gradient(to top right, #f44b04, #f44e04, #fc8c06, #fd9507, #f86505, #fe9407, #fe9407);overflow: hidden;animation: bgshadow 5s infinite;display: inline-block;position: relative;'><span class='screen-reader-text' style=' position: absolute; top: -9999em; left: -9999em; '>0</span></span> <span class='four' style='display: inline-block;position: relative;width: 136px;height: 43px;border-radius: 999px;background: linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%), linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%), linear-gradient(to right, #fd9207, #fb7e06);'><span class='screen-reader-text' style=' position: absolute; top: -9999em; left: -9999em; '>4</span></span> </section> <div id='error-text'> <p>الصفحة التي تبحث عنها غير موجودة !</p> <piss> يمكنك العودة الى <a class='back' href='/'><i class='fa fa-toggle-on'/> الرئيسية</a> او الابلاغ عن <a class='brokurl' href='/'><i class='fa fa-toggle-on'/>رابط معطوب</a></piss> </div> </div> </div> </b:if>
    

      1. ثم ابحث عن </head> وضع الكود التالي فوقه
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'><style type='text/css'>                /* CSS Error Page */
      piss {
          margin: 0!important;
          font-family: droid arabic kufi;
          color: #242f3a;
          font-size: 16px;
      }
      #error-text a.brokurl {
          display: inline-block;
          margin: 10px auto;
          background: linear-gradient(to left, #f44904, #fe9807);
          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;
      }
      div#imgbackiss {
          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;
      }
      #oopss {background:#fff;text-align: center;
          position: absolute !important;
          top: 0;
          font-weight: 400;
          font-size: 30px;
          font-family: &#39;Roboto Condensed&#39;,sans-serif;
          width: 100%;
          height: 100%;
          z-index: 9999999;
          background-size: 100% 100%;}
      #error-text {position:relative;font-size:30px;    color: white;}
      img.errorisspage {
          width: 10%;
          margin: -25px 0 0 0;
      }
      
      .error-container &gt; span.zero:after {
          content: &#39;&#39;;
          display: block;
          position: absolute;
          border-radius: 999px;
          width: 70px;
          height: 70px;
          left: 43px;
          bottom: 43px;
          background: #FDFAF5;
          box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
      }
      .error-container &gt; span.zero:before {
          content: &#39;&#39;;
          display: block;
          position: absolute;
          transform: rotate(45deg);
          width: 90px;
          height: 90px;
          background-color: transparent;
          left: 0px;
          bottom: 0px;
          background: linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%), linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
      }
      .error-container &gt; span.four:after {
          width: 137px;
          height: 43px;
          transform: rotate(-49.5deg);
          left: -18px;
          bottom: 36px;
          background: linear-gradient(to right, #f65405, #f75e05, #fa7805, #fb7f06, #fe9707);
      }
      .error-container &gt; span.four:before, .error-container &gt; span.four:after {
          content: &#39;&#39;;
          display: block;
          position: absolute;
          border-radius: 999px;
      }
      .error-container &gt; span.four:before {
          width: 43px;
          height: 156px;
          left: 60px;
          bottom: -43px;
          background: linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%), linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%), linear-gradient(to top, #f55004, #f76205, #fb8006, #fb8206, #fe9607);
      }
      
      #error-text a{color:#aaa;}
      #error-text p {margin:0!important;  font-family: droid arabic kufi;    color: #242f3a;}
      #error-text span {color:#008a8b;font-size:120px;font-weight:700;letter-spacing:0.1em;    font-family: sans-serif;}
      #error-text a.back {  display: inline-block;
          margin: 10px auto;
          background: linear-gradient(to left, #f44904, #fe9807);
          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-fadae {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;}}
      a.menu-btn.ortilex-tooltip.ortilex-tooltip-bottom {
          display: none;
      }</style></b:if>

        1. اي استفسار او مشكلة ضعها بتعليق

      ليست هناك تعليقات:

      إرسال تعليق