2020-01-24

أفضل كود ميتا تاج 2020 صديق لمحركات البحث لبلوجر



يُعد تحسين علامات التعريف أو meta tag أفضل طريقة لتوفير معلومات الموقع لمحركات البحث مثل Google و Bing وغير ذلك. ليس فقط أن العلامات الوصفية هي واحدة من أهم المكونات التي يجب تطبيقها في موقعك او مدونتك باعتبارها الخطوة الأساسية لتحسين محركات البحث على الصفحة.

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

ما مدى أهمية العلامات الوصفية Meta Tag؟

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

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

ما يجب أن يكون في علامة الوصفية Meta Tag؟

أكثر العلامات الوصفية القياسية هي العلامات الوصفية التي توفر بعض المعلومات المهمة مثل عنوان الموقع والأوصاف والكلمات الرئيسية والصور المصغرة.

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

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

Meta Open Graph
مصادر حركة المرور لموقع ليس فقط من محركات البحث ، بل معظمها مصدرها وسائل التواصل الاجتماعي. من المهم أيضًا تقديم ملخص لمعلومات موقعك إلى وسائل التواصل الاجتماعي مثل Facebook و Twitter وما إلى ذلك. الحيلة هي إضافة علامة Meta Open Graph إلى موقعك.
Site Authority
يحتوي على معلومات ملكية موقع ما ، مثل اسم منشئ الموقع ، ورابط لمعلومات مالك الموقع ، ورمز التحقق من مشرف الموقع وما إلى ذلك.

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

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

كيف يبدوا كتابة كود ميتا تاج جيد لموقعك؟

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

فيما يلي ، سنشارك أحدث وأفضل ميتا تاج بلوجر 2020 في رأينا ، يتم ترتيب علامة التعريف هذه بشكل أكثر سهولة لجعل التعديل أسهل وسنقدم لك إرشادات لتعديل بعض أجزاء علامة التعريف هذه.

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

الصق رمز العلامة الوصفية أدناه في قسم <head> ... </head> في موقعك أو مدونتك ، أو استبدل علامة التعريف التي استخدمتها سابقًا بعلامة التعريف التالية:


  <!-- Blog Title -->
  <b:if cond='data:view.isError'><title>خطأ 404: الصفحة غير موجوده</title></b:if>  
  <b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/></title></b:if>
  <b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/></title></b:if>
  <b:if cond='data:view.isMultipleItems'>
    <b:if cond='data:view.search.query'><title>البحث : <data:view.search.query/></title></b:if>
    <b:if cond='data:view.search.label'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
    <b:if cond='data:view.isArchive'><title>أرشيف المدونة في:<data:blog.pageName/></title></b:if>
    <b:if cond='data:view.search and !data:view.search.label and !data:view.search.query and !data:view.isArchive'><title>المدونة : <data:blog.title/></title></b:if>
  </b:if>

  <!-- Meta Title -->
  <b:if cond='data:view.isMultipleItems'>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
  <meta expr:content='data:blog.pageTitle' property='og:image:alt'/>
  <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
  <meta expr:content='data:blog.pageTitle' name='twitter:image:alt'/>
  <b:else/>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta expr:content='data:blog.pageName' property='og:image:alt'/>
  <meta expr:content='data:blog.pageName' name='twitter:title'/>
  <meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
  </b:if>
  <meta expr:content='data:blog.title' property='og:site_name'/>

  <!-- Meta Image -->
  <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
      <b:else/>
      <meta content='logo-blog.png' property='og:image'/>
    </b:if>
  </b:if>
  <b:if cond='data:view.isMultipleItems'>
    <meta content='logo-blog.png' name='twitter:image'/>
    <b:else/>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
  </b:if>
  <b:if cond='data:view.isPost'>
    <link expr:href='resizeImage(data:blog.postImageUrl, 700)' rel='image_src'/>
  </b:if>

  <!-- Meta Description -->
  <meta expr:content='data:blog.metaDescription' name='description'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='data:post.snippet' property='og:description'/>
  </b:if>
  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

  <!-- Meta Keywords -->
  <meta expr:content='data:blog.title + ", " + data:blog.pageName' name='keywords'/>
  <meta expr:content='data:blog.title' property='article:tag'/>

  <!-- Meta Link -->
  <link expr:href='data:blog.url' rel='canonical'/>
  <link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

  <!-- Meta Owner -->
  <meta content='أسم صاحب الموقع' name='Author'/>
  <link href='https://www.facebook.com/userfb' rel='me'/> // رابط ملفك الشخصي على Facebook
  <link href='https://www.facebook.com/userfb' rel='author'/> // رابط ملفك الشخصي على Facebook
  <link href='https://www.facebook.com/linkFanspage' rel='publisher'/> // رابط صفحة المعجبين بك ، إن وجد ، يرجى استبداله برابط الملف الشخصي
  <meta content='000000000000999' property='fb:admins'/> // رمز ملفك الشخصي على Facebook
  <meta content='000000000000999' property='fb:pages'/> // شفرة صفحة المعجبين الخاصة بك على Facebook ، إن وجدت
  <meta content='00000000000099988' property='fb:app_id'/>
  <meta content='https://www.facebook.com/000000000000999' property='article:author'/> // رابط ملفك الشخصي على Facebook
  <meta content='https://www.facebook.com/000000000000999' property='article:publisher'/> // رابط صفحة المعجبين بك ، إن وجد
  <meta content='@user.twitter' name='twitter:site'/>
  <meta content='@user.twitter' name='twitter:creator'/>
  <meta expr:content='data:blog.title' name='copyright'/>

  <!-- Meta Icon -->
  <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
  <link href='.../s300/logo-blog.png' rel='apple-touch-icon'/>
  <link href='.../s57/logo-blog.png' rel='apple-touch-icon' sizes='57x57'/>
  <link href='.../s72/logo-blog.png' rel='apple-touch-icon' sizes='72x72'/>
  <link href='.../s76/logo-blog.png' rel='apple-touch-icon' sizes='76x76'/>
  <link href='.../s114/logo-blog.png' rel='apple-touch-icon' sizes='114x114'/>
  <link href='.../s120/logo-blog.png' rel='apple-touch-icon' sizes='120x120'/>
  <link href='.../s144/logo-blog.png' rel='apple-touch-icon' sizes='144x144'/>
  <link href='.../s152/logo-blog.png' rel='apple-touch-icon' sizes='152x152'/>
  <link href='.../s180/logo-blog.png' rel='apple-touch-icon' sizes='180x180'/>

  <!-- Meta Theme Color -->
  <meta content='#fff' name='theme-color'/>
  <meta content='#fff' name='msapplication-navbutton-color'/>
  <meta content='#fff' name='apple-mobile-web-app-status-bar-style'/>
  <meta content='yes' name='apple-mobile-web-app-capable'/>

  <!-- Meta Blogger Rss -->
  <meta content='blogger' name='generator'/>
  <link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
  <link expr:href='data:blog.url' rel='openid.delegate'/>
  <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
  <link expr:href='"//www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
  <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>

  <!-- Meta Open Graph -->
  <meta content='article' property='og:type'/>
  <meta content='id_ID' property='og:locale'/>
  <meta content='en_US' property='og:locale:alternate'/>
  <meta content='en_GB' property='og:locale:alternate'/>
  <meta content='summary_large_image' name='twitter:card'/>

  <!-- Meta Robots Search -->
  <meta content='width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=5.0' name='viewport'/>
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
  <meta content='all-language' http-equiv='Content-Language'/>
  <meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
  <meta content='Egypt' name='geo.placename'/>
  <meta content='eg' name='geo.country'/>
  <meta content='EG_AR' name='geo.region'/>
  <meta content='ar' name='language'/>
  <meta content='global' name='target'/>
  <meta content='global' name='distribution'/>
  <meta content='general' name='rating'/>
  <meta content='1 days' name='revisit-after'/>
  <meta content='true' name='MSSmartTagsPreventParsing'/>
  <meta content='index, follow' name='googlebot'/>
  <meta content='follow, all' name='Googlebot-Image'/>
  <meta content='follow, all' name='msnbot'/>
  <meta content='follow, all' name='Slurp'/>
  <meta content='follow, all' name='ZyBorg'/>
  <meta content='follow, all' name='Scooter'/>
  <meta content='all' name='spiders'/>
  <meta content='all' name='WEBCRAWLERS'/>

  <!-- Owner Sife Verification -->
  <meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
  <meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
  <meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
  <meta content='xxxx_xxxxx-xxxxxxx' name='majestic-site-verification'/>

