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

<!--cnmu.blogspot.com-Related-Posts-Starts-->
<style>
#related-posts {
float : right;
width : 100%;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font-size:13px;
margin-bottom:10px;
font-family:arial;
font-weigh:bold;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #000;
font-size : 13px;
text-decoration : none;
font-weigh:bold;
display:block;
}
#related-posts a:hover {
color : #fff;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojdcTi31-WnFGVwltEqDTLvq4RBu642xGMAML_s6ozbSDuzkGKjqpzYCQ-cOY1QchYu1-jy6_mM5C5gzv0XdiYVzTOREJSSyB-Gs9b0pPk6mjNcFvvF24Xro75Nm5C3_YSXmaFyOfBrU/s20/ktipp1.png") no-repeat scroll 0 5px #E7E7E7;
margin-bottom:5px;
padding:2px 10px;
line-height : 2em;
border-radius:8px;
border:1px solid #bbb;
}

#related-posts ul li:hover {
display : block;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbTbJ2sG69rz4jfNA9Rub4oHGwtjEWgfh2EaYRrviCsYPDksWlCPYsV1ejukW_J3hgihupohyhr9tTYJr_wf0Uh7f2Z1G2nacl-DAvdu9MryVuAwb7Z4jf1Nzpe5GtK-nwsYcppatRuZs/s20/ktipp.png") no-repeat scroll 0 5px #464646;
border-color:#000;
transition:all 0.8s ease 0s;
}
#related-posts h3 {color:#000; background:#FCA000; display:inline; margin-right:10px; border-radius:8px; padding:2px 10px; border:1px solid #000; font-size:16px; text-align:center;}
 </style>
<script src='https://cnmu.googlecode.com/svn/trunk/related-post-just-title.js' type='text/javascript'/>
<!--cnmu.blogspot.com-Related-Posts-end-->

طريقة التنسيق لمن يريد تنسيق مخصص

الآن الخطوة الثانية في تركيب الآداة

<!--cnmu.blogspot.com-RELATED-POSTS-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b><h3>مواضيع ذات صلة</h3></b><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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
<!--cnmu.blogspot.com-RELATED-POSTS-end-->