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

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

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

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

نتوكل على الله ونبدأ العمل

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

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

 <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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulrAquIkfofLWnqlAjKL6ZahH4WtpbOoyVdslV1IRcgDh6NLlciITq4h28SVonQvAgWDeo6KRGKqOOY1f2yJDQMfdcbbD4i0Oxkp4FJvMaDC-9gk3z5reclNLdaAt4TbBvzf4GJrSyTk//") 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

وأدخل بياناتك كما بالصورة

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

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

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

مع تمنياتي لكم بالتوفيق