الرئيسيه» دروس» إنشاء صفحة خطأ 404 أحترافية الجزء الاول - مدونة ايجى استايل

إنشاء صفحة خطأ 404 أحترافية الجزء الاول - مدونة ايجى استايل

تعليقات



بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته.

[ html ] إنشاء صفحة خطأ 404 أحترافية الجزء الاول 


صفحة الخطأ هي من اهم الصفحات التي يجب ان يتم التركيز عليها من قبل صاحب الموقع حيث انها يجب ان تكون منظمه وسهله للزائر بحيث يستوعب ويفهم ان الرابط غير موجود والصفحة التي اتى ليبحث عنها غير موجوده او تم حذفها , لذالك نحن سنقوم بتصميم صفحة خطأ 404 مخصصة وذات تنسيق جميل وسنضعها في الموقع .




مميزات صفحة الخطأ 404 المخصصة : 


  • مربع بحث .
  • تنسيق حصري.
  • خط كوفي.
  • عبارة 404! لكي يفهم الزائر انها صفحة خطأ.
  • ايضا اضفنا جملة بسيطة.

مثال مباشر : http://blog.7lolblogger.com/p/404.html


او جرب اي رابط خاطء في مدونتي :
http://blog.7lolblogger.com/2014/04/gggggggg.html
http://blog.7lolblogger.com/2014/04/dddddddd.html
http://blog.7lolblogger.com/2014/04/aaaaaaaaa.html
لا يهم , اي رابط خاطئ سيتم تحويلة الى صفحة مخصصة.


صورة : 

[ html ] إنشاء صفحة خطأ 404 أحترافية الجزء الاول
[ html ] إنشاء صفحة خطأ 404 أحترافية الجزء الاول




الكود :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
  <title><$BlogPageTitle$></title>

</head>


<body>
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<br /></div>
<div class="error-7lolblogger">
<div class="error-all">
<div class="error-all-all">
<div class="error-7lol-left">
<span>
404!</span>
  </div>
<div class="error-7lol-right">
<div class="error-right-right">
نعتذر منك الصفحة التي تحاول الدخول اليها , قد حذفت او تم تغير الرابط , قد تجدها اذا جربت البحث.
    <br />
جرب ان :
      <br />
<ul>
<li>تبحث في المدونة فقد يكون الرابط تم تغيره.</li>
<li>شاهد <a href="http://blog.7lolblogger.com/p/sitemap.html">فهرس المدونة.</a></li>
<li>ادخل  <a href="http://blog.7lolblogger.com/">الرئيسيه.</a></li>
<li>ارجع الى <a href="javascript:history.go(-1)" title="الصفحة السابقة">الصفحة السابقة.</a></li>
</ul>
</div>
<div class="error-left-right">
</div>
<div id="wc-searchblack33">
<form action="http://blog.7lolblogger.com/search" id="wc-searchblackbox33" method="get">
<input id="wc-searchblackinput33" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;البحث عن...&quot;;}" onfocus="if (this.value == &quot;البحث عن...&quot;) {this.value = &quot;&quot;}" type="text" value="البحث عن..." />
  <input id="wc-searchblacksubmit33" type="submit" value="أبحث" />
