اضافة مواضيع ذات الصلة مع ملخص للمواضيع مع صورة مصغرة لكل موضوع

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

شكل اضافة مواضيع ذات الصلة

طريقة تركيب مواضيع ذات الصلة في مدونة بلوجر

1- من لوحة التحكم   >>>  قالب   >>>   تحرير html
2- باستعمال  ctrl+f  ابحث عن :

]]></b:skin>

3- انسخ الكود التالي بعده مباشرة :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

#related_posts h4 {
font-weight: bold; font-size: 22px; line-height: 250%;&quot; face=&quot;Sorts Mill Goudy&quot; size=&quot;4&quot;;
}
#related_posts {
padding: 10px 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
font-family: &#39;Droid Sans&#39;, Arial, Verdana, sans-serif;
}
#related_posts h4, #comments .komhead h4 {
font-family: &#39;Oswald&#39;, sans-serif;
}
ul#relpost_img_sum {
    margin: 0;
    padding: 0;
}

ul#relpost_img_sum li {
    border-bottom: 1px dashed #DDDDDD;
    float: left;
    height: 82px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 10px 10px 10px 0;
    width:98%;
    height: auto;
}

ul#relpost_img_sum li a {
    display: block;
}
ul#relpost_img_sum li img {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 5px;
    padding: 2px;
    background-color: white;
    border: 1px solid #DDD;
}

ul#relpost_img_sum li a.relinkjdulx {
    background-image: none;
    color: #359BED;
    display: block;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
}
</style>
<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary v1.0 (May 01, 2013)
copyright (c) 2013 http://rydnet.blogspot.com/*/
var relnojudul = 0;
var relmaxtampil = 5;
var numchars = 180;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
</b:if>

4- احفظ الأداة .
5- الآن  ابحث عن أحد الوسمين التاليين :

<div class='post-footer'>   أو   <div class = 'post-footer-line post-footer-line-3'>

6- انسخ الكود التالي بعده مباشرة :
  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related_posts'> <div class='relhead'> <h4>مواضيع ذات الصلة:</h4><div class='stripe-line'/> </div> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='relpost_img_sum'> <script type='text/javascript'>artikelterkait();</script> </ul> </div> </b:if>
7- احفظ الأداة .

طريقة تعديل مواضيع ذات الصلة لتتناسب مع مدونتك

1- 5 العدد الأقصى للمواضيع التي تريدها أن تظهر أسفل الموضوع الأصلي.
2- 180 عدد الحروف القصوى التي ستكون في ملخص كل موضوع من المواضيع ذات الصلة.
3- يمكنك أن تشاهد أيضا  : يمكنك بأي عبارة أخرى من اختيارك (مثلا مواضيع ذات الصلة)
4- الرابط بالأزرق : هو رابط الصورة التي ستظهر مع الموضوع الذي لا يحتوي على أية صورة (يمكنك تغييرها برابط صورة من اختيارك)
انتهينا من تركيب الاضافة......
مع تحيات حمزة رمزي...........

 تم النشر يوم  الأحد، 1 نوفمبر 2015 ' الساعة  2:03 ص

Facebook Twitter Google+ Linkedin Digg Print