دليل الوصف والاستخدام

قبل نسخ ولصق علامة التعريف أعلاه على موقعك ، قم بتغييرها! يتم تمييز بعض الأقسام بمعلومات من موقعك أو في علامات التعريف التي استخدمتها من قبل.


  • <!-- Blog Title -->
    تعمل مجموعة العلامات الأولى هذه على عرض عنوان موقع أو صفحة معينة على المدونة في نتائج البحث. على سبيل المثال ، إذا تم نشر مقال جديد ، فسيتم كتابة عنوان المقال تلقائيًا في هذا الرمز ، ويمكن رؤية مثال علي النتائج في محرك البحث في الصورة أدناه:


    القواعد أو الشروط الواردة في هذه العلامة تشمل:
    cond='data:view.isError'
    يعرض السطر الأول العنوان في صفحة الخطأ 404 لموقعك. بشكل افتراضي ، تكون النتيجة المعروضة هي خطأ 404: الصفحة غير موجودة ، يمكنك استبدالها بعنوان آخر حسب الرغبة ، على سبيل المثال آسف! الصفحة غير موجودة أو غير ذلك

    cond='data:view.isHomepage'
    يعرض عنوان الصفحة الرئيسية لموقعك ، يمكنك إضافة جمل أخرى لنتائج البحث مثل اسم المدونة: تنزيل متجر التطبيقات أو ما شابه ذلك عن طريق تغيير الكود هذا إلى:

    
    <b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/> : عنوان إضافي</title></b:if>
    

    والنتيجة مثال الصورة أدناه:

    يبدو الأمر بسيطًا ، لكن يمكن أن يزيد ذلك من قوة الكلمات الرئيسية المستهدفة في موقعك.

    cond='!data:view.isMultipleItems'
    يعرض عنوان صفحة المنشور والصفحة الثابتة ، الشيء الوحيد الذي سيتم عرضه هو عنوان منشور المدونة الخاصة بك ، ولكن هناك بعض المدونات التي تضيف أيضًا عنوان مدونتها في هذا القسم كتعزيز لكلماتها الرئيسية للمدونة على سبيل المثال على النحو التالي:

    ما هي الـJavascript وكيف تعمل ؟ - مينت ويب

    إذا كانت مدونتك تعرض أيضًا عنوانًا مثل العنوان أعلاه ، فغيّر سطر الكود هذا إلى:

    
    <b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/> - <lt;data:blog.title/></title></b:if>
    

    يمكنك تغيير الشرط أعلاه بعلامات أخرى تعتقد أنها مناسبة ، مثل: أو |

    cond='data:view.isMultipleItems'
    عرض العنوان على صفحة فهرس المدون (بخلاف الصفحة الرئيسية والنشر والصفحات الثابتة) التي تم وضع علامة على المدون / البحث فيها على عنوان url ، هناك 4 شروط مكتوبة لعرض عناوين مختلفة على صفحة فهرس مدونتك بما في ذلك:

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

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

    أرشيف المدونة في: كانون الثاني (يناير) 2020 - هذا القسم اختياري ، مما يعني أنه يمكنك تطبيقه أم لا ، ولكن إذا قمت بتنشيط ميزة الأرشيف أو إضافة أداة أرشيفية إلى مدونتك ، فسيظهر هذا العنوان عندما ينقر المستخدم على صفحة أرشيف المدونة الخاصة بك.

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

    يختار معظم المدونين حظر هذه الصفحة لتظهر في نتائج البحث ، ولكن لا يزال هذا الإعداد يستحق المحاولة لزيادة تحسين مظهر عنوان صفحة المدونة الخاصة بك.
  • <!-- Meta Image -->
    تعمل علامة meta tag هذه على عرض مقتطف مصغر / صورة لمدونتك ، وفي صفحة النشر ، يكون مقتطف الصورة الموضح في هذا القسم هو الصورة الأولى لمقالتك.

    إذا لم يكن للمقال الذي تكتبه صورة ، فسيتم عرض رابط الصورة الذي ستدرجه في هذه العلامة ، قم بتغيير القسم الموجود على هذا السطر مع رابط شعار مدونتك. (قم بإعداد صورة لشعار مدونتك بحد أدنى 300 بكسل × 300 بكسل)

    
    <meta content='logo-blog.png' property='og:image'/>
    
    / قم بتغييره من خلال رابط مدونتك ، على سبيل المثال النتائج أدناه
    <meta content='https://1.bp.blogspot.com/-0rBDCRtFSls/XhPhrEpk-BI/AAAAAAAAO5E/LJ44z0MR3E006rm7L6iyZNhdFftcXa9RgCPcBGAYYCw/s1600/imintweb.com-logo.png' property='og:image'/>
    
  • <!-- Meta Description -->
    إحدى الطرق لتحسين Onpage Seo هي إضافة وصف للمدونة في كل صفحة ، وسيتم عرض هذا الوصف في نتائج البحث في أسفل عنوان المدونة كما هو موضح أدناه:


    لذلك ، أضف وصفًا للبحث قدر الإمكان في كل منشورات لمقالاتك ، على المدونين عند كتابة المقالات ، يمكنك الانتقال إلى الحقل الصحيح والنقر على "وصف البحث" ، للحصول على مزيد من التفاصيل التي يمكنك مشاهدتها في الصورة أدناه:


    إحدى مزايا العلامات الوصفية التي يتم مشاركتها في هذا الوقت هي تقديم وصف بديل عند عدم كتابة وصف على المدونة. في حالة عدم وجود وصف في منشور ، سيتم تلقائيًا عرض الفقرة الأولى من المنشور كصف للمدونة.
  • <!-- Meta Owner -->
    يحتوي على معلومات حول بيانات الملكية للمدونات أو المواقع ، ويمكن أن يكون أفراد أو مجموعات. يرجى ملئ هذا الجزء الذي تم وضع علامة في هذه العلامة مع بياناتك.
  • <!-- Meta Icon -->
    وظيفة لعرض الأيقونة على منصة IOS ، يرجى استبدال الجزء الذي تم وضع علامة عليه بعنوان url الخاص بشعار مدونتك ، وكذلك تغيير حجم شعارك عن طريق تغيير / s1600 / جزء من عنوان url الخاص بالمدونة بالحجمالذي هو المدرجة في كود الميتا تاج أعلاه.
  • <!-- Meta Theme Color -->
    تغيير رمز اللون الذي تم وضع علامة عليه في سطر الرمز هذا مع اللون السائد لمدونتك ، يعمل هذا القسم على تغيير لون شريط العناوين على متصفح Google Chrome على Android أو متصفح Safari على iOS
  • <!-- Meta Robots Search -->
    تعمل مجموعة العلامات الوصفية هذه على جعل نتائج البحث أكثر دقة وأسرع ، إذا كانت مدونتك باللغة العربية فلا يوجد شيء يمكن تغييره في هذا القسم ، ولكن إذا كانت المدونة التي تديرها بلغة أخرى ، فيمكنك ضبطها على اللغة التي تستخدمها مدونتك
  • <!-- Owner Sife Verification -->
    يعمل هذا الجزء الأخير على التحقق من ملكية الموقع أو المدونة في بعض المواقع. يوجد في هذا الرمز 4 رموز تحقق ، بما في ذلك التحقق من Google Webmaster / Search Console و Bing Webmaster و Pinterest Site Verification .
