السلام عليكم ورحمة الله وبركاته في هذا الدرس سأتكلم لكم عن أهمية صفحة الخطأ 404 وكيفية إنشاءها.
صفحة الخطأ 404 مهمة لكل موقع أو مدونة فهي تعمل على إعطاءتوجيهات للزائر, وتقديم خيارات له يمكن استخدامها للوصول إلى ما يبحث عنه, وهذا سيجعله يستمر في تصفح موقعك, وهي تتكون من عدة أجزاء مهمة وهي كالتالي :
● رسالة الخطأ :
● مربع البحث :
● مواضيع مميزة :
● الروابط الرئيسية :
الأن سنأتي إلى طريقة إنشاء صفحة خطأ على مدونتكم مثل صفحة خطأ 404 لمطورون ويمكنكم معاينتها من الرابط التالي :
طريقة التركيب :
1- إذهب إلى القالب > تحرير HTML > ابحث عن <head> وأضف أسفله الكود التالي :<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
2- ابحث عن <body> أضف بعده أسفله الكود التالي : <!-- by mtawroon.com -->
<b:if cond='data:blog.pageType == "error_page"'>
<div class='error-page'>
<div class='error-all'>
<div class='error-left-right'>
</div>
<div class='error-all-all'>
<div class='error-left'>
<span>ops! 404</span>
</div>
<div class='error-right'>
<div class='error-right-right'>
نعتذر منك الصفحة التي تحاول الدخول اليها , قد حذفت او تم تغير الرابط , قد تجدها اذا جربت البحث عبر نمودج البحث أسفله
<br/>
<div id='wc-searchblack33'>
<form action='http://mtawroon.com/search' id='wc-searchblackbox33' method='get'>
<input id='wc-searchblackinput33' name='q' onblur='if (this.value == "") {this.value = "البحث عن...";}' onfocus='if (this.value == "البحث عن...") {this.value = ""}' type='text' value='البحث عن...'/>
<input id='wc-searchblacksubmit33' type='submit' value='أبحث'/>
</form>
</div>
<br/>
<ul>
أو بإمكانك القيام بالإجراءات التالية :
<li>شاهد <a href='http://mtawroon.com/p/sitemap.html'>فهرس المدونة.</a></li>
<li>ادخل <a href='http://mtawroon.com/'>الرئيسيه.</a></li>
<li>ارجع الى <a href='javascript:history.go(-1)' title='الصفحة السابقة'>الصفحة السابقة.</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
.error-all {
width: 100%;
position: relative;
margin: 0 auto;
height: 100%;
color: #fff;
text-align: right;
direction: rtl;
font: 12px Droid Arabic Naskh;
border-right: 0;
border-left: 0;
}
.error-all-all {
padding: 0;
display: table;
margin: 0 auto;
margin-bottom: 50px;
}
.error-left {
text-align: center;
}
.error-right {
width: 100%;
height: 100%;
padding: 30px 0 0 15px;
}
.error-right-right {
font-size: 20px;
color: #333;
text-align:center;
}
.error-left-right {
text-align: center;
margin-top: 70px;
}
.error-right-right ul li:before {
content: "\f177";
padding: 0px 4px;
color: #0894D8;
font: 17px fontawesome;
}
.error-right-right ul {
padding: 0;
float: right;
text-align: right;
}
.error-right-right li{
font-size: 14px;
}
.error-right-right a {
color: #0894D8;
text-decoration: none;
font-size: 15px;
}
.error-left-right:before {
content: "\f119";
font: 250px fontawesome;
color: #333;
}
.error-left span {
font-size: 200px;
font-family: tahoma,arial;
text-align: center;
color: #333;
}
.error-right p {
color: #B6B6B6;
text-shadow: 1px 1px #111;
background: #111;
padding: 5px;
border-radius: 4px;
position: relative;
height: 60px;
}
.error-right-right p:after {
content: "\f0d9";
font: 27px fontawesome;
position: absolute;
left: -8px;
top: 20px;
color: #111;
}
div#wc-searchblack33 {
width: 340px;
display: inline-block;
padding: 5px;
position: relative;
}
form#wc-searchblackbox33 {
margin: 5px 0;
}
input#wc-searchblackinput33 {
padding: 5px;
outline: 0;
border: 1px solid #ccc;
color: #BABABA;
border-radius: 0 3px 3px 0;
width: 280px;
float: right;
margin: 0;
background: #FFFFFF;
font-size: 12px;
}
input#wc-searchblacksubmit33 {
padding: 6px;
outline: 0;
border: 1px solid transparent;
border-right: 0;
color: #fff;
border-radius: 3px 0 0 3px;
float: right;
margin: 0;
background: #0894D8;
cursor: pointer;
font-size: 14px;
}
.error-page {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: block;
}
header,#background,#newsticker,footer,.blog-feeds,.comments,h1.post-title.entry-title,div#blog-pager,.copyright{display: none!important;}
.centerat,div#posts,.page{background: transparent!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important;width: 100%!important;padding: 0!important;margin: 0!important;}
.post-body {
padding: 0!important;
}
</style></b:if> اللون البرتقالي : الروابط التي يجب تغييرها بروابط مدونتك.اللون الأزرق : العناصر التي تم إخفائها بإمكانك إخفاء عناصر أخرى بإضافتها في نفس السطر.
إلى هنا انتهى درسنا حول أهمية صفحة الخطأ 404 ومكوناتها وكيفية إنشائها أتمنى أن يكون قد نال إعجابكم دمتم في أمان الله
ليست هناك تعليقات:
إرسال تعليق