إضافة أداة مواضيع ذات صلة (بشكل نصي) لتقوية الروابط الداخلية على بلوحر

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

الآن شرح الإضافة :
اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن :

</head>أضف قبلها مباشرة :

<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() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<style>

#related-posts {
float : right;
width : 600px;
margin-top:20px;
margin-right: 0px;
margin-bottom:20px;
font : 11px Arial;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
background:#EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsGIXAPdK5Nlr2h2jx2f7oc-BfsyvFiDO6xVzwN0hO6Ca1CtR5b70vQnFWQ416Pu3zwT3M9yqZWzWnfePXdND28tD9zMS4zdEJQPFEfs5_QdyLNt0sTrCgdibYPYGrRyxmGvsqPDUGo4/s0/widget-title-bg.png) right top repeat-y;
color : #222222;
font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:10px;text-transform:uppercase;text-shadow:0 1px 0 #fff;
}
#related-posts a {
color : #054474;
font-weight:bold;
font-family: Arial;
font-size : 14px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>الآن ابحث عن :

<data:post.body/>(إذا وجدت كودين فالثاني هو المقصود) وأضف بعده :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h2>قد يهمك أيضا :<div style='display:none;'> <b:loop values='data:post.labels' var='label'><data:label.name/><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=3&quot;' type='text/javascript'/></b:if></b:loop></div> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</b:if>

الكود الأحمر لإظهار الأداة في صفحات المواضيع فقط
max-results=3 لتحديد عدد المواضيع ذات الصلة المراد عرضها بالأداة

لإضافة خلفية عبارة عن صورة فقط :
غير الكود التالي :
background:#EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsGIXAPdK5Nlr2h2jx2f7oc-BfsyvFiDO6xVzwN0hO6Ca1CtR5b70vQnFWQ416Pu3zwT3M9yqZWzWnfePXdND28tD9zMS4zdEJQPFEfs5_QdyLNt0sTrCgdibYPYGrRyxmGvsqPDUGo4/s0/widget-title-bg.png) right top repeat-y;إلى :
background:url("رابط الخلفية") ;مع تغيير ما يلزم تغييره

لتغيير صورة السهم بصورة أخرى :
غير الرابط التالي :