2010/03/08

أفضل طريقتين لعمل خاصية "المواضيع ذات الصلة"


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

أولاً : طريقة عمل المواضيع ذات الصلة وهي عبارة عن روابط نصية
نتوكل على الله ونبدأ العمل

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

 <div id='related_posts'/>

 <script src='http://www.google.com/jsapi'></script>
<script src='http://sites.google.com/site/simoxisite/Home/simo/brps.txt?attredirects=0' type='text/javascript'/>

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

 ]]></b:skin>

سوف نضع فوقه هذا الكود

 #related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
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 : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/GbYNm2feyIQ/rss.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

ونضع تحت نفس الكود الأول الذي قمنا بالبحث عنه هذا الكود

 <script src='http://bsaves.com/scripts/Related_posts_hack.js' type='text/javascript'/>

والخطوة الأخيرة نبحث عن هذا الكود

 <div class='post-footer-line post-footer-line-1'>

ونضع تحته مباشرة الكود التالي

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>مواضيع ذات صلة : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

ملاحظه :
يمكنك وضع أي جملة غير جملة (مواضيع ذات صله) كما تريد مثل (قد يهمك أيضا)
وكلمة max-results=5 تعني عدد المواضيع التي سوف تظهر ويمكنك أيضا تغيرها بالعدد الذي يناسبك عبر تغير رقم 5 بأي رقم آخر .


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


ثانيا : طريقة عمل المواضيع ذات الصلة وهي عبارة عن صور وعناوين الموضوعات كما بالصورة
نتوكل على الله
أدخل على هذا الرابط linkwithin
وأدخل بياناتك كما بالصورة

المواضيع ذات الصلة (1)

أضغط على أيقونة Get Widget! ستظهر لك صفحة جديدة فأتبع الخطوات التالية عبر الصورة

مواضيع ذات الصلة (2)

وبعد أتمام الخطوات شاهد مدونتك وشاهد عملك

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

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

  1. الطريقة الثانية أسهل وأجمل
    جزاك الله خيرا

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

    ردحذف
  3. الثانية روعة لكن حاولت احول عبارة(You might also like)لكن ما عرفت
    اشكرك على مواضيعك الرائعة

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

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

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

    ردحذف
  7. رائع جدا اخي الكريم وجزاك الله خيرا
    وهذه مدونتي التي وضعت فيها الطريقة الثانية لان الاولى ما بطت معي
    http://suheirs.blogspot.com/

    ردحذف
  8. شكرا لك
    لقد استخدمت الطريقة الثانية ونجحت فى اضافتها لمدونة من مدوناتى
    اما عندما حاولت اضافتها الى الثانية
    كانت تظهر فى اعلى التدوينه
    تحت العنوان وكلما نقلت مكانها تظهر فى اعلى التدوينه
    هل تستطيع مساعدتى؟

    ردحذف
  9. الطريقه التانيه شغاله كويس جدا بس فى مشكله ان المواضيع ذات الصله بتظهر عندى تحت عنوان الرساله وبعدها تظهر محتويات الرساله ومش عارف اظبطها عشان تبقا تحت خالص زى المدونه هنا ياريت حد يقولى المشكله دى تتحل ازاى

    ردحذف
  10. شكرا لمجهودك الكبير ، دائما موفق

    ردحذف
  11. الطريقه الثانيه اجمل واسهل وحاول تجد طريقة تغير الجمله هذة مدونتى حديثه ارجو ان تعطينى رأيك فيها http://egyptstart2011.blogspot.com/

    ردحذف
  12. تمام قوى كده ميه ميه الطريقه الثانيه ومشكووور جدا





    ماكس4يو

    ردحذف
  13. موفق اخي الكريم على الدرس الرائع الدي قدمته واثيرت به مدونتك

    ردحذف
  14. يا سلام
    جزاك الله خيرا
    http://mamodogreen.blogspot.com/

    ردحذف
  15. الطريقه الثانيه اجمل واسهل ولكن تظهر لي في الصفحة الرئيسية ما الحل لتكون في تحت المواضيع فقط

    ردحذف
  16. جزاك الله خيرآ على الاضافة اللتى ابحث عنها
    ماى واى تيوب

    ردحذف
  17. الثانية جميلة لكنها تظهر في الصفحة الاولى ونحن نريدها تظهر بعد فتح الموضوع كاملا

    ردحذف

يسعدنا تعليقك