إضافة أداة مواضيع ذات صلة للبلوجر

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء

كود بلغة HTML:

</head>

ثم ضع الكود التالي فوقه

<!-- www.monte-escalier-prix.org Related Posts with thumbnails -->
<!--  remove --><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.6em;
font-weight: bold;
color: black;
font-family:  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  type='text/javascript'>
var  defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNojsHUyvTCKhVPtKKjN2KpDbGM557fMvipCnpvQoS19hQ0oEDOnXN35B8kvguebT6UKG6-gyTxkJLk5hEI471zIssq4uhbUdOcX2tPQhHMG8kI2zTWp9OiEJHxBakydwhT-h1ZVTaj5Y/s400/noimage.png";
var  maxresults=5;
var splittercolor="#d4eaf2";
var  relatedpoststitle="مواضيع ذات صلة ";
</script>
<script  
src='http://sites.google.com/site/lightbox007/abuiyad/related-posts-with-thumbnails-for-blogger-pro.js.txt'
  type='text/javascript'/>
<!-- remove --></b:if>
<!--www.pergola-bois-terrasse.org Related  Posts with thumbnails -->

ملاحظة : يمكنك تغيير كلمة "مواضيع ذات صلة" بأي جملة تريد .
ثم قم بالبحث عن الكود التالي:

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

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

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

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

<!-- www.monte-escalier.org Related Posts with Thumbnails Code Start-->
<!-- remove  --><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'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div  style='clear:both'/>
<!-- remove --></b:if>
<b:if  cond='data:blog.url == data:blog.homepageUrl'><b:if  cond='data:post.isFirstPost'>
<a  
href='http://abu-iyad.blogspot.com/2010/07/related-postssimilar-posts-widget-for.html'><img
  style="border: 0" alt="Related Posts Widget For Blogger with  
Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png"  
/></a><a href='www.monte-escalier-prix.org' ><img  
style="border: 0" alt="Blogger Widgets"  
src="http://image.bloggerplugins.org/blogger-widgets.png"  
/></a>
</b:if></b:if>
<!-- Related Posts  with Thumbnails Code End-->

ملاحظة : يمكنك تغيير الرقم 5، وهو يدل على عدد المواضيع ذات الصلة التي سيتم عرضها.

أخيرا قم بحفظ القالب و إذهب للمعاينة

المصدر:شبكة ابويوسف http://merimiweb1.blogspot.com/2014/08/blog-post_54.html#ixzz3DlFqm9ED

facebook

twitter

google+