</form>
</div>
</div>
</div>
</div>
</div>
<style>
@font-face{font-family: 'Droid Arabic Naskh';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot);
src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.ttf) format('truetype');}@font-face{font-family: 'Droid Arabic Naskh';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.eot);
src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.ttf) format('truetype');}
.error-all {
width: 100%;
position: relative;
margin: 0 auto;
top: 25%;
height: 325px;
background: #333 url(data:image/png;base64,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);
color: #fff;
text-align: right;
direction: rtl;
font: 12px Droid Arabic Naskh;
border: 10px solid #222;
border-right: 0;
border-left: 0;
}
.error-all-all {
width: 900px;padding: 0;
display: table;
margin: 0 auto;
}
.error-7lol-left {
float: left;
width: 400px;
height: 285px;
padding: 30px 0 0 15px;
}
.error-7lol-right {
width: 430px;
height: 285px;
float: right;
padding: 30px 0 0 15px;
border-left: 1px solid #222;
box-shadow: 1px 0 0 #333 inset;
}
.error-right-right {
float: right;line-height: 19px;width: 270px;
}
.error-left-right {
float: left;
}
.error-right-right ul li:before {
content: "\f0d9";
padding: 0 3px;
color: #FFFFFF;
font: 12px fontawesome;
}
.error-right-right ul {
list-style: none;
}
.error-right-right ul {
padding: 0;
}
.error-right-right a {
color: #FFA46C;
text-decoration: none;
}
.error-left-right:before {
content: "\f0f0";
font: 130px fontawesome;
}
.error-7lol-left span {
font-size: 240px;
font-family: tahoma,arial;
}
.error-7lol-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;
font: 10px Droid Arabic Naskh;
outline: 0;
border: 1px solid transparent;
border-left: 1px solid #ccc;
color: #2D2D2D;
border-radius: 0 3px 3px 0;
width: 280px;
float: right;
margin: 0;
background: #FFFFFF;
}
input#wc-searchblacksubmit33 {
padding: 5px;
font: 10px Droid Arabic Naskh;
outline: 0;
border: 1px solid transparent;
border-right: 0;
color: #fff;
border-radius: 3px 0 0 3px;
float: right;
margin: 0;
background: #FF711A;
cursor: pointer;
}
form#wc-searchblackbox33:after {
content: "\f002";
font: 15px fontawesome;
position: absolute;
left: 55px;
color: #ccc;
top: 10px;
padding: 8px 6px;
border-left: 1px solid #ccc;
border-right: 1px solid #ddd;
background: #eee;
}
.error-7lolblogger {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: block;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABkdpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6SXB0YzR4bXBDb3JlPSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wQ29yZS8xLjAveG1sbnMvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcDpNb2RpZnlEYXRlPSIyMDEzLTEwLTEyVDIzOjAzOjE0KzAzOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDEzLTEwLTEyVDIzOjAzOjE0KzAzOjAwIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxMy0xMC0xMVQyMTo0MDoyNyswMzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpBdXRob3JzUG9zaXRpb249IkFpc2ggZGVzaWduIiB4bXBSaWdodHM6TWFya2VkPSJUcnVlIiB4bXBSaWdodHM6V2ViU3RhdGVtZW50PSJ3d3cuYWlzaC5nciIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1M0M4OEM5QTMzNzkxMUUzQURBNkE4MzI4NkQ0Q0RGMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1M0M4OEM5QjMzNzkxMUUzQURBNkE4MzI4NkQ0Q0RGMyI+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+QWlzaCBkZXNpZ248L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8ZGM6c3ViamVjdD4gPHJkZjpCYWc+IDxyZGY6bGk+QWlzaDwvcmRmOmxpPiA8cmRmOmxpPkdyZWF0aXZlczwvcmRmOmxpPiA8L3JkZjpCYWc+IDwvZGM6c3ViamVjdD4gPGRjOmNyZWF0b3I+IDxyZGY6U2VxPiA8cmRmOmxpPkFpc2ggZGVzaWduPC9yZGY6bGk+IDwvcmRmOlNlcT4gPC9kYzpjcmVhdG9yPiA8SXB0YzR4bXBDb3JlOkNyZWF0b3JDb250YWN0SW5mbyBJcHRjNHhtcENvcmU6Q2lBZHJDaXR5PSJBdGhlbnMiLz4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTNDODhDOTgzMzc5MTFFM0FEQTZBODMyODZENENERjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTNDODhDOTkzMzc5MTFFM0FEQTZBODMyODZENENERjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6xBYqIAAAAHElEQVR42mJgYGAw/P//PwM6zQjlYAW01gEQYAAxICWZJgAu/QAAAABJRU5ErkJggg==);
}
header,#background,#newsticker,footer,div#menu-93,.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></div>
</body>
</html>


طريقة التركيب في الدرس القادم من هنا .
استبدل فقط الاشياء ذات اللون الاحمر , بما يخصك من روابط وغيره.


0 التعليقات:

إرسال تعليق