إلي هنا ينتهي شرح اليوم عن أفضل  كود ميتا تاج 2020 صديق لمحركات البحث لبلوجر اذا كان  لديك أي مشكلة في تطبيق أي من الأكواد الموجوده أعلاه لأ  تتردد في طرح سوؤالك في العليقات وشكراً لكم متابعين مينت ويب.

2019-11-03

إضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط

إضافة زر الوضع الليلي لمدونات بلوجر بأستخدام ملفات تعريف الأرتباط

الوضع الليلي هو ميزة تهدف إلى جعل الشاشة دلكنة اللون. عادةً ما توجد هذه الميزة على الأجهزة المحمولة التي تتضمن وظائف "الوضع الليلي" أو "الوضع الداكن" والتي لها فائدة في توفير استخدام البطارية.

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

طريقة إضافة الوضع الليلي على بلوجر 

أولاً ، قم بفتح لوحة تحكم بلوجر/Blogger > انقر على المظهر وانقر على زر تعديل HTML > أضف هذا الكود قبل الوسم </body>
<div class='Switchbtn'>
<span class='nightly'>الوضع الليلي</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>

بعدها قم بأضافة كود Css هذه قبل الوسم </head>

<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;left:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-right:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:right 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;right:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';right:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

أنتبه جيداً لما هو قادم ،الذي تم وضع علامه عليه هذه مثال يمكن أتبداله أو التعديل عليه بما يناسب قالب مدونتك عن طريقة تغير .class-baru بالفئة أو بالمعرف في جزء معين ف قالب مدونتك.أيضاً قم بأضافة .nightmode قبل الفئة أو المعرف جزء القالب الذي تريد تغييره عندما يكون الوضع الليلي نشطًا. على سبيل المثال مثل هذا:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

ومال يليه...

قم أيضًا بتحرير كود CSS هذا لتحديد موضع زر الوضع الليلي
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;left:20px;top:20px}

عندما تنتهي من تحرير كل ما تحتاجه ، انقر فوق الزر حفظ المظهر وشاهد النتائج على مدونتك.


انقر على الزر أدناه للاطلاع على مثال لتطبيق ميزة الوضع الليلي على بلوجر . انقر فوق زر الوضع الليلي في الجزء الأيسر في القائمة العلوية.

2019-10-27

إضافة أداة دردشة Whatsapp مع أرقام وحسابات متعددة للمواقع أو المدونات

