دليلك الشامل: كيفية إعداد ملف Robots.txt لمدونة بلوجر (مع أداة توليد فورية)

هل تساءلت يوماً كيف تعرف محركات البحث أي الصفحات يجب أن تظهر في النتائج وأيها يجب تجاهله؟ السر يكمن في ملف صغير الحجم لكنه عظيم الأثر يُسمى Robots.txt. سنشرح لك في هذا المقال كيفية إعداده باحترافية لمدونتك.

ما هو ملف Robots.txt؟

ملف Robots.txt هو ملف نصي بسيط يتواجد في الجذر الرئيسي لموقعك. وظيفته الأساسية هي إعطاء تعليمات لـ "عناكب" أو "بوتات" محركات البحث حول الأقسام التي يُسمح لها بالدخول إليها وفهرستها، والأقسام المحظورة عليها.

لماذا يحتاج مدونو "بلوجر" لهذا الملف؟

1. توفير ميزانية الزحف (Crawl Budget): يمنع جوجل من إضاعة وقته في زحف صفحات غير مهمة مثل صفحات البحث الداخلي التي لا قيمة لها في النتائج.

2. تحسين الأرشفة: يساعد العناكب على الوصول مباشرة إلى رابط الـ Sitemap الخاص بك، مما يسرع ظهور مقالاتك الجديدة.

3. منع المحتوى المكرر: يمنع ظهور روابط قد تضر بسيو (SEO) مدونتك بسبب تكرار المحتوى الناتج عن التصنيفات أو الأرشيف.

شرح أهم الأوامر في ملف Robots.txt

الأمر	الوظيفة
User-agent	يحدد نوع الروبوت المستهدف (مثل Googlebot).
Disallow	يخبر الروبوت بالأقسام التي لا يسمح له بزيارتها.
Allow	يخبر الروبوت بالأقسام المسموح بزيارتها.
Sitemap	رابط يحتوي على قائمة بجميع مقالاتك لتسهيل أرشفتها.

🛠️ أداة توليد ملف Robots.txt المجانية رابط مدونتك:

كيف تضيف الملف إلى مدونتك في بلوجر؟

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

• سجل الدخول إلى لوحة تحكم Blogger.
• انتقل إلى الإعدادات (Settings) من القائمة الجانبية.
• انزل للأسفل حتى تصل إلى قسم برامج الزحف والفهرسة.
• فعل خيار تفعيل ملف robots.txt مخصص.
• اضغط على ملف robots.txt مخصص ثم الصق الكود الذي نسخته واحفظ التغييرات.

⚠️ تنبيه هام: لا تعبث بالأكواد يدوياً إذا لم تكن خبيراً؛ فأي خطأ بسيط (مثل حظر المسار الرئيسي /) قد يؤدي لاختفاء مدونتك تماماً من نتائج بحث جوجل!

الخاتمة

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

هل واجهت مشكلة في أرشفة مقالاتك؟ اترك لنا تعليقاً برابط مدونتك وسنساعدك في فحص ملفك مجاناً!

اقرا المزيد »

اضافة قائمة منسدلة في النافبار dropdown

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

علامة التبويب المظهر

في قسم مظهري نضغط على السهم المتجه للاسفل  ثم تعديل html 

في صفحة تحرير القالب داخل كود النافبار نبحث عن الكود التالي

</ul>

نضيف فوقه الكود الخاص بالقائمة النسدلة

القائمة المنسدلة

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">قائمة <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li>

لتعديل الروابط داخل القائمة المنسدلة

غير كلمة Link باسم القسم

غير علامة # برابط القسم 

اقرا المزيد »

تصميم صفحة هبوط تصميم النافبار اضافة خاصية scrolling باستخدام jQuery

 

اضافة خاصية scrolling عمل ارتباط بين الروابط واقسام الصفحة

نتوجه الى نهاية القالب قبل اغلاق </body> نضيف اكواد الجيكوري المسؤلة عن خاصية scrolling وعمل الروابط 

الشرح بالفيديو

اكواد الجيكوري

jQuery

