كيفية اضافة مواضيع ذات صلة Related Posts بتأثير رائع

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

شرح تركيب مواضيع ذات صلة :

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

 لان اضغط على CTRL + F من الكيبورد لظهور عملية البحث 

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

</head>

اضف قبلة مباشرة هذا الكود :

<!--Related Posts 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-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:13px;
color: #000000;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #000000;
border-bottom: 1px dotted #000000;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}
#related-posts ul li:hover{
background-color: #FD80A2;
border-left: 2px solid #D80556;
border-bottom: 1px dotted #D80556;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;من الممكن هذه المواضيع تهمك&quot;;
</script>

<script type='text/javascript'>

//<![CDATA[

var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}

//]]>

</script>

<!--Remove--></b:if>
<!--Related Posts End-->

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

<data:post.body/>

 اضف تحتة مباشرة هذا الكود :

<!-- Related Posts 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> <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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

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

ملحوظة:
 لتغير الشكل العام والتحكم بالكود :

• الكلمة المحددة باللون الاصفر هى المسؤالة بعنوان الأضافة غير ما يلزمك 

• الكود المحدد باللون الأخضر هو المسؤال عن تغير لون الموضوع عند وضع مؤشر الماوس

• الكود المحدد باللون الأورنج هو المسؤل عن لون كتابة العنوان (( من الممكن هذه المواضيع تهمك ))

• الكود المحدد باللون السماوى هو المسؤل عن لون خط المواضيع

• الرقم المحدد باللون الاحمر هو المسؤال عن عدد المواضيع 

اذا كنت تريد مواضيع ذات صلة مع مصغرات الصور ادخل هنا

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