إنشاء صفحة الخطأ بسهولة
الاشتراك في:
تعليقات الرسالة (Atom)
<b:if cond='data:blog.pageType == "error_page"'>
<title>الصفحة غير موجودة ~ <data:blog.title/></title>
</b:if>
<b:if cond="data:blog.pageType == "error_page"">
<div id="container-error">
<div class="banana"></div>
<div class="minion">
<div class="hair">
<div class="hair1"></div>
<div class="hair2"></div>
</div>
<div class="body">
<div class="monocle">
<div class="eye"></div>
</div>
</div>
</div>
<div id="buttonerror">
<a expr:href='data:blog.homepageUrl'>إلى الرئيسية</a></div>
</div>
<style>
#container-error{text-align:center;z-index:9999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#86CDEE;overflow:hiddencolor:#fff}
#buttonerror{clear: both; background-color: #504F4F; position: absolute; left: 0; right: 0; margin: auto; max-width: 200px; padding: 10px; z-index: 99999; transition: all .5s; font-family: droid arabic kufi;}
#buttonerror a{color:#fff;font-size:1.5rem;}
#buttonerror:hover{background-color:rgba(255,255,255,1)}
#buttonerror:hover a,#buttonerror a:hover{color:#FCDA6D}
.minion{width:488px;height:488px;box-shadow:1px 1px 3px 0px rgba(0,0,0, .5);border-radius:111px;
position:absolute;top:50%;left:50%;margin-top:-225px;margin-left:-244px;}
.minion::before{content: '';position:absolute;width:488px;height:595px;left:172px;top:117px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
background:linear-gradient(to right, rgba(0,0,0, .15), rgba(0,0,0, .0));
background:-webkit-linear-gradient(left, rgba(0,0,0, .15), rgba(0,0,0, .0));}
.hair,.hair1,.hair2,.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{position:absolute;bottom:0;}
.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{content:''}
.hair{left:138px;bottom:auto;top:26px;z-index:1}
.hair::before{left:10px;width:92px;height:52px;border-radius:0px 60px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair::after{left:106px;width:60px;height:103px;border-radius:69px 0 0px 0;box-shadow:inset 6px 0px 0 -4px #000}
.hair1{left:15px;width:91px;height:81px;border-radius:0px 70px 0 0;box-shadow:inset -6px 0px 0 -5px #000}
.hair1::before{left:27px;width:63px;height:96px;border-radius:0px 70px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair1::after{left:18px;width:70px;height:82px;border-radius:0px 100px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair2, .hair2::before, .hair2::after{width:100px;border-radius:200px 0 0 0;box-shadow:inset 6px 0 0 -4px #000}
.hair2{left:108px;height:98px}
.hair2::before{left:0;height:117px}
.hair2::after{left:0;height:63px}
.body{width:488px;height:488px;background:#DFC047;border-radius:111px;z-index:0;top:0;position:absolute;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(252,255,255, .3);}
.body::before{content:'';width:187px;height:111px;border-radius:100%;position:absolute;left:153px;top:294px;
box-shadow:0 -15px 0 -12px #000;
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-ms-transform:rotate(4deg);}
.body::after{content:'';width:120%;height:319px;border-radius:64%;position:absolute;bottom:-196px;left:-10%;background:#5482AA;}
.monocle{width:202px;height:202px;position:absolute;top:47px;left:143px;border-radius:100%;
background:linear-gradient(to bottom right, #A3A29F, #828282);
background:-webkit-linear-gradient(top left, #A3A29F, #828282);}
.monocle::before,
.monocle::after{content:'';z-index:-1;position:absolute;display:block;height:0;width:30px;top:31px;
border-bottom:144px solid #2A2A2A;border-left:5px solid transparent;border-right:5px solid transparent;left:-91px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);}
.monocle::after{left:auto;right:-91px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);}
.eye{width:160px;height:160px;background:#F3DE90;overflow:hidden;position:absolute;left:21px;top:21px;border-radius:100%}
.eye::before{content:'';width:160px;height:137px;border-radius:100%;background:#F3F0E7;position:absolute;top:0;left: 0;
animation:closeEye 10s infinite linear;
-webkit-animation:closeEye 10s infinite linear}
.eye::after{content:'';width:46px;height:46px;background:#624123;border-radius:100%;position:absolute;top:70px;left:61px;
animation:moveEye 10s infinite linear;
-webkit-animation:moveEye 10s infinite linear}
/*Eyelid Animation*/
@-webkit-keyframes closeEye{
0% {height:137px;top:7px;}
20%{height:60px;top:60px;}
39%{height:60px;top:60px;}
40%{height:137px;top:7px;}
}
@keyframes closeEye{
0% {height:137px;top:7px;}
20%{height:60px;top:60px;}
39%{height:60px;top:60px;}
40%{height:137px;top:7px;}
}
/*Pupil Animation*/
@-webkit-keyframes moveEye{
39%{top:70px;left:61px;}
40%{top:34px;left:81px;}
50%{top:34px;left:81px;}
51%{top:34px;left:21px;}
60%{top:34px;left:21px;}
61%{top:70px;left:61px;}
}
@keyframes moveEye{
39%{top:70px;left:61px;}
40%{top:34px;left:81px;}
50%{top:34px;left:81px;}
51%{top:34px;left:21px;}
60%{top:34px;left:21px;}
61%{top:70px;left:61px;}
}
</style>
</b:if>
<b:if cond="data:blog.pageType == "error_page"">
<div id="container-error">
<i class="jpminion"></i>
<div id="buttonerror">
<a expr:href='data:blog.homepageUrl'>إلى الرئيسية</a></div>
</div>
<style>
#container-error{text-align:center;z-index:9999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#E0E0E0;color:#fff}
#buttonerror{clear: both; background-color: #146696; position: absolute; left: 0; right: 0; margin: auto; max-width: 200px; padding: 10px; z-index: 99999; border: 4px solid #000; transition: all .5s; font-family: droid arabic kufi; top: 360px;}
#buttonerror a{color:#fff;font-size:1.5rem;}
#buttonerror:hover{background-color:rgba(255,255,255,1)}
#buttonerror:hover a,#buttonerror a:hover{color:#FCDA6D}
i {
font-family: droid arabic kufi;
font-size: 24px;
text-indent: -400px;
line-height: 200px;
}
.jpminion {
display: inline-block;
margin: 50px 0;
width: 150px;
height: 300px;
background: #fcda6d;
border-radius: 200px 200px 100px 100px;
cursor: pointer;
position: relative;
box-shadow: 3px 1px 0 0 #fac722, -55px 260px 0 -30px #e0e0e0, 55px 260px 0 -30px #e0e0e0, -55px 187px 0 -35px #fcda6d, 55px 187px 0 -35px #fcda6d;
/* arms ends*/
}
/* :after is for facial parts */
.jpminion:after {
position: absolute;
top: 70px;
left: 50px;
content: 'لم أجد الصفحة!';
width: 10px;
height: 10px;
border-radius: 10px;
display: block;
background: #000;
box-shadow: 0 -82px 0 4px #e0e0e0, 3px -84px 0 5px black, 35px -82px 0 4px #e0e0e0, 33px -84px 0 5px black, -2px -87px 0 9px #e0e0e0, 0 -88px 0 10px black, 37px -87px 0 9px #e0e0e0, 35px -88px 0 10px black, 40px 0 #000000, 0 0 0 3px #6f4a2d, 40px 0 0 3px #6f4a2d, -10px 0 0 20px #ffffff, 50px 0 0 20px #ffffff, -10px 0 0 30px #cccccc, 50px 0 0 30px #cccccc, -8px 1px 0 30px #333333, 50px 1px 0 30px #333333, -48px 0 0 5px black, 88px 0 0 5px black, -30px 45px 0 10px #fcda6d, 70px 45px 0 10px #fcda6d, 20px 30px 0 50px #fcda6d, 20px 40px 0 50px white, 20px 47px 0 50px #bd736a, 20px 58px 0 50px #bd736a, -65px 232px 0 13px black, -75px 228px 0 8px black, 115px 228px 0 8px black, 105px 232px 0 13px black, 20px 280px 0 30px #e0e0e0, -26px 250px 0 3px #146696, 69px 250px 0 3px #146696, -38px 258px 0 5px black, 81px 258px 0 5px black;
/* shoes' detail ends */
}
.jpminion:hover {
cursor: none;
}
.jpminion:hover:after {
content: 'تقبل اعتذاري';
box-shadow: 0 -82px 0 4px #e0e0e0, 3px -84px 0 5px black, 35px -82px 0 4px #e0e0e0, 33px -84px 0 5px black, -2px -87px 0 9px #e0e0e0, 0 -88px 0 10px black, 37px -87px 0 9px #e0e0e0, 35px -88px 0 10px black, 40px 0 #000000, 0 0 0 3px #6f4a2d, 40px 0 0 3px #6f4a2d, -10px 0 0 20px #ffffff, 50px 0 0 20px #ffffff, -10px 0 0 30px #cccccc, 50px 0 0 30px #cccccc, -8px 1px 0 30px #333333, 50px 1px 0 30px #333333, -48px 0 0 5px black, 88px 0 0 5px black, -15px 70px 0 20px #fcda6d, 53px 70px 0 20px #fcda6d, -10px 70px 0 20px #fac722, 48px 70px 0 20px #fac722, 20px 30px 0 50px #fcda6d, -65px 232px 0 13px black, -75px 228px 0 8px black, 115px 228px 0 8px black, 105px 232px 0 13px black, 20px 280px 0 30px #e0e0e0, -26px 250px 0 3px #146696, 69px 250px 0 3px #146696, -38px 258px 0 5px black, 81px 258px 0 5px black;
/* shoes' detail ends */
}
/* :before for pants */
.jpminion:before {
position: absolute;
top: 215px;
left: 30px;
content: '';
width: 90px;
height: 50px;
background: #146696;
border: 2px dotted #0b3853;
border-radius: 0 0 20px 20px;
box-shadow: 0 0 0 5px #146696, -38px 5px 0 -8px #fcda6d, 34px 5px 0 -8px #fcda6d, -20px 5px 0 10px #146696, 16px 5px 0 10px #146696, -2px 21px 0 28px #146696, -40px 95px 0 -21px black, 40px 95px 0 -21px black, 0 125px 0 5px #e0e0e0, 0 90px 0 -12px #e0e0e0, 0 90px 0 5px #146696, -35px 40px 0 0 #e0e0e0, 30px 40px 0 0 #e0e0e0;
}
</style>
</b:if>
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).