اضافة مواضيع ذات صلة بالصور Related Posts with thumbnails

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

شرح الأضافة :

الان اذهب الى لوحة تحكم مدونتك وقبل تركيب اى كود يجب اخذ نسخة احتياطية ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالبالأن اضغط على تحرير 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 type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiry6aMURvfkJRfyHyfKhZcaPshrE1RTUUefaw-aWsplJJlDhYXnkM4slhZL6DWUBlwjB_UXVmewxh9u6hMBGgYG_xS6wj-fnUsIclt7AbShy4INx5eAhkHBhkid63c9rliPV3W20tXhNs/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

ثم ابحث عن هذا الكود :

<div 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=6;
var relatedpoststitle="من الممكن تفيدك هذه التدوينات";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

غير كلمة من الممكن تفيدك هذه التدوينات الى الأسم الذى تريدة المشار باللون الاصفر

غير رقم 6 المشار باللون الأخضر الى عدد المواضيع الذى تريد ظهورة بالمشاركة

بألاخير قم بعملية حفظ القالب وستجد الاضافة بداخل المشاركات 

صورة موضحة للشكل النهائى 

انتهى الشرح وارجو بأن هذه التدوينة اعجبتكم وافادات الجميع (( لا خير فى كاتم العلم ))

مصدر هذه التدوينة : http://www.bloggertipandtrick.net/related-post-with-thumbnails-blogger