كيفية إنشاء صفحة خطأ 404 مخصصة رائعة لمدونة بلوجر

كيفية إنشاء صفحة خطأ 404 مخصصة رائعة لمدونة بلوجر

كيفية إنشاء صفحة خطأ 404 مخصصة رائعة لمدونة بلوجر


هل سمعت من قبل بمصطلح "رسالة الخطأ المخصصة 404"؟ هذه صفحة خطأ 404 معدلة أكثر إثارة للاهتمام. سأناقش هذه المرة "كيفية إنشاء وإعداد صفحة خطأ 404 مخصصة في Blogger".

عند بدء التدوين وإنشاء مدونة في أحد المنصاة التدوين Blogger أو WordPress . فأنت بحاجة إلى الاهتمام ببعض الأشياء لتحسينها والتي ستساعدك على الحصول على مرتبة أعلى ومعرفة خوارزميات بحث Google ووظائفها؟

عند بدء التدوين وإنشاء مدونة بلوجر blogSpot. فأنت بحاجة إلى الاهتمام ببعض الأشياء لتحسينها والتي ستساعدك على الحصول على مرتبة أعلى في محركات البحث مثل Google و Bing.و Yandex مجموعة من الأدوات الخاصة بها لتحسين مواقع الويب.

 تحديث إعداد واجهة Blogger الجديد 2020.أعزائي مستخدمي blogger ، كما تعلمون أن تحديث إعداد واجهة Blogger الجديد قد تم تقديمه بواسطة Google.

على الرغم من أن هذا لن يكون "التغييرات" ، مما سيجعلني أقترح عليك الالتزام بـ BlogSpot للتدوين الاحترافي. ولكن ، لا شك في أن جميع التغييرات الجديدة تستحق التصفيق لأنه بعد سنوات ، حصل المدونون في BlogSpot على حب SEO الذي تشتد الحاجة إليه.


قبل بضعة أسابيع ، شرحنا كيف يمكننا التسجل في موقع Yandex موقع روسي  yahoo وBing وشرحا شرحا مفصلاً حول إرسال موقعك إلى Google من خلال Google Search Console ،و Yandex

1- ما هو الخطأ 404؟

رمز الخطأ 404 لحالة http الذي يُقال أنه لم يتم العثور على الصفحة مما يعني ارتباطات معطلة على موقع الويب الخاص بك والعثور عليها على موقع الويب الخاص بك 


دعنا نجري استبيانًا سريعًا : ما الذي تفعله عادةً عند النقر على رابط وواجهت خطأ "لم يتم العثور على ملف 404"؟

- هل تنقر على زر الرجوع في متصفحك وتذهب إلى مكان آخر؟

- حاول عمل نسخة احتياطية من دليل واحد في عنوان URL (أي عنوان الويب) وحاول مرة أخرى؟

- أكتب لمدير الموقع والموقع المحيل لإبلاغهم بالموقف؟

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


لذلك تحتاج إلى القيام بشيء حتى لا تفقد هذه المجموعة من الأشخاص الذين يأتون إلى موقعك عن طريق اتباع رابط قديم أو عن طريق كتابة عنوان URL الخاص بك بشكل غير صحيح ، ولكن أولاً ، دعني أشرح ما هي صفحة الخطأ Custom 404؟ وكيف يعمل؟

1- ما هي صفحة الخطأ 404 المخصصة؟

يتم استخدام صفحة الخطأ 404 المخصصة لتوفير أفضل واجهة تفاعلية لموقعك على الويب أو مدونتك عندما يدخل شخص ما مسار عنوان URL خاطئ أو يفتح عنوان URL معطلاً عن طريق الخطأ. 


الغرض الرئيسي من صفحات الخطأ 404 هو تقليل الأخطاء التي لم يتم العثور عليها في أدوات مشرفي المواقع من Google. ويساعد أيضًا في تحسين تفاعل المستخدم مع موقعك.