<script type='text/javascript'>//<![CDATA[ (function(factory){if(typeof define==="function"&&define.amd){define(["jquery"],function($){return factory($)})}else if(typeof module==="object"&&typeof module.exports==="object"){exports=factory(require("jquery"))}else{factory(jQuery)}})(function($){$.easing.jswing=$.easing.swing;var pow=Math.pow,sqrt=Math.sqrt,sin=Math.sin,cos=Math.cos,PI=Math.PI,c1=1.70158,c2=c1*1.525,c3=c1+1,c4=2*PI/3,c5=2*PI/4.5;function bounceOut(x){var n1=7.5625,d1=2.75;if(x<1/d1){return n1*x*x}else if(x<2/d1){return n1*(x-=1.5/d1)*x+.75}else if(x<2.5/d1){return n1*(x-=2.25/d1)*x+.9375}else{return n1*(x-=2.625/d1)*x+.984375}}$.extend($.easing,{def:"easeOutQuad",swing:function(x){return $.easing[$.easing.def](x)},easeInQuad:function(x){return x*x},easeOutQuad:function(x){return 1-(1-x)*(1-x)},easeInOutQuad:function(x){return x<.5?2*x*x:1-pow(-2*x+2,2)/2},easeInCubic:function(x){return x*x*x},easeOutCubic:function(x){return 1-pow(1-x,3)},easeInOutCubic:function(x){return x<.5?4*x*x*x:1-pow(-2*x+2,3)/2},easeInQuart:function(x){return x*x*x*x},easeOutQuart:function(x){return 1-pow(1-x,4)},easeInOutQuart:function(x){return x<.5?8*x*x*x*x:1-pow(-2*x+2,4)/2},easeInQuint:function(x){return x*x*x*x*x},easeOutQuint:function(x){return 1-pow(1-x,5)},easeInOutQuint:function(x){return x<.5?16*x*x*x*x*x:1-pow(-2*x+2,5)/2},easeInSine:function(x){return 1-cos(x*PI/2)},easeOutSine:function(x){return sin(x*PI/2)},easeInOutSine:function(x){return-(cos(PI*x)-1)/2},easeInExpo:function(x){return x===0?0:pow(2,10*x-10)},easeOutExpo:function(x){return x===1?1:1-pow(2,-10*x)},easeInOutExpo:function(x){return x===0?0:x===1?1:x<.5?pow(2,20*x-10)/2:(2-pow(2,-20*x+10))/2},easeInCirc:function(x){return 1-sqrt(1-pow(x,2))},easeOutCirc:function(x){return sqrt(1-pow(x-1,2))},easeInOutCirc:function(x){return x<.5?(1-sqrt(1-pow(2*x,2)))/2:(sqrt(1-pow(-2*x+2,2))+1)/2},easeInElastic:function(x){return x===0?0:x===1?1:-pow(2,10*x-10)*sin((x*10-10.75)*c4)},easeOutElastic:function(x){return x===0?0:x===1?1:pow(2,-10*x)*sin((x*10-.75)*c4)+1},easeInOutElastic:function(x){return x===0?0:x===1?1:x<.5?-(pow(2,20*x-10)*sin((20*x-11.125)*c5))/2:pow(2,-20*x+10)*sin((20*x-11.125)*c5)/2+1},easeInBack:function(x){return c3*x*x*x-c1*x*x},easeOutBack:function(x){return 1+c3*pow(x-1,3)+c1*pow(x-1,2)},easeInOutBack:function(x){return x<.5?pow(2*x,2)*((c2+1)*2*x-c2)/2:(pow(2*x-2,2)*((c2+1)*(x*2-2)+c2)+2)/2},easeInBounce:function(x){return 1-bounceOut(1-x)},easeOutBounce:bounceOut,easeInOutBounce:function(x){return x<.5?(1-bounceOut(1-2*x))/2:(1+bounceOut(2*x-1))/2}})}); //]]></script> <script type='text/javascript'>//<![CDATA[ (function($) { "use strict"; // Start of use strict // Smooth scrolling using jQuery easing $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: (target.offset().top - 56) }, 1000, "easeInOutExpo"); return false; } } }); // Closes responsive menu when a scroll trigger link is clicked $('.js-scroll-trigger').click(function() { $('.navbar-collapse').collapse('hide'); }); // Activate scrollspy to add active class to navbar items on scroll $('body').scrollspy({ target: '#mainNav', offset: 56 }); })(jQuery); // End of use strict $(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".fixed-top").addClass("top-nav-collapse"); } else { $(".fixed-top").removeClass("top-nav-collapse"); } }); //]]></script>

سنقوم بالتعديل على بعض اكواد html داخل القالب

تعديل على body

نبحث عن كود <body> نستبدله بالكود التالي <body id='page-top'>

تعديل navbar

نبحث عن كود <nav class='navbar navbar-expand-lg navbar-light bg-light'> نستبدله بالكود التالي <nav class='navbar navbar-expand-lg navbar-light bg-light fixed-top' id='mainNav'>

تعديل الروابط

اضافة كلاس js-scroll-trigger  للروابط داخل النافبار

اضافة id كل قسم داخل link

اضافة خصائص css

css nav

.top-nav-collapse { padding: 0; background: #202020 !important; } .top-nav-collapse .nav-link:hover { color: #ffffff !important; } .navbar-light .navbar-nav .nav-link.active { color: #fff; background-color: #fc6661; border-radius: 50px; } .navbar { padding: 20px 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; }

اضافة الفوتر

html footer

<!-- Footer --> <footer> <div class='container'> <div class='m-0 text-center text-white'> جميع الحقوق محفوظة © <a expr:href='data:blog.homepageUrl'> <strong> <data:blog.title/> </strong> </a> <script type='text/javascript'>document.write(new Date().getFullYear());</script> </div> </div> <!-- /.container --> </footer>

css footer

footer { background: #202020; padding: 50px 0; } footer a { color: #fc6661; }

تحميل قالب بلوجر صفحة هبوط مجاني من الرابط التالي

                                                               اضغط هنا للتنزيل

اقرا المزيد »

تصميم صفحة هبوط على بلوجر اضافة قسم اتصل بنا

 

طريقة تصميم صفحة هبوط بلوجر اضافة قسم اتصل بنا

بعد اضافة قسم الخدمات في الدرس السابق سنقوم الان باضافة كود html & css حتى نستطيع اضافة اداة اتصل بنا من خلال ادوات بلوجر من قسم التخطيط

• توجه الى لوحة تحكم بلوجر Blogger.
• علامة التبويب المظهر
• من قسم "مظهري" اضغط على السهم المتجه للاسفل ثم تعديل html
• بعد اغلاق قسم <section id='service'> المسؤول عن قسم الخدمات سنقوم باضافة قسم اتصل بنا

كود html لاضافة اداة اتصل بنا

html contact

<section id='contact'> <div class='container'> <div class='row'> <div class='contact'> <b:section id='widget-contact'/> </div> </div> </div> </section>

كود css لتنسيق قسم واداة اتصل بنا

html contact

#contact {padding: 150px 0;background: #fff;} #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ffffff;border:1px solid #bbb;color:#777;border-radius:3px;} #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0} #ContactForm1_contact-form-email-message{width:80%;height:170px;margin:5px auto;padding:10px;background:#ffffff;border:1px solid #bbb;color:#777;border-radius:3px;} #ContactForm1_contact-form-submit{display:block;height:35px;float:right;color:#FFF;padding:0 40px;margin:10px 0 5px;cursor:pointer;background-color:#fc6661;border:none!important;border-radius:50px;text-shadow:0 1px 0 #de5135} #ContactForm1_contact-form-submit:hover{opacity:.9} #ContactForm1_contact-form-submit:active{position:relative;top:2px;} #ContactForm1_contact-form-submit:focus{outline:0} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}

اقرا المزيد »

تصميم صفحة هبوط تقسيم الصفحة وكيفية اضافة قسم الخدمات

تصميم صفحة هبوط على منصة بلوجر طريقة تقسيم الصفحة

شرح تصميم صفحة هبوط على بلوجر تصميم صفحة متجاوبة تعمل على كافة انواع الاجهزة باستخدام احدث اصدار من اطار العمل بوتستراب

يتضمن الفيديو:

• شرح تقسيم الصفحة واضافة قسم الخدمات باستخدام html5
• تنسيق قسم خدماتنا باستخدام css3
• اضافة الادوات من قسم التخطيط والتعديل عليها

الاكواد المستخدمة بالفيديو

service html

<section id='service'> <div class='container'> <div class='row'> <div class='col-md-12 title'> <b:section id='widget-service-title'/> </div> <div class='col-md-4 sevice'> <b:section id='widget-service-r'/> </div> <div class='col-md-4 sevice'> <b:section id='widget-service-c'/> </div> <div class='col-md-4 sevice'> <b:section id='widget-service-l'/> </div> </div> </div> </section>

service css

section#service { padding: 150px 0; background: #f6f6f6; } #service i.fab.fa-blogger, i.fas.fa-laptop-code, i.fas.fa-code { color: #fc6762; font-size: 80px; margin-bottom: 35px; } .col-md-4.sevice { text-align: center; } #service h2 { margin-bottom: 20px; font-size: 27px; font-weight: bold; color: #000; } #service p { font-size: 18px; line-height: 33px; font-weight: 600; } .title h2 { text-align: center; margin-bottom: 30px; } .col-md-12.title { margin-bottom: 55px; } .col-md-12.title p{ text-align: center; }

اقرا المزيد »