[admin]

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

أولا : صورة عن الإضافة :



مثال حي : معهد خبراء بلوجر

الآن شرح الإضافة :
الخطوة الأولى : اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن : </head>
أضف فوقها مباشرة الكود التالي :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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-right:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, 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 type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=3;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

توضيحات :

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

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

<data:post.body/>

إن وجدت اثنين فالثاني هو المقصود



أو

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

أو

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

وأضف بعدها :

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 

<!-- Related Posts with Thumbnails Code End-->

لاحظ أنه يفضل أن يكون الرقم المقابل لmax-results= في هذا الكود أكبر برقم من المتواجد في الكود السابق.


اضغط حفظ الآن

عثمان بن الطالب إذا أعجبك الموضوع لا تبخل علينا برد وبالضغط على زر أعجبني للفيسبوك أسفله