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

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

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

معلومات عن الشرح:
- مدة التي تحتاجها : 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

ثم احفظ. وانتهيت يمكنك الآن تصفح مدونتك ورؤية النتيجة مثل: