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

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

الخطوة الاولى

 ابحث عن هذا الوسم في القالب </head>  وأضف فوقه الكود التالي

<!--blogbzm.blogspot.com-Related-Posts-Starts-->
<style>
#related-posts {
float: right;
width: 100%;
background-color: rgba(0, 0, 0, 0.13);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;}
#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/AVvXsEitlPwyrir1HfRNXazyDE-wUOhNEAboDa_xXVvUUHLM9AzaYcITRfWwLFiIi7BszaUG6D277XLXluGKMp4F6fh3jfgXqxP-o_PBKXwG43HpjyIIpmN3n5ABJwzEfB05dymkMiaQy_XvJFA/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/AVvXsEgVz1k5O3VLBSaufkKtQGnBS4DAo2azM1uu1CkeUVxhFzuBaqMs48xBOwocK8U6LlkWVWBoOsGe7zAlv8sfIH-NetnDrE9riQ4r6i9mWO3s6WK6uSwaOVBjr2qrJUe-ysfSrDBhurxpYFQ/s20/ktipp.png") no-repeat scroll 0 5px #1b9bff;
border-color:#000;
transition:all 0.8s ease 0s;
}
#related-posts h3 {color: #FFF;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkuglKdbXyY6NrIe9PPAHvxA2A-L2mkVLoF7fxzMn0eQG5XRH3zl3hZMLYzS-lPscx7lqBj89JaBjs5OFQPr7ZPqYMZitGoU3YFPIx8pG51Jw2c_P9hg3lVxLg0sxHerO3AsrljAz-QKy/s1444/bigic.png") no-repeat scroll 100% 1px #0062C4;
padding: 2px 10px;
font-size: 16px;
text-align: center;}
 </style>
<script src='https://cnmu.googlecode.com/svn/trunk/related-post-just-title.js' type='text/javascript'/>
<!--blogbzm.blogspot.com-Related-Posts-end-->

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

ابحث عن الكود التالي 

<div class='post-footer'>

وأضف تحته الكود التالي

<!--blogbzm.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>
<!--blogbzm.blogspot.com-RELATED-POSTS-end--> 

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

والرقم 5 قم بزيادته ان اردت زيادة عدد الروابط

انتهى بحمد الله

من فضلك اضغظ لايك لمشاهدة لينك التحميل