لأفضل تصفح للمدونة

الخميس، 3 ديسمبر 2015

نعود لكم من قسم إضافات بلوجر ألا وهي إنشاء صفحة خطأ 404، كما سبق ونشرت الأشكال العديدة لهذه الخاصية المهمة في أي موقع فهذه المرة ستكون بشكل الأتباع Minions ومن لا يعرفهم فهم شخصيات مرحة تدخل البهجة لكل صغير وكبير وبها يمكنك أن تتميز بها بموقعك لأن بها حركة وكذلك مصمة بـCss لذا هي أكثر خفة وحتى لا أكثر الوقت في المميزات فمن الأحسن أن أترككم تشاهدون المعاينتان ومن ثم ندخل للشرح
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <head> ثم ضع أسفله بسطور الكود التالي
 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>الصفحة غير موجودة ~ <data:blog.title/></title>
</b:if>
3. ابحث عن <body> ضع كود الشكل الذي تريد أسفله
الشكل الأول
<b:if cond="data:blog.pageType == &quot;error_page&quot;">
<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 == &quot;error_page&quot;">
<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 تعليقات على " إنشاء صفحة الخطأ بسهولة "

جميع الحقوق محفوظة طريقة                                                                                                                           تطوير وتكويد     Mohamed Jiari | Ti9niFOUR