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

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

أولا : صورة عن الإضافة :

http://i1258.photobucket.com/albums/...latedposts.png

مثال حي : معهد خبراء بلوجر

الآن شرح الإضافة :
اذهب إلى تحرير 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://lh6.googleusercontent.com/-B7Vkw9_qc8Y/TkAfDi4z6DI/AAAAAAAAAoU/s0oPtRH3Vok/s000/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://lh6.googleusercontent.com/-B7Vkw9_qc8Y/TkAfDi4z6DI/AAAAAAAAAoU/s0oPtRH3Vok/s000/widget-title-bg.png)  right top repeat-y;

إلى :

كود:

background:url("رابط الخلفية") ;

مع تغيير ما يلزم تغييره

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

كود:

http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png

برابط الصورة المراد عرضها

بهذا يكون الدرس انتهى. لا تنسوا الضغط على زر الإعجاب الخاص بالفيسبوك أسفله.