صفحة خطأ 404 هي الصفحة التي سيشاهدها الزائر عند محاولة الوصول إلى صفحة غير موجودة في مدونتك ، إما بسبب حذف الصفحة أو رابط معطل أو بسبب زائر أخطأ في كتابة عنوان url.
أحد متطلبات التنقل الجيد في المدونة هو تقديم أهداف وخيارات واضحة عندما يكون الزوار في صفحة في مدونتك. وبالمثل مع صفحة الخطأ 404
هناك ثلاثة أسباب في رأيي ، لذلك أشعر بتحسن إذا استخدمت صفحة الخطأ 404 المخصصة الخاصة بي بدلاً من استخدام صفحة الخطأ 404 المقدمة من blogspot.
1-المعلومات المقدمة ليست غنية بالمعلومات لأنها تقول فقط "معذرة ، الصفحة التي تبحث عنها في هذه المدونة غير موجودة". ، لذلك يبدو الانطباع مملًا جدًا وغير جذاب.
2-تظهر هذه الصفحة في النص الأساسي (حيث تظهر الصفحة المنشورة / الثابتة) ولا تزال تعرض الرأس والشريط الجانبي والتذييل. يمكن أن يكون هذا عقبة بالنسبة لأولئك الذين هم بالفعل ناشر Adsense ووضعوا إعلانات خارج الجسم الرئيسي. لذلك عند ظهور خطأ صفحة 404 ، سيستمر ظهور الإعلان وهذا أحد الأشياء التي لا ينصح المعلنون بعرضها على تلك الصفحة.
3-باستخدام صفحة الخطأ 404 المخصصة ، يمكننا تقديم معلومات أوضح أو توفير خيارات البحث أو تقديم توجيهات للزوار للانتقال إلى الصفحة الرئيسية. بهذه الطريقة ، لا يزال بإمكان كل زائر يأتي (سواء من محركات البحث أو الإحالات ، الدخول إلى مدونتنا وزيارتها)
لذلك ، هذه المرة ستقدم أرفيتيم معلومات عن كيفية القيام بذلك
كيفية إضافة صفحة خطأ 404 مع نموذج بحث يمكنك تعديله مرة أخرى بحيث يكون أكثر إفادة ويجعل الزائرين مرتاحين عند العثور على الصفحة المفقودة.
كيفية إضافة صفحة خطأ 404 مع نموذج البحث
قم بتسجيل الدخول إلى Blogger ، ثم انتقل إلى تحرير سمة HTML ، وابحث عن رمز </head>
ثم ضع الكود التالي فوقه.
<b:if cond='data:view.isError'>
<style type='text/css'>
/* Error 404 */
body{background:#fff;line-height:1.4em}
#error-page{background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
#error-inner{margin:9% auto 35px;padding:0;list-style:none!important}
#error-inner .box-404{display:inline-block;position:relative;font-weight:bold;width:200px;height:200px;background:#e84118;color:#fff;font-size:70px;line-height:190px;margin:25px auto}
#error-inner .box-404::after{content:'';width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
#error-inner .box-404::before{content:'';width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#fff transparent transparent #fff;display:block}
#error-inner .box-404 div::after{content:'';width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparent transparent #fff #fff;display:block}
#error-inner .box-404 div::before{content:'';width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparent #fff #fff transparent;display:block}
#error-inner h3{text-transform:uppercase;color:#ed5858;font-size:50px;margin:0 auto 20px;font-weight:700;letter-spacing:10px}
#error-inner h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px}
#error-inner p{line-height:1.7em;font-size:18px;color:#111;padding:0;margin:15px auto 0 auto}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#aaa;vertical-align:middle}
#search-404 .icon-Forward{width:20px;height:20px}
#search-404 p{font-size:90%;color:#999;padding:20px 20px 0;text-align:right}
#search404 input[type=search]{width:100%;border-radius:99em;height:48px;box-shadow:0 10px 12px rgba(0,0,0,.05);border:1px solid rgba(0,0,0,0.05);padding:0 48px 0 20px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fafafa;transition:all .6s}
#search404 input[type=search]:hover{border-color:rgba(0,0,0,0.08)}
#search404 input[type=search]:focus{background:#fff;border-color:#74b9ff}
#search404 .src-btn404{background:transparent;border:none;padding:0 16px;outline:none;height:48px;line-height:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:600px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>
الخطوة التالية ، ابحث عن الكود <body> ثم ضع هذا الرمز أسفله.
<b:if cond='data:blog.pageType != "error_page"'>ابحث عن كود </body> ثم ضع الكود التالي فوق الكود.
<b</b:if>
<b:if cond='data:view.isError'>
<div class='error-wrapper' id='error-wrapper'>
<div id='error-page'>
<div id='error-inner'>
<h3>خطأ</h3>
<div class='box-404'>
<div>404</div>
</div>
<h2>الصفحة غير موجودة</h2>
<p>يبدو أنك ضائع!<br/></p>
</div>
<div id='search-404'>
<form action='/search' id='search404'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='src-form404' name='q' placeholder='Search here...' required='required' type='search'/>
<button class='src-btn404' title='Search' type='submit'>
<svg class='icons icon-Search' viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/>
</svg>
</button>
</form>
<p>
أو الرجوع إلى
<a expr:href='data:blog.homepageUrl'>
الصفحة الرئيسية
<svg class='icons icon-Forward' viewBox='0 0 24 24'>
<path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/>
</svg>
</a>
</p>
</div>
</div>
</div>
</b:if>
أخيرًا ، احفظ السمة وستظهر النتائج إذا وجدت رابط خطأ في مدونتك أو اختبر ببساطة عنوان url مثل هذا.
https://www.xxxxxx.com/error404
أتمنى أن أكون وفقت في الشرح راجيا منكم الدعم للأستمرار في البحث عن كل ما يهم تحسين أعمالكم بالمشاركة عبر البريد الالكتروني وزيارتنا باستمرار...ولا تترددوا في طلب المشورة والدعم لنساعد بعضنا في التوفيق للجميع