افضل طريقه لاضافة مواضيع ذات صله بشكلين مختلفين لمدونات بلوجر

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

اسهل طريقه لاضافة اداة مواضيع ذات صله لمدونات بلوجر شكلين

الشكل الاول

اضافة مواضيع ذات صله مصحوبه بصور الموضوع على شكل قائمه افقيه متحركه

كيفية اضافة هذه الاداه الى مدوناتكم

1- من لوحة التحكم -> قالب -> تحرير HTML

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</head>

** والصق الكود التالي قبله تمامآ (فوقه)

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: black;
font-family: Tahoma, Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sma-blogger.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

ثم قم بالبحث عن

<div class='post-footer-line post-footer-line-1'>

اذا لم تجده قم بالبحث عن

<p class='post-footer-line post-footer-line-1'>

** والصق الكود التالي بعده مباشره (تحته)

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="مواضيع ذات صلة";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://alb33dani.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://alb33dani.blogspot.com' style='display:none;'>EfadaBlog</a>
</b:if></b:if>

وبالاخير قم بحفظ القالب والمعاينه ومبروك عليك الاضافه

الشكل الثاني

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

كيفية اضافة هذه الاداه الى مدوناتكم

1- من لوحة التحكم -> قالب -> تحرير HTML

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</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/AVvXsEjc-YRgnwhmfb2K-MPQnOrVtPwxtKL3-aWyi-K1PB7Rtwi5M_jxZQwQ7K3KGxFY7il_53cJRQjeC88Cp-lPP4aydmlM0EDawa8hND-dl8TCYcZOVqY2nu6do7h522UmuMIdrwi1SnaKz3Y/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("http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") 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 == "item"'>
<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 != "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=4"' type='text/javascript'/></b:if></b:loop></div> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</b:if>

max-results=4 لتحديد عدد المواضيع ذات الصلة المراد عرضها بالأداة

وبالاخير قم بحفظ القالب والمعاينه ومبروك عليك الاضافه

By glok

Similiar tagsاضافات بلوجر دروس بلوجر