شرح إضافة مواضيع ذات صلة أسفل التدوينات

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

لنبدأ على بركة الله :
ولا قبل كل شئ يجب حفظ نسخة من قالبك تحسباً لأي خطأ.
ثم ندخل على قالب > تحرير HTML > نضغط على علامة بالمربع لتوسيع القالب
ونبحث عن الكود التالي :

-------------------

</head>

--------------

فوقه مباشرة نقوم بوضع الكود التالي :

----------------------------------------------------------

<!--Related Posts with thumbnails Scripts and Styles Start--> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<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, &#8220;Times New Roman&#8221;, 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> 

<!--Related Posts with thumbnails Scripts and Styles End-->

-------------------

بعد ذلك نقوم بالبحث عن :

--------

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

---------

 اذا لم تجده في قالبك ابحث عن :

-------

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

----------

ثم أضف الكود التالي بعد الكود السابق مباشرة :

---------------








<!-- Related Posts with Thumbnails  Code Start--> 



<b:if  cond='data:blog.pageType ==  &quot;item&quot;'> 



<div id='related-posts'>  



<b:loop values='data:post.labels' var='label'> 



<b:if  cond='data:label.isLast != &quot;true&quot;'> 



</b:if>  



<script expr:src='&quot;/feeds/posts/default/-/&quot; +   

data:label.name +   


ript&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;'
   type='text/javasc

&quot;?alt=json-in-s

cript'/></b:loop> 



<script  type='text/javascript'> 



var  currentposturl=&quot;<data:post.url/>&quot;; 





var maxreslts=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://www.body-sn.blogspot.com'   style='display:none;'>Related 

Posts with thumbnails for   blogger</a><a 


ay:none;'>bodysnBlog</a>  

href='http://www.body-sn.blogspot.com'   
style='disp

l



</b:if></b:if> 



<!-- Related Posts with Thumbnails Code  End-->



--------------




ولان خصص الاضافات التالي لتتناسب مع مدونتك







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







var  relatedpoststitle="مواضيع ذات صلة";






لتغيير عدد التدوينات التي ستظهر في الإضافة









var maxresults=5; 




تغيير لون الخلفية التي تظهر عند التأشير بالفأرة







background-color:#d4eaf2;            



لتغيير حجم خط الإضافة





font-size: 1.3em;




تغيير نوع خط الإضافة




font-family: Tahoma, Georgia





الى هنا ننتهي من هذه التدوينة، بانتظار تعليقاتكم واستفساراتكم



دمتم في رعاية الله وحفظه.