إضافة أداة دردشة Whatsapp مع أرقام وحسابات متعددة للمواقع أو المدونات

مرحبًا يا متابعين مينت ويب ، سأشارك معكم اليوم شرح مثيرًا للاهتمام مثالي للمواقع الإلكترونية أو المدونات التي تحتوي على القوالب أو بيع المنتجات. يمكن استخدام هذه الأداة المصغّرة على جميع أنواع الأنظمة الأساسية مع HTML و CSS و Javascript فقط. بالطبع هو أيضا مناسبة للاستخدام على وورد بريس.

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

للتعرف على كيفية تثبيت حساب whatsapp وإضافته أيضًا ، ما عليك سوى نسخ الأكواد المثبتة مسبقًا. وبالمثل للون والموضع ، يمكن القيام بكل شيء بسهولة.

مثال يوضع شكل أرسال الرسائل


طريقة أضافة دردشة واتساب لموقعك بعددة حسابات وأرقام



هذه الشرح مخصص لمدوانات بلوجر/Blogspot.

برجاء التوجه إلي بلوجر > المظهر  > تعديل HTML
ضع كود CSS التالي مباشرة فوق الوسم  ]]></b:skin> أو </style>

/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 0 0 10px}.header-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:right;margin:0 0 0 10px}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;right:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:40px;margin:-5px 5px 0 0;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;left:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;right:5%;left:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

بالنسبة إلى HTML ، يمكنك وضعه في التخطيط> إضافة أداة > HTML / Javascript ، في الواقع يمكن وضعه في أي مكان ، إذا قمت بتحرير HTML ، فيمكنك وضعه أعلى رمز Javascript في الخطوة التالية.

<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>مرحباً</h3>
<p>انقر فوق أحد ممثلينا أدناه للدردشة عبر تطبيق WhatsApp أو مراسلتنا على البريد الإلكتروني علي mint.co199@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>الدعم</span>
<span class='chat-nama'>خدمة العملاء 1</span>
</div><span class='my-number'>20281977094280</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://4.bp.blogspot.com/-X1Xs2iRKabY/XXWzkqQ-iDI/AAAAAAAAA5w/HSyhR0gIXvUzlAx5XgaZzmlrCJkTgrOFQCLcBGAs/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>المبيعات</span>
<span class='chat-nama'>خدمة العملاء 2</span>
</div><span class='my-number'>20222222222</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>أتصل بنا علي <b>202123456789</b> من <i>0:00 إلي 24:00</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>مرحبا! ماذا يمكنني أن أفعل لك؟
</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='اكتب ردا' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>إرسال</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>كيف أستطيع مساعدتك؟</a>

الكود المميز باللون الأحمر هو الرمز الذي يجب تغييره وفقًا لبيانات الاتصال.
بالنسبة لأرقام whatsapp ، لا تستخدم علامة الجمع + ، رموز البلد فقط مثل 20.

ضع Javascript أسفل اليمين أعلى الكود </body>

<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.imintweb.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

قم بحفظ القالب
يرجى ملاحظة أن خط هذه الأداة سوف يتبع تلقائيا الخط الافتراضي للقالب الذي تستخدمه. تأكد من تثبيت الخطوط الخاصة وأيضًا مكاتب CSS الخارجية مثل Awesome Fonts وأيضًا jQuery.


إذا لم تكن قد استخدمت Font Awesome أو jQuery ، فيمكنك إضافة الروابط التالية أعلى الوسم. </head> عادةً ما يستخدم أحدث إصدار من القالب Font Awesome (Icons) و jQuery.

Fontawesome
<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet' type='text/css'/>

jQuery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

هذه كل ما لديناا للبوم لطريقة إضافة شات واتساب في موقعك أو مدونتك بعدة أرقام وحسابات مختلفة

2019-10-25

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

مرحباً بالجميع ، سنتتطرق اليوم إلي طريقة رفع أو أستضافة الملفات أو المشاريع أو حتي موقع كامل علي Github.
يوجد بالفعل العديد من البرامج أو المشاريع مثل المواقع أو التطبيقات المخزنة على جيت هاب.

إلى جانب كونه مجانيًا ، فإن مزايا رفع مشروعنا على Github ستكون من السهل العثور عليها في محركات البحث مثل Google. لديّ بالفعل حساب Github وحفظت العديد من المشاريع عليه https://github.com/imintweb ، الكثي من يستخدموا منصة Github لأول مرة لأ يعرفون أوامر Github بشكل جيد وبطبيعة الحال يبدأون في طرح الأسئلة علي جوجل وقد لأحظت الكثير من الأسئلة بخصوص هذا الموضوع وعلي رأسهم ازاي ارفع كود على Github ، حسناً لنبدأ شرح طريقة رفع وأستضافة الملفات علي Github.

البرامج المطلوبه

يتعين علينا تثبيت Git على جهاز الكمبيوتر أو الكمبيوتر المحمول أو الهاتف المحمول (للهواتف المحمولة ، يمكنك استخدام Git on Termux).

يرجى تحميل Git هنا ، ثم تثبيت كالمعتاد. يرجى تنزيل Git وفقًا لنظام التشغيل (OS) الذي تستخدمه.

إذا كنت تستخدم windows ، فبعد تثبيت Git ، ستحصل على bash خاص ، Git Bash.

إستعدادات

هناك العديد من الخطوات التي يجب اتخاذها قبل رفع المشاريع علي Github:

1. إنشاء مستودع جديد على Github. يرجى فتح وتسجيل الدخول (إذا لم تكن قد قمت بالفعل بإنشاء حساب ، يرجى التسجيل أولا) إلى موقع github.com ثم إنشاء مستودع جديد.

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

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

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

2. إذا قمت بتثبيت Git ، فيرجى تعيين اسم مستخدم Github والبريد الإلكتروني أولاً ، وذلك بكتابة الأمر التالي في Command Prompt / Git Bash / Terminal.

ضبط أسم المستخدم
git config --global user.name "User Name"

ضبط البريد الألكتروني
git config --global user.email "Email@example.com"

كيفية رفع المشاريع إلى Github

