الجمعة، 6 سبتمبر، 2013

كيفية تركيب هاك مواضيع قد تهمك أو مواضيع ذات صلة على مدونات البلوجر أسفل كل تدوينة مثل مدونة أفكار-برو



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

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

  مثال حي  


طريقة تركيب هذه الإضافة :

1- أدخل إلى لوحة التحكم الخاصة بمدونتك على البلوجر، ثم اضغط على قالب كما هو مبين فى الصورة التالية :
2- ثم أنقر على "تحرير Html" كما في الصورة التالية :

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

3- بعد ذلك اضغط على Ctrl + F للبحث عن هذا السطر التالي :
</head>

4- ثم ألصق الكود التالي فوقه مباشرة :
<style>
#related-posts { float : left; width : 600px; margin-top:-40px; margin-left : 5px; margin-bottom:20px; font : 14px DroidKufi-regular,Arial,Helvetica,Sans-serif; margin-bottom:10px; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-posts .widget h2, #related-posts h2 { font-size : 11px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a {color:#606060; font-family: DroidNaskh-bold,DroidKufi-bold,Arial,Helvetica,Sans-serif; font-size: 11px; transition: all 1s ease 0s; text-decoration : none; }
#related-posts a:hover {color: #FF6816; padding-right: 10px; transition: all 1s ease 0s; text-decoration : none;}
#related-posts ul { border : medium none; margin : 10px; padding : 0; }
#related-posts ul li { display : block; background : url(&quot;http://1.bp.blogspot.com/-QTVWk9lz38o/UgJnX27NCPI/AAAAAAAAD5Q/o6PfyKlZu8Q/s1600/rss-feed-icon-afkarpro.png&quot;) no-repeat scroll 0 0 transparent; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 1.5em; border-bottom:1px dotted #e1e1e1; }
</style>
<script src='http://yourjavascript.com/1019345231/related-posts-by-afkarpro-blogspot-com.js' type='text/javascript'/>

5- الآن اضغط على Ctrl + F للبحث عن هذا السطر التالي :
<data:post.body/>
* و إن وجدته أكثر من مرة فالأخير هو المقصود.

6- و قم بلصق الكود التالي أسفله :
<!-- Start - Related Posts Code By Afkarpro -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
  <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/>
    </b:if>
  </b:loop>
  <a href='http://afkarpro.blogspot.com/2013/09/How-to-Add-Related-Posts-for-Bloggers.html'>
    <img alt='Related Posts Widget for Blogger' src='http://3.bp.blogspot.com/--0glhl0xeHs/Uiig176y77I/AAAAAAAAEVc/ixwhHGQSS2M/s1600/Related-Posts-blogger-widgets.png' style='border: 0'/>
  </a>
  <br/><br/>
 
<img border='0' src='http://4.bp.blogspot.com/-zSedzIc4GVM/UiigzDCnkxI/AAAAAAAAEVU/8yYVsBv8A58/s1600/Related-Posts-Blogger-Widget-afkarpro.blogspot.com.gif' style='margin-right:-18px;'/>

  <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
</div>
</b:if>

<div style='clear:both'/>
<!-- remove -->

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- End - Related Posts Code By Afkarpro -->

ملاحظة :
* إن لم تعجبك صورة "مواضيع قد تهمك" يمكنك تغيير رابط الصورة برابط صورة من اختيارك، أو استبدال الكود التالي : 
<img border='0' src='http://4.bp.blogspot.com/-zSedzIc4GVM/UiigzDCnkxI/AAAAAAAAEVU/8yYVsBv8A58/s1600/Related-Posts-Blogger-Widget-afkarpro.blogspot.com.gif' style='margin-right:-18px;'/>

 بما يلي :
<h2 style='color: #fff; font: 20px droidkufi-bold; padding: 5px 8px; background: #1D94C8 ; display: inline-block; border: none;'>شـــاهـــد أيـــضـــا</h2>

مع تعديل عبارة شـــاهـــد أيـــضـــا بما يناسبك.

6- و في الأخير قم بحفظ القالب، ومبروك لك الإضافة.


*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
و دمتم في رعاية الله وحفضه




ـ
روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

