الســـلام عليـــكم ورحــمة الله و بركــاته اهلاً بيكم من شتى انحاء الدول العربية بنقدملكم النهاردة صفحة خطأ إحترافية بتعطى لمدونة مظهر إحترافى وده هيكون اول إصدار معانا من صفحات الخطأ وبنعدكم بصفحات خطأ اجما وأكثر إحترافية فى المرة القادمة بتمنى يعجبكم شكل الصفحة ودلوقتى عشان ما اطولش عليكم هنشرح بالتفصيل إزاى تركب الصفحة مع معاينة حية ليها 😃
معاينة الصفحة
معاينة
شرح التركيب
شرح التركيب
- لازم تتأكد ان مفيش اى صفحات خطأ قبل كدا فى قالبك
- هتبحث عن الوسم
<body> إذا لم تجده إبحث عن<body وضع الكود التالى أسفله
بعض التخصيصات الهامة<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
/* CSS Custom Error Page */
#oopss {background-color: #142D3A;position: fixed!important;position: absolute;text-align: center;top: 0;right: 0;bottom: 0;left: 0;z-index: 99999;}
.erorr{
background: #000;
color: #fff;
font-family: "NSA";
line-height: 1.5;
}
a {
color: #fff;
text-decoration: none;
border-bottom: solid 2px;
}
@media (min-width: 640px) {
.erorr{
background-image: url(//images.unsplash.com/photo-1467173572719-f14b9fb86e5f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=1199&h=799&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 100vh;
}
.content-err {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #333;
padding: 45px 20px 20px;
box-sizing: border-box;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
border-radius: 5px 5px 0 0;
}
.browser-bar-err {
background: #f9f9f3;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 5px;
overflow: hidden;
border-radius: 5px 5px 0 0;
}
.button-err {
display: inline-block;
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
margin-right: 5px;
}
.close-err {
background: #fc635d;
}
.min-err {
background: #fdbc40;
}
.max-err {
background: #34c84a;
}
.text {text-align:center;direction: rtl;font-size: 19px;}
}
</style>
<link href='//cdn.rawgit.com/MohamedAbodia/Nsa/master/style.css' rel='stylesheet'/>
<div id='oopss'>
<div class='erorr'>
<div class='content-err'>
<div class='browser-bar-err'>
<span class='close-err button-err'/>
<span class='min-err button-err'/>
<span class='max-err button-err'/>
</div>
<div class='mr-net'/>
<script>
$(function(){
$('.mr-net').typed({
strings: [
"خطأ الصفحة غير موجودة <br/> ^1000" +
"نأسف لذلك يبدو انك (ى) ضائع (ة) <br/> ^1000" +
"سوف يتم توجيهك للرئيسة حالاً <br/> ^1000"
],
typeSpeed: 0,
showCursor: false
});
});
/*<![CDATA[*/
// Typed.js | Copyright (c) 2017 Mr-Net | www.net-mr.blogsspot.com
!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.stringsElement=this.options.stringsElement,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s<t.strings.length;++s)t.sequence[s]=s;t.shuffle&&(t.sequence=t.shuffleArray(t.sequence)),t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},t.startDelay)},build:function(){var s=this;if(this.showCursor===!0&&(this.cursor=t('<span class="typed-cursor">'+this.cursorChar+"</span>"),this.el.after(this.cursor)),this.stringsElement){s.strings=[],this.stringsElement.hide();var e=this.stringsElement.find("p");t.each(e,function(e,i){s.strings.push(t(i).html())})}this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,i=this;i.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var o=1;/^\^\d+/.test(r)&&(r=/\d+/.exec(r)[0],o+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+o)}if("html"===i.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var a="",h="";for(h="<"===n?">":";";t.substr(s).charAt(0)!==h;)a+=t.substr(s).charAt(0),s++;s++,a+=h}}i.timeout=setTimeout(function(){if(s===t.length){if(i.options.onStringTyped(i.arrayPos),i.arrayPos===i.strings.length-1&&(i.options.callback(),i.curLoop++,i.loop===!1||i.curLoop===i.loopCount))return;i.timeout=setTimeout(function(){i.backspace(t,s)},i.backDelay)}else{0===s&&i.options.preStringTyped(i.arrayPos);var e=t.substr(0,s+1);i.attr?i.el.attr(i.attr,e):i.isInput?i.el.val(e):"html"===i.contentType?i.el.html(e):i.el.text(e),s++,i.typewrite(t,s)}},e)},e)}},backspace:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.backSpeed,i=this;i.timeout=setTimeout(function(){if("html"===i.contentType&&">"===t.substr(s).charAt(0)){for(var e="";"<"!==t.substr(s).charAt(0);)e-=t.substr(s).charAt(0),s--;s--,e+="<"}var r=t.substr(0,s);i.attr?i.el.attr(i.attr,r):i.isInput?i.el.val(r):"html"===i.contentType?i.el.html(r):i.el.text(r),s>i.stopNum?(s--,i.backspace(t,s)):s<=i.stopNum&&(i.arrayPos++,i.arrayPos===i.strings.length?(i.arrayPos=0,i.shuffle&&(i.sequence=i.shuffleArray(i.sequence)),i.init()):i.typewrite(i.strings[i.sequence[i.arrayPos]],s))},e)}},shuffleArray:function(t){var s,e,i=t.length;if(i)for(;--i;)e=Math.floor(Math.random()*(i+1)),s=t[e],t[e]=t[i],t[i]=s;return t},reset:function(){var t=this;clearInterval(t.timeout);var s=this.el.attr("id");this.el.after('<span id="'+s+'"/>'),this.el.remove(),"undefined"!=typeof this.cursor&&this.cursor.remove(),t.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var i=t(this),r=i.data("typed"),o="object"==typeof e&&e;r||i.data("typed",r=new s(this,o)),"string"==typeof e&&r[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
MRNET_redirect = setTimeout(function() {
location.pathname= "/"
}, 6500);
</script>
</div>
</div>
</div>
</b:if>
- الرقم 6500 إلى المدة التى سوف يتم تحويل الزائر بعدها للرئيسية يمكنك تغييرها بما يناسبك 😍
- كذلك يمكنك تغيير العبارات التى تكتب تلقائياً بما تشاء .
إلى هنا انتهى موضوع اليوم لاتنسى مشاركته مع الأخرين ليستفيد الجميع 😉
المصدر مستر نت
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).