1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <head> ثم ضع أسفله بسطور الكود التالي
<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>
* إضافة صفحة الخطأ لقوالب بلوجر
* تهيئة وتغيير شكل صفحة الخطأ 404
* إضافة صفحة الخطأ الشكل الثاني
0 تعليقات على " إنشاء صفحة الخطأ بسهولة "