السلام عليكم ورحمة الله تعالى وبركاته
مرحبا بكم اليوم في درس جديد وحصري على مدونة نكهة
نقدم لكم اليوم اضافة جديدة واحترافية وهي صفحة الخطأ 404 متحركة تعطي لمدونتك مضهرا جميلا خصوصا عندما تضغط على رابط غير شغال بالمدونة فتضهر هذه الصفحة وبعد 8ثواني تحولك مباشرة الى الرئيسية ونرجو ان تعجبكم الاضافة ولا تبخلو علينا بتعليقاتكم لتقديم المزيد اما عن طريقة التركيب فهي سهلة جدا ويستطيع اي شخص ان يعملها وسنمر الأن مباشرة للمعاينة.
ملاحظة: الصفحة من تصميم مدونة دبور فون www.dabourphone.com
مرحبا بكم اليوم في درس جديد وحصري على مدونة نكهة
نقدم لكم اليوم اضافة جديدة واحترافية وهي صفحة الخطأ 404 متحركة تعطي لمدونتك مضهرا جميلا خصوصا عندما تضغط على رابط غير شغال بالمدونة فتضهر هذه الصفحة وبعد 8ثواني تحولك مباشرة الى الرئيسية ونرجو ان تعجبكم الاضافة ولا تبخلو علينا بتعليقاتكم لتقديم المزيد اما عن طريقة التركيب فهي سهلة جدا ويستطيع اي شخص ان يعملها وسنمر الأن مباشرة للمعاينة.
ملاحظة: الصفحة من تصميم مدونة دبور فون www.dabourphone.com
يمكنك معاينة الصفحة من هنا
المعاينة لم تعد متوفرة
شرح طريقة التركيب
- ابحث عن الوسم </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>
- ثم قم بحفظ العمل
- ومبروك عليك الاضافة
- وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع.
أكثر من رائع ...
ردحذفشكرا لك ;) ومرورك اروع :LV
حذفواصل أخي اسماعيل
ردحذفشكرالك سا انور :) زرنا مجددا :lv
حذفرائع اخي شكرا لك *-*
ردحذفشكرا :lv زرنا مجددا ;)
ردحذفالكود الاليس بالقالب
ردحذفممكن توضح كلامك اخي =D
حذفرائع :)
ردحذفتحميل العاب, مهووسوا الحاسوب
شكرا لك :lv مرورك اروع :)
حذفأين أكتب 'خطأ الصفحة غير موجودة' في الكود و شكرا
ردحذفهذه العبارة 'خطأ الصفحة غير موجودة' مكتوبة داخل سكريبت لذى لن تحتاج أن تكتبها
حذفأخي لا يظهر لي اي شيء : www.idea4cop.blogspot.com/l
حذفانت محق .. لان هذا السكريبت https://723e12325b9f8f242ac8f7088af8c02ccc17b278.googledrive.com/host/0B1NQlV8aQ963bC1ta0lkd2ppMDg/ERROR-PAGE-NAK1HA.css
حذفللاسف لم يعد يعمل والاكواد التي كانت في السكريبت ضاعت مني
لكن انشاء الله سأنشر صفحة خطأ اخرى
وشكرا لزيارتك
تم تحديث الموضوع والاكواد أصبحت تشتغل بشكل جيد
ردحذف