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

آخر المواضيع

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

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية

الخميس، 4 مايو، 2017

11:19:00 ص

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

لتركيب هذه الصفحة عليكم الانتقال طبعا الى لوحة تحكم المدونة ثم الاتجاه الى تحرير القالب.
مباشرة بعد ذلك ابحث عن الوسم <body> او <body في حالة ان لم تجد الوسم الاول, يمكنك البحث عن الوسم باستخذام Ctrl+f.
وضع هذه الاكواد مباشرة اسفله ⇣⇣
<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>
بعد هذه العملية عليك حفظ القالب, ومبروك عليك الاضافة (صفحة الخطأ)
ومن أجل سلامة تركيب هذه الصفحة عليك اولا التأكد من حذف اكواد صفحة 404 السابقة في حين كنت تتوفر عليها
  1. هناك ألف وسم <body
    ضع لنا مثال

    ردحذف
    الردود
    1. في غالبية القوالب يتواجد هذا الوسم مرة واحدة , يمكنك وضع رابط مدونتك لاعطيك الوسم وتظع الاكواد مباشرة

      حذف

مقالات