1. قم  بفتح مجلد المشروع الذي تريد تحميله باستخدام مستكشف الملفات أو مدير الملفات.
2. بعد تثبيت GIT علي جهازك قم بالتوجه إلي مكان الملفات التي تود رفعها علي GitHub وإضغط علي زر الفأرة الأيمن و قم بأختيار Git Bash Here
3. اكتب الأمر التالي لتهيئة مجلد المشروع في مستودع Git.

git init

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

4. ثم اكتب الأمر التالي ، لإدراج الملف في منطقة الركود.
git add .

أو

git add *

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

5. الأن ، سنقوم بإضافة الملفات التي نريد رفعه في المستودع الذي قمنا بأنشائه. الرجاء استبدال عنوان url في الأمر التالي بمستودع Github الذي قمت بإنشائه على Github.

git remote add origin https://github.com/username/new-repo.git

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

6.سنقوم الأن برفع المجلد بداخل المستودع الذي أنشأناه.

git commit -m "أسم الملف"

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

7. بعد ذلك ، نقوم بإضافة أمر رفع الملفات ، عن طريق الكتابة.

git push -u origin master

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

هنا من المحتمل ان يطلب منك إدخال اسم المستخدم وكلمة المرور github. يرجى تسجيل الحساب أولاً إذا لم تقم بذلك بالفعل.

في حالة وجود أخطاء عند دفع يرجى إضافة --force. وبالتالي فإن الأمر هو كالتالي.

git push -u origin master --force

ملخص أوامر Github

git init
git add .
git remote add origin https://github.com/username/nama_repo.git
git commit -m "أسم الملف"
git push -u origin master --force


الأن قم بفتح المستودع علي Gtihub ستجد أن المف تم رفعه علي Github ونجح الامر.

الشرح الكامل لطريقة رفع الملفات أو المشاريع على Github

الخلاصة

هذه ما كان لدينا لليوم في شرح طريقة رفع الملفات أو المشاريع على Github  أذا واجهت مشكلة في الشرح أو يوجد جزء لم تفهمه بالمرجوا أضافة المشكلة في قسم التعليقات لنقوم بحلها سوياً.

2019-10-13

قالب التنظيف بلوجر 2019


قالب التنظيف لبلوجر أو ما يطلق عليه البعض كود تنظيف بلوجر وهو يستخدم قبل تركيب أي قالب جديد لمدونتك تجنباً لتداخل الأدوات في بعضها وتحسباً لأي خطاء قد يحدث لذلك كود قالب التنظيف لبلوجر يعد مهم جداً.

ماهو قالب تنظيف لمدونات بلوجر 2019؟

 قالب التنظيف بلوجر 2019 أو كود تنظيف بلوجر 2019 هو قالب بلوجر فارغ لأ يحتوي علي أي أشكال أو أدوات ويقوم بمسح القالب الحالي للمدونة أو تنظيف قالب بلوجر لتهيئة المدونة لأضافة قالب بلوجر جديد وذلك يفيد في تجنب أي أخطاء أثناء تركيب أي قالب بلوجر جديد.

طريقة تركيب قالب التنظيف بلوجر 2019

طريقة تركيب كود قالب التنظيف لبوجر سهلة جداً كل ما عليك هو وضعه مكان القالب القديم من خلال التوجه إلي لوحة تحكم بلوجر ثم المظهر بعدها تقوم بإختيار تعديل HTML وتقوم بلصق كود قالب بلوجر فارغ.


تحميل قالب تنظيف بلوجر 2019

لتحميل قالب بلوجر للتنظيف قم بالضغط علي الرابط التالي:


أخيرأ تقوم بوضع كود قالب التنظيف مكان القالب الحالي لمدونتك قبل وضع قالب جديد وشكراً

2019-10-06

10 نصائح لتسريع تحميل مدونة بلوجر وتقليل وقت التحميل


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

ليس هناك عدد قليل من المدونين الذين يهتمون بشكل أكبر بظهور مدوناتهم ، بدلاً من تسريع سرعة مدوناتهم. ستكون هذه خسارة لأنه إلى جانب أن الزائرين لا يحبون ذلك ، سيكون من الصعب أن تظهر الصفحة في مرتبة أعلي في Google.

بالطبع أذا كانت سرعة تحميل المدونة جيدة فهاذا سيحسن بالطبع ظهور المدونة في محركات البحث من جوجل.

هناك العديد من العوامل التي تجعل تحميل المدونة أسرع بكثير. من الأمثلة على ذلك استخدام الصور والجافاسكربت و الـ Css  من روابط خارجية  والاستخدام المفرط للأضافات.

كل هذا ناتج عن جهل المدونين الذين ربما لم يدركوا أن مدونتهم ثقيلة جدًا في التحميل. أو ربما لأنهم لا يعرفون ما هي أنجع وسيلة للتغلب على هذا.

كيفية اختبار سرعة تحميل مدونة بلوجر

إذا كنت ترغب في معرفة مدى سرعة تحميل المجونة الخاصة بك ، أود أن أقترح عليك أداتين على الإنترنت أستخدمهما بشكل متكرر وهما GTMetrix و PageSpeed Insights.

تستخدم هذه الأداة  نظام تصنيف يمنحك تحذيراً إذا كانت هناك مشاكل تؤدي إلى بطئ  تحميل موقع الويب الخاص بك بشكل كبير.

طرق سهلة لتخفيف تحميل مدونة بلوجر.

قم بتنفيذ النصائح التالية لتسريع تحميل مدونة بلوجر الخاصة بك.

1. استخدم CSS و Javascript التي تم تصغيرها

إذا كنت تستخدم css أو javascript خارجي (على سبيل المثال: jquery) ، فاستخدم إصدارًا مضغوطًا أو مصغرًا.

عادةً ما توجد ملفات css أو javascript المضغوطة في اسم الملف.

مثال

CSS bootstrap.min.css
Javascript bootstrap.min.js

هناك كلمة .min وهذا يعني أن الملف تم تصغيره.

إذا كنت ترغب في ضغط ملفات css أو javascript ، فيمكنك استخدام أداة أونلاينت تسمى freeformatter.com.

2. ضغط صور المواضيع في بلوجر

الخطوة الثانية التي يجب القيام بها هي ضغط الصورة.

