![[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsKajTZpsRWSwijDNPzZWU4y0frb-IeMOo9hyoe0vwzDj0lQabogU-NRKEgoLOLgK_oWpbbZRQ7PldV0kBGlWm_E0UdvJhSwujBra9u_TIFyhs8b8fgeaRXhuU5kfvTadX9jY4_6jGTOV/s72-c/Untitled-232.png)
![[ html ] إنشاء صفحة خطأ 404 أحترافية الجزء الاول](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqcIpME_p7RXhEr7hzZieUKwFAqhRvYS6FSpXEW-1hC6MkFRhVeq_WtATsVZPKe_bXBy4OGwFM3L_oJGeroit8hm6fl1lDPtJb07YwkugeOM2xMUd6DE8aW6_MmoAO2X7OSwQPryp79nv/s1600/Untitled-dd2.png "[ 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 أحترافية الجزء الاول](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-0ULItTIRIthOZxQZE2sn6ATsKKFeTrVSrD3tWh8SDJEZTyvXM7577ksj5qOOPQ4ljGKlqh36FNhYoUmzlVUA7m3CmT2qzHYMtrCktVoPT3lVebGkV_tSFZ2nPJYilLmv3_zXfcR_AVh/s1600/Untitled%D9%8A-4.gif "[ 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 == "") {this.value = "البحث عن...";}" onfocus="if (this.value == "البحث عن...") {this.value = ""}" 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 أحترافية الجزء الاول بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة ...
تاق :
تسلم شرح جميل جدا وتصميم اكثر من رائع .. محتاج كود مشاركات فى بداية المدونة هنا هل من الممكن الحصول علية او عمل درس لة وجزاك الله خير
ردحذفنعم سأضعه في شرح قريب ان شاءالله.
حذفشكرا لك الدرس الي كنت ابيه انا يعطيك العافيه
ردحذفوبنتظار المزيد من الشروحات
عفوا ت1.
حذفولكن اخي انت لم تعمل مدونة جديدة
ردحذفنعم لانه يصعب شرحها , معقده.
حذفجميللل جداا ارتفعت سرعة مدونتي الى 98% شكراً لك اخي
ردحذف