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

أكتوبر 10, 2017 ,

السلام عليكم ورحمة الله تعالى وبركته, اليوم سنقدم لكم صفحة خطأ 404 جديدة واحترافية ومتحركة لمدونات بلوجر والتي استعمل شخصيا في قالب مدونتي الحالي, الصفحة هي متطورة ومختلفة عن الصفحات الرائجة والتقليدية, الاضافة هي في الاصل كما ظاهرة في صورة Gif الموجود أعلاه, عند تركيبها في قالبك ستظهر للزائر عند دخوله الى رابط خاطئ او تدوينة تم حذفها ولم تعد متوفرة, بالنسبة لطريقة التركيب فهي بسيطة جدا.

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

  1. لتركيب هذه الصفحة عليكم الانتقال طبعا الى لوحة تحكم المدونة ثم الاتجاه الى تحرير القالب.
  2. مباشرة بعد ذلك ابحث عن الوسم <body> او <body في حالة ان لم تجد الوسم الاول, يمكنك البحث عن الوسم باستخذام Ctrl+f.
  3. وضع هذه الاكواد مباشرة اسفله ⇣⇣
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/*=====================================
= errorPage By: "www.Nak1ha.com"
=====================================*/
.flat .wrapper{display:none}.flat{background:#071f38;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-size:1.4rem;line-height:1.8;font-weight:400;letter-spacing:0;height:100%}.content{height:100vh;overflow:hidden;z-index:10;position:relative;-webkit-box-align:center;-moz-box-align:center;box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;-ms-flex-align:center;display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-ms-flex-pack:center}.content .content-box{width:auto;position:relative}.content .content-box .big-content{position:relative;width:22rem;min-height:22rem;margin:0 auto 3rem}.content .content-box .big-content .list-square{float:right}.content .content-box .big-content .list-line{float:right;margin-right:2rem}.content .content-box .big-content span.square{display:block;background:transparent;width:5rem;height:5rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;-ms-border-radius:.5rem;border-radius:.5rem;border:1rem solid #fff;margin-bottom:1.5rem}.content .content-box .big-content span.line{display:block;background:#fff;width:15rem;height:1rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;-ms-border-radius:.5rem;border-radius:.5rem;margin-bottom:2.3rem}.content .content-box .big-content span.line:nth-child(2){width:10rem}.content .content-box .big-content span.line:nth-child(4){width:10rem}.content .content-box .big-content span.line:nth-child(6){width:10rem}.content .content-box .big-content .fa-search{position:absolute;top:10rem;left:15rem;font-size:10rem;color:#0099cc;-webkit-animation:corner 5s infinite;-moz-animation:corner 5s infinite;animation:corner 5s infinite}.content .content-box .big-content .fa-search.color{color:#FF0084}@-webkit-keyframes corner{0%{-webkit-transform:translate(-2rem,0);-webkit-animation-timing-function:0,0.02,0,1.01}20%{-webkit-transform:translate(-15rem,2rem)}40%{-webkit-transform:translate(-7rem,-7rem);animation-timing-function:cubic-bezier(0,0.02,0,1.01)}60%{-webkit-transform:translate(-15rem,-10rem)}80%{-webkit-transform:translate(2rem,-12rem)}100%{-webkit-transform:translate(-2rem,0)}}@-moz-keyframes corner{0%{-moz-transform:translate(-2rem,0);-moz-animation-timing-function:0,0.02,0,1.01}20%{-moz-transform:translate(-15rem,2rem)}40%{-moz-transform:translate(-7rem,-7rem);animation-timing-function:cubic-bezier(0,0.02,0,1.01)}60%{-moz-transform:translate(-15rem,-10rem)}80%{-moz-transform:translate(2rem,-12rem)}100%{-moz-transform:translate(-2rem,0)}}@keyframes corner{0%{-webkit-transform:translate(-2rem,0);-moz-transform:translate(-2rem,0);-ms-transform:translate(-2rem,0);-o-transform:translate(-2rem,0);transform:translate(-2rem,0);-webkit-animation-timing-function:0,0.02,0,1.01;-moz-animation-timing-function:0,0.02,0,1.01;animation-timing-function:0,0.02,0,1.01}20%{-webkit-transform:translate(-15rem,2rem);-moz-transform:translate(-15rem,2rem);-ms-transform:translate(-15rem,2rem);-o-transform:translate(-15rem,2rem);transform:translate(-15rem,2rem)}40%{-webkit-transform:translate(-7rem,-7rem);-moz-transform:translate(-7rem,-7rem);-ms-transform:translate(-7rem,-7rem);-o-transform:translate(-7rem,-7rem);transform:translate(-7rem,-7rem);animation-timing-function:cubic-bezier(0,0.02,0,1.01)}60%{-webkit-transform:translate(-15rem,-10rem);-moz-transform:translate(-15rem,-10rem);-ms-transform:translate(-15rem,-10rem);-o-transform:translate(-15rem,-10rem);transform:translate(-15rem,-10rem)}80%{-webkit-transform:translate(2rem,-12rem);-moz-transform:translate(2rem,-12rem);-ms-transform:translate(2rem,-12rem);-o-transform:translate(2rem,-12rem);transform:translate(2rem,-12rem)}100%{-webkit-transform:translate(-2rem,0);-moz-transform:translate(-2rem,0);-ms-transform:translate(-2rem,0);-o-transform:translate(-2rem,0);transform:translate(-2rem,0)}}.content-box p,.content-box h1{text-align:center;color:#fff}#particles-js{position:fixed;top:25vh;left:25vw;width:50vw;height:50vh;z-index:-10}.rightside,.rightmenu{display:none}.toogle_menu,.toogle_main{padding:16px;display:none;cursor:pointer;color:#fff}
</style>
<script>
$( &quot;body&quot; ).last().addClass( &quot;index&quot; );
</script>
<script>
$( &quot;body&quot; ).last().addClass( &quot;flat&quot; );
</script>
<div id='particles-js'><canvas class='particles-js-canvas-el' height='144' style='width: 100%; height: 100%;' width='680'/></div><div class='content'><div class='content-box'><div class='big-content'><div class='list-square'><span class='square'/><span class='square'/><span class='square'/></div><div class='list-line'><span class='line'/><span class='line'/><span class='line'/><span class='line'/><span class='line'/><span class='line'/></div><i aria-hidden='true' class='fa fa-search'/><div class='clear'/></div><h1>اووبس ! يبدو أن هناك خطأ ما</h1><p>الصفحة التي تبحث عنها غير موجودة<br/>يمكنك العودة <a href='/' style='color:#0099cc;'>للرئيسية</a></p></div></div>
 
              </b:if>
  1. بعد هذه العملية عليك حفظ القالب, ومبروك عليك الاضافة (صفحة الخطأ)

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

أضف تعليق ،،
نتيجة بحث الصور عن لا تقرأ وترحل

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

الاشتراك في: تعليقات الرسالة ( Atom )