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

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

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

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

<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/AVvXsEgd8e6Nndw6GX7auPUUMh7dwc10YUC07Fd6IKFDcl1DKJe8rAThXBvjAKcLmeuhVEa6g3rsGNfa1OZ-gtAefhXICihyQHyleMHvdwaoJTpl7Km5wW37he42j_S8LsBQISzIQ9Uf5bqQff8/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/AVvXsEjvkeeZrO2Fd-NeBhzw4L7GXzU1O5aAIUaA_1mLShyUkDBf6udyQvXh0yfIvd5zR02pO0aRy_SKPUYYmdj4dMzuSwYLwKGAsH8wcsn2dhnMkcms5pqGZeanZCCLb66zfd12-npJME_Tnfw/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'/>

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

هذا #000 هو لون الرابط
وهذا #fff هو لون الرابط عند تمرير الماوس
والرقم 13 هو حجم الخط
هذا اللون #E7E7E7 هو لون الخلفية
وهذا #464646 هو لون الخلفية عند تمرير الماوس
الرابط الأحمر هو رابط الأيقونة والازرق هو رابطها عند تمرير الماوس ان اردت تغيرها
هذا #bbb هو لون الإطار
وهذا #000 لون الإطار عند تمرير الماوس
هذا #FCA000 هو لون خلفية كلمة مواضيع ذات صلة
وهذا #000 هو لون الخط
والرقم 16 هو حجم الخط

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

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

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

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b><h3>مواضيع ذات صلة</h3></b><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>

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

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

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

Add Comment