صفحات الخطأ 404 هي صفحات الويب التي لا تتوفر على موقع الويب الخاص بك أو مدونتك. وعرض 404 خطأ غير موجود عندما يدخل أي شخص عنوانًا غير صحيح في المتصفح.


2- كيف تعمل صفحة الخطأ 404 المخصصة؟

تخصيص 404 صفحات هي تلك التي قمنا بإنشائها لتوفير سهولة التنقل لمساعدة الزوار عن طريق إضافة بعض ترميز HTML و CSS في مدوناتنا ، كما أنها تساعد على تحسين تفاعل المستخدم مع مدونتك.

أين هو العرض التوضيحي ، لقطة شاشة لصفحة الخطأ 404 المخصصة؟

3- كيفية إنشاء وإعداد صفحة خطأ 404 مخصصة في Blogger!

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


- التعليمات الواجب اتباعها :

- انتقل إلى لوحة تحكم Blogger → مدونتك

- قالب → تحرير HTML

- ابحث عن تلك العلامة <meta charset = 'utf-8' /> بالضغط على Ctrl + F

- انسخ والصق الرمز أدناه تحت الرمز

<meta charset = 'utf-8' />

1- كود HTML:

- الآن ابحث عن علامة </head> في النموذج الخاص بك

<!--كود صفحة الخطأ1-->

<b:if cond='data:blog.pageType == "error_page"'>

<title>الصفحة غير موجودة - <data:blog.title/></title>

<style>

.container404{ line-height: normal;

font-size: 16px;

backface-visibility: hidden;

transition: all .3s;

background: #e83153;

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 999999;

text-align: center;}

.boxi404 hr{background:transparent;display:block;border:none;border-bottom:4px solid rgba(255,255,255,.3)}

.boxi404{padding:20px;font-size:110%;color:#fff;border-radius:5px 5px 0 0}

.boxi404 h2,.boxi404 h3{color:#fff;display:block;font-weight:700;font-size:2.6rem;text-transform:uppercase}

.boxi404 h2{position:absolute;font-size:20rem;color:rgba(255,255,255,.3);transform:rotate(-45deg);right:3%;bottom:8%}

.boxi404 p{display:block;margin:10px 0}

.boxi404 ul li{margin:0 0 8px 20px;list-style:initial;list-style-type:none;}

.boxi404 ul li a{color:#e5ffaf;}.boxi404 ul li a:hover{background:rgba(0,0,0,0.1);color:#e5ffaf;text-decoration:underline}

.copyright404{display:block;margin:auto;font-weight:normal;max-width:768px;min-width:200px;padding:0 20px}

.copyright404 a,.copyright404 a:hover{color:#fff}

</style>

</b:if>

<!--كود صفحة الخطأ1-->




- انسخ الكود أدناه والصقه أعلى الكود </ head>

<!--كود صفحة الخطأ2-->

<b:if cond='data:blog.pageType == "error_page"'>

<div class='container404'>

<div class='boxi404'>

<h2>404</h2>

<h3>الصفحة التي تبحث عنها غير متوفرة</h3>

<hr/>

<p>الصفحة التي تبحث عنها تم حذفها أو تم تغيير عنوانها</p>

<p>يرجى محاولة:</p>

<ul>

<li>إعادة كتابة العنوان <strong>بشكل صحيح</strong>, والتأكد منه.</li>

<li>أنقر <strong><a expr:href='data:blog.homepageUrl'>هنا</a></strong> للعودة للصفحة الرئيسية</li>

</ul>

</div>

<div class='copyright404'>

 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>

</div>

</div>

</b:if>

<!--كود صفحة الخطأ2-->


- بعد ذلك ، احفظ النموذج الخاص بك.

 د- هذا هو :

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

المدون! مبروك: لقد نجحت في تثبيت هذا المكون الإضافي لمدونتك على المدون!


للمزيد من التوضيح كما عودناكم على مدونة دائما مرفوقة بالدرس فرجة ممتعة


» متابعة دورة بلوجر
» كيف إنشاء : مدونة بلوجر

أضف تعليق

أحدث أقدم

Comments

no-style