اضافة اداة مواضيع ذات صلة لمدونات blogger

اضافة اداة مشاركات ذات صلة لمدونة blogger
اضافة اداة مشاركات ذات صلة لمدونة اسفل المشاركات لتوجية الزائر لموضوعات اخرى

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

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

فائدة اضافة مواضيع / مشاركات ذات صلة  : تساعد الاداة الزائر ليقضى فترة اطول بالمدونة وكما توفر سهولة التنقل بين التدوينات ,

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

1. ضع علامة امام توسيع قوالب عناصر واجهة المستخدم
• ابحث عن الكود التالى

</head>

ضع الكود التالى مباشرة قبل الكود السابق

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; 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 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover {font-size : 24px;  text-decoration : none; text-shadow: 2px 2px 3px #0058cd;} #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/AVvXsEizY4WjZTHR4UrLO9xWLf0FTPbDZWv-vKAwHqIMhX7iivzOrcnHeXf_XLAAPvgVn_P4C37650RHfBTp_zejIUTXI7gCOVrRxDZVv6ePkZAj1ulwY0ZD2hk6bp6GCchwOW7NN8DirhCT3DY/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

 </style> 
<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>');
document.write('<a rel="dofollow" href="http://cod-b.blogspot.com/2012/07/blogger-related-posts-widget.html">ادوات بلوجر</a></font>');
}
//]]>
</script>

الخطوة الثانية لوضع الكود HTML بالمكان الذى تظهر بة الاداة  : 

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

<data:post.body/>

ضع كود HTML التالى مباشرة اسفل الكود السابق

<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><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=5 &quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

احفظ القالب .. 

يبقى الان التعديل على كود HTML , كود CSS

      HTML

كود HTML هو الجزء الذى تضعة فى مكان ظهور الاداة " اسفل المشاركات " وياتى الكود كالتالى كما الكود السابق مباشرة

لتغيير عدد الروابط للاداة  max-results=5

تحديد عدد روابط المشاركات بالاداة  ,,  يمكنك تغيير الرقم فى الكود التالى السابق
CSS  

<style>

"هنا كود CSS" كود CSS لاداة مواضيع متشابهة ذات صلة  هو ستايل الاداة و تجدة بين الوسمين  
</style> 

لتحديد عدد روابط المشاركات بالاداة  ,,  يمكنك تغيير الرقم فى الكود التالى 

max-results=5

<b:if cond='data:blog.pageType == "item"'>

هنا كود HTML

</div></b:if>

 <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; 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 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover {font-size : 24px;  text-decoration : none; text-shadow: 2px 2px 3px #0058cd;} #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/AVvXsEjlglieF3klbBIlEF6W_EYu5JykTUyZNJPGwxqz_8cj_IxVmUgyYKvm7CWeb5RGoMdURGpppdFf-KvoiRYwkJA7XDllFk_FN998T31rxhRGu-OmgIoUseo6Vq80DenTvr2Tz9iR9JYCKZkC/s800/right_arrow-blogger.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } 

</style> 

لضبط اعدادات  CSS  لتتناسب تصميم قالب المدونة  بلوجر .. قم بتغيير القيم الافتراضية كالتالى بالترتيب

• لتغيير حجم عرض الاداة 540px 
• لتغيير نوع الخط Arial 
• لتغيير حجم خط الروابط 20px
• لتغيير لون وتاثير الظل عند المرور فوق الرابط * تاثيرات CSS

text-shadow: 2px 2px 3px #0058cd;

5- لتغيير الصورة بجانب روابط المشاركات 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizY4WjZTHR4UrLO9xWLf0FTPbDZWv-vKAwHqIMhX7iivzOrcnHeXf_XLAAPvgVn_P4C37650RHfBTp_zejIUTXI7gCOVrRxDZVv6ePkZAj1ulwY0ZD2hk6bp6GCchwOW7NN8DirhCT3DY/

6- لتغيير ستايل الفواصل واللون

dotted #cccccc;

لاى استفسار او تصميم اخر للاداة ! راسلنى من خلال نماذج التعليقات المختلفة,يسعدنى مساعدة مدونين بلوجر ! 

احصل دوريا على اخر مقالات كود بلوجر