أضافة صفحة خطأ 404 أحترافية و متحركة لمدونة بلوجر - كوليكا ويب | هدفنا تطوير الويب العربي

صفحات المدونة

    Social Items

كوليكا ويب | هدفنا تطوير الويب العربي

و تقديم كل ماهو جديد و كل ما يخص بلوجر.


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

لتركيب هذه الصفحة عليكم الانتقال الى لوحة تحكم المدونة ثم الاتجاه الى تحرير القالب.


مباشرة بعد ذلك ابحث عن الوسم
<body> او <body في حالة ان لم تجد الوسم الاول, يمكنك البحث عن الوسم باستخدام Ctrl+F.
وضع هذه الاكواد مباشرة اسفله ⇣⇣




<b:if cond='data:blog.pageType == &quot;error_page&quot;'> 

<style>

/*=====================================

= errorPage By: "colica-web.blogspot.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 السابقة في حين كنت تتوفر عليها.

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


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

لتركيب هذه الصفحة عليكم الانتقال الى لوحة تحكم المدونة ثم الاتجاه الى تحرير القالب.


مباشرة بعد ذلك ابحث عن الوسم
<body> او <body في حالة ان لم تجد الوسم الاول, يمكنك البحث عن الوسم باستخدام Ctrl+F.
وضع هذه الاكواد مباشرة اسفله ⇣⇣




<b:if cond='data:blog.pageType == &quot;error_page&quot;'> 

<style>

/*=====================================

= errorPage By: "colica-web.blogspot.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 السابقة في حين كنت تتوفر عليها.
تحميل التعليقات

تابعنا عبر البريد الالكتروني

الاشعارات

Disqus Logo