هناك 51 تعليقًا :

  1. لم تنجح معي ما السبب

    http://internet-world-technologie.blogspot.com/

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

      و تأكد من أنك قمت بلصق الكود الثاني أسفل <data:post.body/> الأخير

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

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

      حذف
  3. ازاى اكبر خط موضوعات تهمك و ازود عددها ؟

    ردحذف
    الردود
    1. - بخصوص تغيير حجم خط مواضيع قد تهمك فقط قم بالبحث عن الكود التالي

      #related-posts a {
      color: #606060;
      font-family: DroidNaskh-bold,DroidKufi-bold,Arial,Helvetica,Sans-serif;
      font-size: 11px;
      text-decoration: none;
      transition: all 1s ease 0s;
      }

      ثم غير فيمة font-size من 11 إلى أي قيمة أخرى تناسبك

      - أما بخصوص عدد المواضيع المعروضة فابحث عن var maxresults=10 وغير الرقم 10 بما يناسبك من حيث عدد المواضيع القصوى التي يمكن نشرها

      * ملحوظة : في حال عدم توفر نفس التسمية للموضوع المعروض على 10 مواضيع فإنه سيتم عرض عدد أقل من مواضيع تهمك

      حذف
  4. لو سمحت ازاى اغير حجم الخط في الهاك بتاع المواضيع ده
    وازاى اغير عدد المواضيع المعروضة

    ردحذف
    الردود
    1. - بخصوص تغيير حجم خط مواضيع قد تهمك فقط قم بالبحث عن الكود التالي

      #related-posts a {
      color: #606060;
      font-family: DroidNaskh-bold,DroidKufi-bold,Arial,Helvetica,Sans-serif;
      font-size: 11px;
      text-decoration: none;
      transition: all 1s ease 0s;
      }

      ثم غير فيمة font-size من 11 إلى أي قيمة أخرى تناسبك

      - أما بخصوص عدد المواضيع المعروضة فابحث عن var maxresults=10 وغير الرقم 10 بما يناسبك من حيث عدد المواضيع القصوى التي يمكن نشرها

      * ملحوظة : في حال عدم توفر نفس التسمية للموضوع المعروض على 10 مواضيع فإنه سيتم عرض عدد أقل من مواضيع تهمك

      حذف
    2. عملتها بس برضو الحجم زي ما هو الخط صغير

      حذف
    3. لا يمكن أخي فـ font-size: 11px; الموجود بداخل #related-posts a هو المسؤول عن التحكم في حجم خط مواضيع قد تهمك ..!!! وقد جربت ذلك عندي ...

      إلا إدا كان هناك كود آخر مؤثر، مثلا الأدي التالي #related-posts a معرف مرتين في css

      حذف
  5. تسلم ايدك كده الكود فعلا اتعدل معايا لما بحثت عن #related-posts a وغيرته ..
    معلش هتعبك معايا اكتر وكنت عايز حاجتني

    الاولى ازاى بقي اعمل الخط غليظ مش رفيع ... او ياريت ازاي اعمل الهاك نفس اللى انت حاطه في موقعك ؟

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

    ردحذف
    الردود
    1. العفو أخي

      -أولا- قم بالتغييرات الثلاثة التالية :

      1- استبدل الكود أسفله

      #related-posts ul {
      border: medium none;
      margin: 10px;
      padding: 0;
      }

      بالكود التالي

      #related-posts ul {
      background-color: #FFFFFF;
      border: medium none;
      margin: 0 -18px;
      padding: 0;
      width: 562px;
      }


      2- استبدل الكود أسفله

      #related-posts a:hover {
      color: #FF6816;
      padding-right: 10px;
      text-decoration: none;
      transition: all 1s ease 0s;
      }

      بالكود التالي

      #related-posts a:hover {
      color: #FF6816;
      padding-right: 10px;
      text-decoration: none;
      transition: all 1s ease 0s;
      background-color: #fff;
      }


      3- استبدل الكود أسفله

      #related-posts a {
      color: #606060;
      font-family: DroidNaskh-bold,DroidKufi-bold,Arial,Helvetica,Sans-serif;
      font-size: 14px;
      text-decoration: none;
      transition: all 1s ease 0s;
      }

      بالكود التالي

      #related-posts a {
      color: #606060;
      font-family: Arial,Helvetica,Sans-serif;
      font-size: 14px;
      text-decoration: none;
      transition: all 1s ease 0s;
      font-weight: bold;
      }


      - أما بخصوص تأثير التنسيق على البحث فلا أظن ذلك،
      إلا إذا كان الموقع سيئاً جدا بخصوص تناسق ألألوان، ما سيؤثر على كسبـك لزوار دائمين

      حذف
  6. حاولت كذا مرة بيطلع الشكل برضو كده
    http://khafefaday.blogspot.com/2013/10/2013_7442.html

    ردحذف
    الردود
    1. يــا أخي المشكل أنه لديك تكرار في تعريف related-posts على مستوى أكواد التنسيق css

      حذف
  7. طب في حل اقدر ان شاء الله اعمله ؟

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

      حذف
  8. تسلم ربنا يجعله في ميزان حسناتك ...
    اهو رابط القالب بتاعي انا رفعت على الميديا فاير
    http://www.mediafire.com/view/d6qfx0srt7nmvj8/template-4141184627617350835(5).xml

    ردحذف
    الردود
    1. حمل القالب المعدل من هنا
      http://www.restfile.ca/df8g36t3bm18/template-By_afkarpro.rar.html

      حذف
  9. انا حملت القالب ونزلته على مدونتى اتظبط الخط ول حاجة
    بس الهاك خارج شوية من الناحية اليمين
    http://khafefaday.blogspot.com/2013/10/3.html
    http://khafefaday.blogspot.com/2013/10/2013_7442.html

    ردحذف
    الردود
    1. الآن !
      http://www.restfile.ca/chbioqrhnmbg/template-By_afkarpro2.rar.html

      حذف
  10. كل ما احم القالب يقول

    لم نتمكن من حفظ نموذجك.

    تعذر تحليل النموذج نظرًا لأن صياغته غير صحيحة. يرجى التأكد من إغلاق جميع عناصر XML بشكل سليم. رسالة خطأ XML:‏
    Content is not allowed in prolog.

    ردحذف
    الردود
    1. استعمل القالب الذي أرسلته لك في االأول
      http://www.restfile.ca/df8g36t3bm18/template-By_afkarpro.rar.html
      لتتفادى ظهور رسالة الخطأ

      ثم باستبدل الكود أسفله

      #related-posts-afkarpro ul {
      border: medium none;
      direction: rtl;
      margin: 10px;
      padding: 0;
      width: 570px;
      }
      بالكود التالي

      #related-posts-afkarpro ul {
      border: medium none;
      direction: rtl;
      margin: 5px 20px;
      padding: 0;
      width: 555px;
      }

      إن لم تحصل على النتيجة التي تريد فإلعب على القيم التالية
      margin: 5px 20px;
      width: 555px;

      حذف
  11. انا لعبت في الكود ده
    لقيته جبالهى شمال
    float : left; width : 570px; margin-top
    هو ده اللى بتتظبط منه ؟؟

    ردحذف
  12. تسلم على متابعة استفساراتى تسلم

    ردحذف
  13. اخي العزيز عدد المواضيع لا يتغير عن 20 موضوع http://www.mogtm3-msmmen.tk/2013/08/blog-post_30.html

    ممكن حل لو تكرمت

    ردحذف
    الردود
    1. بخصوص عدد المواضيع المعروضة فابحث عن var maxresults=10 وغير الرقم 10 بما يناسبك من حيث عدد المواضيع القصوى التي يمكن نشرها

      * ملحوظة : المواضيع التي تظهر في هذه الإضافة هي التي لها قاسم مشترك من ناحية الأقسام مع الموضوع المعروض

      حذف
  14. السلام عليكم
    اخي العزيز ادخلت الاكواد لكن الاضافه لم تعمل لا ادري لماذا ؟
    علما ان مدونتي فيها اضافه اقرا ايضا لكن هذه الاضافه اعجبنتي ولا اعرف كيف اضيفها للمدونة ؟
    وشكراً
    http://safa1434.blogspot.com

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

      حذف
  15. شكراً لك بارك الله فيك
    http://safa1434.blogspot.com

    ردحذف
  16. شكرا ياخي حقا موضوع بدون اخطاء وهذه مدونتي المختصة في شروحات الويندوز والبرامج و ويندوز8 http://beginners4arabs.blogspot.com/

    ردحذف
  17. يا جماعة انا عاوز افهم هي كام طريقه لاني والله تعبت ومن كثره الطرق المختلفه ايهم هي الطرقه الصح وشكرا

    ردحذف
    الردود
    1. جميع الطرق جيدة،
      فقط استخدم الشكل المناسب في المكان و القالب المناسب

      حذف
  18. زكاتك اخي عندي مشكلة ماطلعلي غير الصورة ماطلعوا المواضيع ممكن حل

    ردحذف
    الردود
    1. ربما أخي لم تنسخ الكود كاملا !!

      حذف
  19. السلام عليكم ،، بارك الله فيك أخي على الشرح

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

    ما السبب يا ترى ؟
    http://health4y.blogspot.com/

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

      حذف
  20. شكرا لك أخي على هدا الموضوع وفقك الله فقد أضفتها الى موقعي

    ردحذف
  21. مشكور

    لو ممكن تبادل اعلاني مدونتي القصير للبرامج المجانية

    http://bramjfreee.blogspot.com
    المدونة جديدة لكن الحمد لله اصبح يزداد عدد الزوار كل يوم

    ردحذف
    الردود
    1. العفو أخي،
      بخصوص التبادل الإعلاني سأفتحه قريبا، وسأراسلك عندها
      بالتوفيق لك في عالم التدوين

      حذف
  22. اخي انا اقل شي في كل تصنيف 30 تدوينة والمواضيع بتضهر 6 فقط مع اني ضايف اضهار 10مواضيع ممكن الحل

    ردحذف
    الردود
    1. إذا غير قيمة var maxresults=10 إلى 30
      و قم بالتعديل على المتغير التالي من max-results=6" إلى max-results=30"

      بالتوفيق

      حذف
  23. اخي انى غيرت عدد المواضيع الى 10 بس بيعرف فقط 6 ممكن الحل

    ردحذف
    الردود
    1. بعد أن غيرت قيمة var maxresults=10
      قم الآن بالتعديل على المتغير التالي max-results=6"

      * ملحوظة : المواضيع التي تظهر في هذه الإضافة هي التي لها قاسم مشترك من ناحية الأقسام مع الموضوع المعروض

      حذف
  24. السلام عليكم الله يبارك بيك اخي انته جدا رجل طيب ياريت ان تقدر تساعدني في حل هاذي المشكله لماذا لا تضهر في البحث كوكل مدونتي عند كتابه محترف العراف في القوقل لا تضهر مدونتي هل تعرف سبب ياريت تساعدني هذة المدونه ياريت تعرف السبب
    http://professional-iraq.blogspot.com/

    ردحذف
    الردود
    1. وعليكم السلام
      السبب ياأخي هو أن مدونتك لم تتأرشف بعد بشكل جيد على محركات البحث بجوجل ..

      أنصحك باتباع دروس السيو التالية :

      * شرح كيفية نشر موقعك أو مدونتك على أكثر من 200 محرك بحث - أغلبها لجوجل
      http://goo.gl/WT6K2d

      * طريقة سهلة للغاية و جد فعالة لتقوية و تسريع أرشفة مدونتك على محركات البحث
      http://goo.gl/u7gHxI

      * كيفية إضافة وسم الألت مع العنوان إلى جميع الصور الموجودة بمدونتك تلقائيا لرفع وثيرة أرشفتها على محركات البحث
      http://goo.gl/HNKSsx

      * تهيئة عنوان مدونة البلوجر وعناوين المواضيع لتحسين نتائج البحث و تقوية السيو الخاص بمدونتك
      http://goo.gl/JVMYQq

      ---------------------------------------

      * ولمعرفة مواضيع مدونتك أو موقعك المؤرشفة لدى جوجل إليك الرابط االتالي :
      http://goo.gl/C5rX7D

      حذف
  25. السلام عليكم اخي لم تظهر الاضافة

    ردحذف
    الردود
    1. وعليكم السلام
      قمت بزيارة مدونتك وأظن أنك قد قمت بحل المشكل
      أعتذر عن التأخير في الرد

      حذف
  26. اخي السلام عليكم اولا بعدين انا حتيت الكود فوق الوسم الاخير وجربتو علي جميع الوسوم والاكواد المتشابه وبرضو متعملش الحل ايه ارجو الرد سريع تحياتي ليك شكرا اوي

    ردحذف
  27. اخي جربت كل شيء من الموضوع خطوه خطوه صح وجربت اخر خطوه في الاوله والثانيه والثالثه ولم يظهر ايضا ارجو ان تشوف حل وشكرا اخي

    ردحذف