السلام عليكم ورحمة
الله وبركاته
نعود لكم بتدوينة جديدة نقدم لكم فيها صفحة الخطئ 404 احترافية من تطوير عصام ويب
طريقة التركيب:
- توجه الى القالب ثم تحرير html
- ضع الكود التالي اسفل <head>
<b:if cond='data:blog.pageType != "error_page"'> <title><data:blog.pageName/><data:blog.title/></title> </b:if> <b:if cond='data:blog.pageType == "error_page"'> <title>الصفحة غير موجودة ~ <data:blog.title/></title> </b:if>- ابحث عن <body> وضع اسفله الكود التالي
<b:if cond='data:blog.pageType == "error_page"'> <div id='oopss'> <div id='imgbackiss'> <section class='error-container' style=' text-align: center; font-size: 106px; font-family: 'Catamaran', sans-serif; font-weight: 800; margin: 70px 15px; margin-top: 15% !important; '> <span class='four' style='display: inline-block;position: relative;width: 136px;height: 43px;border-radius: 999px;background: linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%), linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%), linear-gradient(to right, #fd9107, #f65605);'><span class='screen-reader-text' style=' position: absolute; top: -9999em; left: -9999em; '>4</span></span> <span class='zero' style='vertical-align: text-top;width: 156px;height: 156px;border-radius: 999px;background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%), linear-gradient(to top right, #f44b04, #f44e04, #fc8c06, #fd9507, #f86505, #fe9407, #fe9407);overflow: hidden;animation: bgshadow 5s infinite;display: inline-block;position: relative;'><span class='screen-reader-text' style=' position: absolute; top: -9999em; left: -9999em; '>0</span></span> <span class='four' style='display: inline-block;position: relative;width: 136px;height: 43px;border-radius: 999px;background: linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%), linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%), linear-gradient(to right, #fd9207, #fb7e06);'><span class='screen-reader-text' style=' position: absolute; top: -9999em; left: -9999em; '>4</span></span> </section> <div id='error-text'> <p>الصفحة التي تبحث عنها غير موجودة !</p> <piss> يمكنك العودة الى <a class='back' href='/'><i class='fa fa-toggle-on'/> الرئيسية</a> او الابلاغ عن <a class='brokurl' href='/'><i class='fa fa-toggle-on'/>رابط معطوب</a></piss> </div> </div> </div> </b:if>
- ثم ابحث عن </head> وضع الكود التالي فوقه
<b:if cond='data:blog.pageType == "error_page"'><style type='text/css'> /* CSS Error Page */
piss {
margin: 0!important;
font-family: droid arabic kufi;
color: #242f3a;
font-size: 16px;
}
#error-text a.brokurl {
display: inline-block;
margin: 10px auto;
background: linear-gradient(to left, #f44904, #fe9807);
color: #fff;
padding: 6px 10px 3px;
font-size: 10px;
font-weight: 700;
line-height: normal;
border-radius: 3px;
transform: scale(1);
transition: all 0.5s ease-out;
}
div#imgbackiss {
text-align: center;
margin-bottom: 50px;
font-weight: 400;
font-size: 30px;
font-family: 'Roboto Condensed',sans-serif;
position: fixed;
width: 100%;
height: 100%;
line-height: 1.5em;
z-index: 9999;
}
#oopss {background:#fff;text-align: center;
position: absolute !important;
top: 0;
font-weight: 400;
font-size: 30px;
font-family: 'Roboto Condensed',sans-serif;
width: 100%;
height: 100%;
z-index: 9999999;
background-size: 100% 100%;}
#error-text {position:relative;font-size:30px; color: white;}
img.errorisspage {
width: 10%;
margin: -25px 0 0 0;
}
.error-container > span.zero:after {
content: '';
display: block;
position: absolute;
border-radius: 999px;
width: 70px;
height: 70px;
left: 43px;
bottom: 43px;
background: #FDFAF5;
box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
}
.error-container > span.zero:before {
content: '';
display: block;
position: absolute;
transform: rotate(45deg);
width: 90px;
height: 90px;
background-color: transparent;
left: 0px;
bottom: 0px;
background: linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%), linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
}
.error-container > span.four:after {
width: 137px;
height: 43px;
transform: rotate(-49.5deg);
left: -18px;
bottom: 36px;
background: linear-gradient(to right, #f65405, #f75e05, #fa7805, #fb7f06, #fe9707);
}
.error-container > span.four:before, .error-container > span.four:after {
content: '';
display: block;
position: absolute;
border-radius: 999px;
}
.error-container > span.four:before {
width: 43px;
height: 156px;
left: 60px;
bottom: -43px;
background: linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%), linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%), linear-gradient(to top, #f55004, #f76205, #fb8006, #fb8206, #fe9607);
}
#error-text a{color:#aaa;}
#error-text p {margin:0!important; font-family: droid arabic kufi; color: #242f3a;}
#error-text span {color:#008a8b;font-size:120px;font-weight:700;letter-spacing:0.1em; font-family: sans-serif;}
#error-text a.back { display: inline-block;
margin: 10px auto;
background: linear-gradient(to left, #f44904, #fe9807);
color: #fff;
padding: 6px 10px 3px;
font-size: 10px;
font-weight: 700;
line-height: normal;
border-radius: 3px;
transform: scale(1);
transition: all 0.5s ease-out;}
#error-text a.back:hover {background:#181818;color:#fff;}
#error-text a.back:active {-webkit-transform:scale(0.95);-moz-transform:scale(0.95);transform:scale(0.95);background:#F23D3D;color:#fff;}
.fa-frown-o:before {content: "\f119";color: #F23D3D;}
.er-fadae {font-size: 18px!important;font-family: droid arabic kufi;}
/* CSS Error Page Responsive */
@media only screen and (max-width:640px){
#error-text {color:#aaa;font-size:20px;}
#error-text span {font-size:60px;}
#error-text a.back {padding:5px 10px;font-size:12px;}
#error-text a.back:hover,#error-text a.back:active {border:0;}}
a.menu-btn.ortilex-tooltip.ortilex-tooltip-bottom {
display: none;
}</style></b:if>- اي استفسار او مشكلة ضعها بتعليق