24‏/10‏/2014

2014-10-24T01:16:00+03:00
24‏/10‏/2014

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

[ html ] إنشاء صفحة خطأ 404 أحترافية الجزء الاول
[ html ] إنشاء صفحة خطأ 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>


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



عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

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

[ html ] إنشاء صفحة خطأ 404 أحترافية الجزء الاول بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة ...

الساعه : 2014-10-24T01:16:00+03:00
تاريخ : 24‏/10‏/2014
من : المملكة العربيه السعوديه
التعليقات : 6
    انشرها :
تاق :
اسرار بلوجر › افكار › الارشفة seo › بلوجر › تصاميمي لكم › تعديل القالب ›
في

هناك 6 تعليقات:

  1. DANA24/10/14 12:01

    شكرا لك الدرس الي كنت ابيه انا يعطيك العافيه
    وبنتظار المزيد من الشروحات

    ردحذف
  2. goust24/10/14 16:19

    نعم سأضعه في شرح قريب ان شاءالله.

    ردحذف
  3. mohammed al-shami3/11/14 20:59

    ولكن اخي انت لم تعمل مدونة جديدة

    ردحذف
    الردود
    1. goust5/11/14 00:29

      نعم لانه يصعب شرحها , معقده.

      حذف
  4. غير معرف14/2/15 08:09

    جميللل جداا ارتفعت سرعة مدونتي الى 98% شكراً لك اخي

    ردحذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ولا ننشر تعليق يخص مدونات تخالف الشريعة الإسلامية , اما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولا بمحول الأكواد , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار صندوق التعليقات.

يمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود :
ت1 ت2 ت3 ت4 ت5 ت6 ت7 ت8 ت9 ج1 ج2 ج3 ج4 ج5 ج6 ج7 ج8 ج9 د1 د2

الاشتراك في: تعليقات الرسالة (Atom)

قالب حلول بلوجر النسخة الثالثه

قالب حلول بلوجر النسخة الثالثه متاح للتحميل , قالب يتميز بالاحترافيه والخفة والسرعه اضافة الى الارشقة الممتازة.

أقرأ الموضوع

الاشتراك في القائمة البريدية

هنا تستطيع الإشتراك في قائمتنا البريدية ضع إيملك بالأسفل وأضغط إشتراك ولا تنسي تأكيد إشتراكك من خلال بريدك الإلكتروني

الاسم

بريد إلكتروني

رسالة