أسهل و أفضل طريقة لإضافة "مواضيع ذات صلة" أسفل التدوينات

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




معاينة مباشرة للإضافة


-- شرح تركيب الإضافة :

أولا قبل كل شئ يجب حفظ نسخة من قالبك تحسباً لأي خطأ.

ثم ندخل على قالب > تحرير 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, “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>            
<!--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 +     &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;'     type='text/javascript'/></b:loop> 
<script  type='text/javascript'> 
var  currentposturl=&quot;<data:post.url/>&quot;; 
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://www.efada.net'   style='display:none;'>Related   Posts with thumbnails for   blogger</a><a   href='http://www.efada.net'     style='display:none;'>EfadaBlog</a>  
</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

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

منقول من :
إضافة "مواضيع ذات صلة" أسفل التدوينات