recent
أخبار ساخنة

طريقة احترافية لتخصيص صفحة الخطأ 404 على مدونة بلوجر لتحسين تجربة الزوار

رؤيا للتقنيات
الصفحة الرئيسية

كيفية تثبيت صفحة الخطأ 404 على مدونة بلوجر

صفحة الخطأ 404 (صفحة "غير موجودة") هي صفحة تظهر عندما يعجز الخادم عن العثور على الرابط الذي تحاول زيارته على المدونة. عادةً ما تظهر هذه الصفحة بسبب:

تعلم كيفية تخصيص صفحة الخطأ 404 على مدونة بلوجر بشكل احترافي لجذب الزوار

طريقة احترافية لتخصيص صفحة الخطأ 404 على مدونة بلوجر لتحسين تجربة الزوار

  • تغيير الرابط: مثل تعديل عنوان النشر أو مساره.
  • حذف الرابط: عندما يتم إزالة المقالة أو المحتوى.
  • أخطاء في الكتابة: عند إدخال رابط يحتوي على خطأ إملائي.

لحسن الحظ، يوفر بلوجر خياراً افتراضياً لعرض صفحة الخطأ، ولكن يمكنك تخصيص هذه الصفحة لجعلها أكثر احترافية وجاذبية. هنا سأوضح لك خطوات بسيطة لإنشاء صفحة خطأ 404 مخصصة لمدونتك.

خطوات تثبيت صفحة الخطأ 404 المخصصة

1. استخدام صفحة الخطأ الافتراضية في بلوجر

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

2. إضافة صفحة خطأ مخصصة

لإضافة صفحة خطأ مخصصة على مدونتك، اتبع هذه الخطوات:

الخطوة الأولى: تعديل كود HTML
  1. افتح مدونتك في لوحة تحكم بلوجر.
  2. اذهب إلى قائمة "المظهر".
  3. اضغط على زر "تعديل HTML".
الخطوة الثانية: إدخال كود الصفحة المخصصة
  1. ابحث عن الوسم التالي في كود HTML: </head>.
  2. قبل هذا الوسم مباشرة، قم بلصق الكود التالي:

الخطوة الثالثة: حفظ التعديلات
  1. انقر على زر "حفظ المظهر".
  2. تحقق من النتيجة من خلال زيارة رابط غير موجود على مدونتك.

نصائح لتحسين صفحة الخطأ 404

  1. استخدم لغة ودية: لا تجعل الزائر يشعر بالإحباط، وقدم رسالة بسيطة مثل: "يبدو أننا لم نجد ما تبحث عنه. هل تود العودة إلى الصفحة الرئيسية؟"
  2. أضف رابطاً مفيداً: مثل رابط إلى الصفحة الرئيسية أو قائمة المقالات الأكثر قراءة.
  3. تصميم جذاب: استخدم ألواناً مريحة وخطوطاً واضحة.
  4. اختبر الصفحة: تأكد أن الصفحة تظهر بشكل صحيح على جميع الأجهزة (كمبيوتر وهاتف).

<b:if cond='data:view.isError'>
<style>
/* Error 404 */
body{background:#fff;line-height:1.4em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#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:12% 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:200px;margin:25px auto}
#error-inner .box-404 .zigg{display:inline-block;position:relative;animation:rotating .6s linear}
#error-inner .box-404::after{content:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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 h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px;animation:charge .5s linear}
#error-inner p{line-height:1.7em;font-size:16px;color:#111;padding:0;margin:15px auto 0 auto;max-width:640px;animation:charge .5s linear}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#4285f4;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 1px 6px 0 rgba(32,33,36,0);border:1px solid #dfe1e5;padding:0 48px 0 24px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fff;transition:all .3s}
#search404 input[type=search]:focus{background:#fff;box-shadow:0 1px 6px 0 rgba(32,33,36,0.28)}
#search404 .src-btn404{background:transparent;border:none;padding:0 20px;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:640px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>

الخطوة الثانية ابحث عن الكود التالي تحت </body> 

<b:if cond='!data:view.isError'>

ثم اضف الرمز أدناه من قبل </body>

</b:if>
<b:if cond='data:view.isError'>
   <div class='error-wrapper' id='error-wrapper'>
      <div id='error-page'>
         <div id='error-inner'>
            <div class='box-404'>
               <div><span class='zigg'>404</span></div>
            </div>
            <h2>Page Not Found</h2>
            <p>The page you were trying to visit has disappeared or moved to another dimension. Perhaps searching will help.<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>
               Or, back to 
               <a expr:href='data:blog.homepageUrl'>
                  homepage 
                  <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>
 بهذه الطريقة، يمكنك تخصيص صفحة الخطأ 404 لتتناسب مع تصميم مدونتك وتقدم تجربة مستخدم أفضل. إذا واجهتك أي مشكلة أثناء تنفيذ الخطوات، سأكون سعيداً بمساعدتك!  

الخاتمة

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

تذكر أن الاهتمام بالتفاصيل الصغيرة مثل صفحة الخطأ يعكس احترافية موقعك ويساعدك في بناء علاقة جيدة مع جمهورك. إذا كنت بحاجة إلى مساعدة إضافية أو لديك استفسارات أخرى حول تحسين مدونتك، لا تتردد في طلب المساعدة.

ابدأ الآن بتطبيق الخطوات واجعل مدونتك تبدو مميزة حتى في التفاصيل الصغيرة! 😊

google-playkhamsatmostaqltradent