الثلاثاء، 8 مايو 2018

احصل على هذة الاداة من هنا

صفحة خطأ 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. اي استفسار او مشكلة ضعها بتعليق


      EmoticonEmoticon