نعم ... يجب أن تقوم بضغط الصور قبل وضعها في المواضيع.

لماذا ا؟ نظرًا لأن الصور التي نستخدمها في كل منشورات المدونة الخاصة بنا يمكن أن تكون كبيرة ، فسيكون حجمها غير جيد إذا كانت الصورة بحجم 1 ميغابايت أو أعلى.

من الواضح أن هذا سيؤدي إلى إبطاء عملية تحميل مدونتنا خاصةً إذا لم نقم بتحميل الصورة من المدونة ، ولكن باستخدام عنوان url خارجي (وليس في خادم google).

لضغط الصور أوصي باستخدام Kraken.io.

سوف يقلل Kraken.io من حجم الصورة دون تقليل جودة الصورة.

3. تجنب استخدام الصور في الخلفية

معظم المدونين المبتدئين يقومون بذلك بهدف تجميل مدوناتهم.

حتى بعد أن تقرأ ما يوجد في النقطة رقم 2 أعلاه. بالطبع سيؤدي استخدام هذه الصورة إلى إبطاء عملية تحميل المدونة.

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

4. تثبيت الأضافات بحسب الحاجة إليها فقط

توفر منصة بلوجر بالفعل الكثير من الأضافات ، وهي تهدف إلى تسهيل التصفح في مدونتك حتى تصبح مدونتك أكثر إحترافية. ولكن عليك أن تعرف أن تثبيت أضافة أو أداة ما على مدونتك سيؤثر أيضًا على سرعة تحميل المدونة.

كلما زاد عدد الإضافات ، كلما كان علي متصفحك أن يقوم بمعالجة أكواد أكثر عند تحميل صفحة في مدونتك وبالتالي بطئ التحميل.

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

5. لأ تقم بوضع الكثير من الأعلانات

 وضع الكثير من الإعلانات مربحًا بالفعل. ولكن الكثير منها يقوم بالتسبب في بطئ المدونة أيضا. وإلى جانب التباطؤ ، يوجد أحيانًا أيضًا زوّار لا يحبون المدونات التي يوجد بها الكثير من الأعلانات.

لذلك أقترح نشر الإعلانات في المكان المناسب ، ولا تضع الكثير. هذا من أجل زيادة سرعة تحميل مدونتنا وراحة القارئ.

6. ضع أكود الجافا سكريبت قبل إغلاق وسم <head>

لتحميل المدونة بشكل أسرع ، يتم وضع رموز جافا سكريبت غير خارجية أو داخلية داخل الوسم <head>.

أوصي بوضع الجافا سكريبت داخلي قبل إغلاق الوسم <head>. ولا تنس أن تكتب شفرة جافا سكريبت بتنسيق بلوجر ، لذلك لا توجد تغييرات على الكود.

فيما يلي كيفية كتابة شفرة javascript بتنسيق بلوجر.

<script type="text/javascript">
//<![CDATA

// ضع كود جافا سكريبت هنا

//]]>
</script>

7. إضافة Lazy Load لتسريع مدونات بلوجر

لاستخدام  lazyload علي الصور أوصي باستخدام lazysizes.js.

تتمثل وظيفة هذا الأسكريبت في تأخير تحميل الصورة حتى انتهاء تحميل المدونة أو الموقع .

لمعرفة كيفية استخدامها بسهولة ، يمكنك قراءة مستودع Github للأداة من هنا LazySizes.

8. استخدام سكريبت LazyLoad لأدسنس

مثل LazyLoad للصور ، وهو تأخير تحميل الصور.ولكن lazyload هذه المرة ل adsense.

إذا كنت قد قمت بالفعل بتثبيت إعلانات Google Adsense على مدونتك. سيؤدي ذلك بالتأكيد إلى تقليل سرعة تحميل المدونة قليلاً .
لأضافة سكريبت LazyLoad لأدسنس قم بوضع الكود التالي بداخل الوسم </body> أو &lt;!--</body>--&gt;&lt;/body&gt;


<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

بعد أضافة كود adsense lazyload ، يرجى حذف الكود الخاص بإعلانات Adsense الخارجية مثل هذا:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

9. قم بحذف حزمة بلوجر الافتراضية

الغرض من حذف حزمة بلوجر الافتراضية هو عدم استخدام CSS و JavaScript blogger الافتراضي لبلوجر.

هذا سوف يسرع تحميلالمدونة بشكل ملحوظ.

فيما يلي طريقة لحذف حزمة بلوجر الافتراضية.

لكن احذر من الأخطاء ! إذا حدث ذلك ، فسيكون له تأثير سيء على قالب مدونتك. لذلك قبل تطبيق الطريقة التالية ، يرجى أخذ نسخة إختياطية  للقالب أولاً.
  1. أولاً قم بتغيرالوسم <head> إلي الكود التالي &lt;head&gt;
  2. بعد ذلك استبدل الكود </head> بالكود النالي.
    &lt;/head&gt;&lt;!--<head/>--&gt;
  3. وأخيرا ، قم بتغيير الكود </body> بالكود التالي.
    &lt;!--</body>--&gt;&lt;/body&gt;

10. تحسين المدونة علي  GTMetrix أو PageSpeed Insight

آخر نصيحة للتحسين ، بعد الانتهاء من النصائح السابقة ، يرجى التحقق من سرعة مدونتك على GTMetrix أو Pagespeed Insights.

عادة ما يكون هناك شيئان أقوم بإصلاحهما بعد تحليل مدونتي  ، وهما Add Expires Headers و Reduce DNS Lookup. يمكن التغلب على كليهما بإضافة رؤوس انتهاء الصلاحية وإضافة الجلب المسبق لنظام أسماء النطاقات.

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

ما يلي هو كود لإضافةExpire Header ، يرجى وضع بداخل الوسم <head>.

<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta http-equiv="expires" content="sat, 02 jun 2020 00:00:00 GMT"/>

النقطة المهمة هي أننا ننصح بتقليل الطلبات الكثيرة على النطاقات المختلفة.

التالي هو الكود أستخدام Reduce DNS Lookup ، يرجى وضعه في  الوسم <head>.


