خاصية مواضيع ذات صلة مع الصور related posts with thumbnails

Buzz It
الجمعة، 1 يناير 2010



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



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


معلومات عن الشرح:
- مدة التي تحتاجها : 3 دقائق على الأكثر.
- الخبرة التي تحتاجها: تحتاج منك القليل من التركيز .
- ماذا نحتاج: لا تحتاج لأي شىء.
- هل الخدمة مجانية: نعم الخدمة مجانية تماما.
- هل تحتاج تحميل: لا تحتاج.


الشرح:
أولا: إذهب الى التخطيط ثم تحرير HTML
ثانيا: قم بحفظ و توسيع القالب بوضع علامة على خانة توسيع محتويات القالب الخاص بك.
ثالثا: قم بالبحث عن الكلمة التالية باستعمال ctrl+f
</head>
أضف الكود الآتي قبلها مباشرة
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End—>
ثم ابحث عن أحد الكودين التاليين (بعض القوالب تستخدم الكود الأول والأخرى تستخدم الثاني)

<div class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-1'>
بعده مباشرة :
<!-- Related Posts with Thumbnails Code Start-->
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="مواضيع ذات صلة";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
يمكنك تغيير ما هو بالأحمر حسب رغبتك:

- "مواضيع ذات صلة" هي ما سيظهر قبل المواضيع



- max-results=6 تعني أن عدد المواضيع التي ستظهر هو 6
ثم احفظ. وانتهيت يمكنك الآن تصفح مدونتك ورؤية النتيجة مثل:




4 التعليقات:

الياس يقول...

شكرا لك أخي سيفو شرح وافي و بنفس تنسيق المواضيع الأخرى.
أتمنى أن يستفيد زوارنا الكرام.

kumonah يقول...

جزاكم الله خير..
أخي الكريم تظهر لي رسالةعندما أريد حفظ التعديلات:
لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
رسالة خطأ XML: The string "--" is
not permitted within comments

فما الحل ؟

مان نجم يقول...

شكرا اخى ولكن فعلا نفس الرساله السابقه

لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
رسالة خطأ XML: The string "--" is not permitted within comments.

kareem Jeleed يقول...

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