<link href='//عنوان_مدونتك_هنا_' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//adservice.google.ca' rel='dns-prefetch'/>
<link href='//adservice.google.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
يرجى استبدال عنوان_مدونتك_هنا_ مع عنوان مدونتك، مثل  iminweb.com.

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

2019-10-04

إضافة خاصية تحميل المزيد من المواضيع علي بلوجر


مرحباً أصدقاء المدونة. في هذه الموضوع سأناقش معكم  كيفية تثبيت ميزة تحميل المزيد من المواضيع علي بلوجر باستخدام Jquery) Ajax).
بالإضافة إلى ميزة تحميل المزيد من المواضيع، هناك أيضًا ميزات التنقل بين الصفحات بالترقيم. ما لا يعجبني في نظام الصفحات المرقمة هو أنه عند فتح صفحة أخرى ، يتعين عليك إعادة تحميل الصفحة أولاً.

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

قمت بالفعل تطبيق هذه الميزة على القالب الذي قمت بإنشائه وقد قمت بمشاركته مجانًا في المقالة السابقة ، فيما يلي رابط القالب.

مثال مباشر:

قالب مينت تيك - قالب بلوجر تقني بتصميم الماتيريال ديزاين

قبل أن نبدأ  ، سيكون من الجيد أن تفهم أولاً ماذا يعني AJAX و JQuery.

ما هو Ajax

Ajax هو اختصار لـAsynchronous Javascript and XMLHTTP هي تقنية برمجة على الويب لجعل تطبيقات الويب أكثر تفاعلية.
Asynchronous غير مباشر ، وهذا يعني أننا نطلب البيانات إلى الخادم على background side .باختصار باستخدام AJAX هذا ، يمكننا استرجاع البيانات مباشرة ولا نحتاج إلى إعادة تحميل الصفحة ككل.

ما هو jQuery

jQuery عبارة عن مكتبة تحوي مجموعة توابع سريعة وصغيرة وخاصة بالـ javaScript، ومهمة هذه المكتبة جعل استخدام الـ javaScript أسهل ضمن موقعك الالكتروني. بُنيت jQuery بحيث تختصر العمليات التي تحتاج عدداً كبيراً من الأسطر البرمجية إلى مجموعة توابع تُستدعى بسطر برمجي واحد. المصدر: https://nasainarabic.net/main/articles/view/jquery

الآن سوف نستخدم AJAX بمساعدة مكتبة Jquery هذه لجعلها أسهل وأسرع في الفهم.

كيفية إضافة خاصية تحميل المزيد من المواضيع علي بلوجر

حسنًا لنبدأ

إذا لم تقم بتثبيت مكتبة Jquery على مدونتك ، فيرجى تثبيتها أولاً عن طريق وضع الكود التالي قبل الوسم </body>.


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

وأيضًا إذا قمت بتثبيت "أداة ترقيم الصفحات في مدونتك" ، فيرجى حذفها أولاً. عادةً ما تستخدم Javascript ، انظر فقط إلى أسفل مدونتك. إذا إختلط عليك الأمر تستطيع فقط وضع تعليق أسفل وسنساعدك في هذا . حول كيفية تثبيته ، قمت بتقسيمه إلي قسمين ، الواجهة الأمامية والخلفية Backend - Frontend.

1. عمل زر تحميل المزيد

حسنًا ، نحتاج أولاً إلى عمل ور (تحميل المزيد) ، إليك مثال على الكود (إذا كنت ترغب في تعديله).

الكود التالي هو كود CSS للزر ، يرجى وضعه قبل الوسم //]> </ b: skin> أو في الوسم <style> </style>.


/* Load More Button by imintweb.com */
#blog-pager.loadmore{margin:20px 0;padding:10px 0;display:block;text-align:center}
#blog-pager .loadmore-btn{cursor:pointer;padding:8px 24px;background:#4285f4;color:#fff;border-radius:50px;font-family:'Quicksand',sans-serif;font-weight:600;outline:0;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
#blog-pager .loadmore-btn.loading,#blog-pager .loadmore-btn.loading:hover,#blog-pager .loadmore-btn.no-more,#blog-pager .loadmore-btn.no-more:hover{background:#fff;color:#888;cursor:wait}
#blog-pager .loadmore-btn.no-more{cursor:default}
#blog-pager .loadmore-btn:hover{color:#fff;background:#3c79de}

التالي سنقوم بربط الزر. ابحث عن الوسم id='blog-pager' ، ثم احذف الشفرة الموجودة في العلامة ، واستبدله بالرمز التالي.
<a class='loadmore-btn' expr:href='data:olderPageUrl'>تحميل المزيد</a>

سيصبح مث الكود التالي:

<div id='blog-pager' class='loadmore'>
 <a class='loadmore-btn' expr:href='data:olderPageUrl'>تحميل المزيد</a>
</div>

ثم انقر فوق حفظ.

 الرجاء راجع النتائج أولاً على مدونتك. هل ظهر الزر؟

تم أنشاء الزر ولكن عند الضغط عليه لن بؤدي إلي شئ لأننا فمنا للتو بأنشاء الزر ولكن لم نحدد له ماذا نيرده أن يفعل ،الأن سنحدد ذلك عن طريق الطرف الخلفي JQuery Ajax.

2. إنشاء تحميل المزيد من المواضيع باستخدام JQuery Ajax

تأكد من أنك قمت بتثبيت مكتبة Jquery. وأوصي باستخدام Jquery  الإصدار 2 أو 3 أو الأحدث.

يرجى وضع الكود التالي قبل الوسم </body>.


<script>
//<![CDATA[
$(document).on('click','.loadmore-btn', function(e){
   e.preventDefault();
   let nextLink = $(this).attr('href');
   let loadmoreBtn = $('#blog-pager .loadmore-btn');
   if(nextLink){
      $.ajax({
         url: nextLink,
         beforeSend: function(){
           loadmoreBtn.addClass('loading').text('Loading...');
         },
         complete: function(){
           loadmoreBtn.removeClass('loading');
         },
         success: function(html){
           let rslt = $(html).find('#Blog1 .blog-posts').html();
           let nextPage = $(html).find('#Blog1 .loadmore-btn').attr('href');
           $('.blog-posts').append(rslt);
           loadmoreBtn.show();
           if(nextPage){
             loadmoreBtn.attr('href', nextPage).text('Load More');
           }else{
             loadmoreBtn.addClass('no-more').text('All Posts Loaded!').removeAttr('href');
           }
         }
      });
   }
});
//]>
</script>

لقد أنتهينا من إضافة خاصية تحميل المزيد من المواضيع علي بلوجر

سهلاً أليس كذلك ؟

أذا كنت في حيرة من أمرك ولا تفهم كيف تقوم بتركيبها كل ما عليك فقط هوا وضع تعلق في قسم التعليقات في الأسفل وسنقوم بمساعدتك .

هذا يكفي لليوم 😄

2019-10-01

7 أخطاء تتسبب في رفض موقعك في أدسنس

7 أخطاء تتسبب في رفض موقعك في أدسنس

أدسنس أحد أهم الأساليب للربح من الأنترنت للمبتدئين. أصبح Adsense أحد الأهداف والأحلام للمدونين المبتدئين. يمكن أن تمكننا Adsense من الحصول على دخل من الإعلانات والبدء في طريق الريح من الأنترنت.

لكنك تعلم أن انشاء حساب ادسنس انشاء حساب google adsense وتفعيله  ليس بالأمر السهل. هناك مرحلة واحدة تحدد ما إذا كنا مؤهلين للحصول على حساب Adsense أم لا ، أي عن طريق مراجعة الموقع. في هذه المرحلة ، سيتم مراجعة مدونتك أو موقعك.

 سوف تقوم أدسنس باتحقق مقدما من بعض الأمور المهمة ، على سبيل المثال ، هل من يمكن ان يعمل هذه الموقع معنا ؟ هل هذا الموقع يحصل علي أقبال من القراء؟ هل ما زال هذا الموقع نشطًا؟ و العديد من الأشياء التي يجب على AdSense مراعاتها قبل الموافقة على طلبك.

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

الأخطاء التي من الممكن أن تواجها من خلال وقت انتظار الحصول على حساب AdSense مفعَّل بالكامل

هناك العديد من الأسباب التي تجعل مدونتك مرفوضة في جوجل Adsense، وهي كالتالي:

1. الروابط المعطوبة 

أولاً الروابط المعطوبة والتي لا تعمل، هذه هي المشكلة التي أواجهها أولاً. على مدونتي ، لا يزال هناك رابط أو علامة <a> إلى الصفحة غير موجودة (404 error) ، أو روابط فارغة (مثل "#" أو ("javascript: void (0)").

لذلك أقترح ، أن تقوم بملئ جميع الروابط في العلامات <a> بشكل صحيح. ولكن إذا لم تكن هناك حاجة إلى الرابط ، على سبيل المثال بسبب وجود وظيفة جافا سكريبت ، فلن تكون هناك مشكلة.

2. محتوى مدونتك لا يتوافق مع سياسات Google Adsense

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

3. القالب الذي تستخدمه ليس جيدًا

إذا كنت ترغب في تسجيل مدونتك على Google Adsense ، فتأكد من أن مدونتك تبدوا بشكل لائق من حيث المظهر والأداء.

يجب أن يكون التنقل في مدونتك سهل ومنظم .العودة إلى النقطة 1 ، أي يجب ألا يكون هناك رابط معطوب (رابط معطل) في التنقل. حاول تحسين سرعة مدونتك ، ويجب أن تكون مدونتك سريعة في التحميل أو لأ تستغرق وقط طويل في التحميل.

تحتوي القوالب الصديقة لمحركات البحث بالتأكيد على ميزات إضافية لمحركات البحث.

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

4. مقالات المدونة منسوخة أو منقولة أو لا تزال قليلة

أذا كان المحتوي الذي تقدمه منسوخ أو مسروق من موقع أخر  بالطبع لن يتم قبولها بسهولة في  Adsense.

قم بكتابة ما لا يقل عن 5 مقالات أصلية من عملك ، وحاول ألا تكون قصيرة جدًا (أكثر من 300 كلمة على الأقل) ومن المستحسن أن تكتب مقالات مهيئة جيداً للسيو وتحدثنا من قبل عن هذه في نصائح لكتابة مقال حصري متوافق مع السيو seo.

5. لم يتم تسجيله بعد لدى مشرف موقع Google

إذا لم تكن مسجلاً في Google Webmaster ، فيرجى تقديم عنوان URL لمدونتك وخريطة الموقع أولاً ، قبل التسجيل في Adsense.

6. مدونتك لا تزال جديدة أو غير قديمة بما فيه الكفاية

سيكون من الصعب قبول المدونات التي لا تزال جديدة لأنها لم يتم التعرف عليها من قبل محركات البحث وليس لديها زوار دائمون.

بعد بلوغ عمر المدونة 6 أشهر على الأقل منذ إرسالها إلى مشرفي المواقع ، يمكنك بعد ذلك تسجيل مدونتك على Adsense، ويمكن قبل ذلك ولكن من الجيد ان تنتظر أكثر من 6 أشهر لضمان القبول.

7. أستخدام نطاق سبق وتم حظره من جوجل أدسنس

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

لقد واجهت هذا ، لقدقمت بشراء نطاق TLD .com بعد القبول في  Adsense ، لكن الإعلانات لم تظهر مطلقًا. عندما أحاول استخدام نطاق blogspot الافتراضي ، تظهر الإعلانات عادي. من هنا ، أعتقد أن النطاق الذي أشتريته كان يستخدم من قبل شخص أخر وتم حظره في Adsense.

من الجيد ان تقوم بشراء دومين من شركات موثوقه وفي موضوع سابق عن أفضل و أرخص الشركات لشراء نطاق لبلوجر ◁ تقريباً مجاناً 2019.

الخلاص

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

إلي هنا ينتهي شرح اليوم عن 7 أخطاء تتسبب في رفض موقعك في أدسنس أذا كان لديك أي سؤال أو أستفسار يرجي طرحه في قسم التعليقات في الأسفل واتمني ان يكون الموضوع مفيد للجميع وشكراً لكم.