مواضيع ذات صلة مع ملخصات

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

معاينة

تركيب الإضافة الكود الأول

أضف هذا الكود فوق الوسم </head>

<script type='text/javascript'>
//<![CDATA[
/*Related Post*/
var relnojudul = 0;
var numpost = 4;
var numchars = 88;
//]]>
</script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/Related-summ.js'/>

مع مراعاة ان الرقم 4 هو عدد المواضيع

والرقم 88 هو طول احرف الملخص

تركيب الإضافة الكود الثاني

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
          <h4>مواضيع ذات صلة</h4>
          <b:loop values='data:post.labels' var='label'>
               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
<div style='clear: both;'/>
</div>
</b:if>

أضف الكود السابق بعد أحد الاكواد التالية

<div class='post-footer'>

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

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

تركيب الإضافة الكود الثالث مرحلة التنسيق

أضف الكود التالي فوق الوسم]]></b:skin>

/*Related cnmu.blogspot.com Posts*/
#related_posts {
  display: block;
  padding: 0 5px 5px;
  width: 100%;
}
#related_posts h4 {
  background: #777;
  color: #FFFFFF;
  display: block;
  font: bold 18px tahoma;
  margin: 5px -15px 10px -5px;
  padding:10px;
  position: relative;
}
#related_posts ul {
  margin-right: -50px;
  width: 102%;
}
#related_posts li {
  background:#eee;
  border: 1px solid #bbb;
  display: block;
  float: right;
  line-height: 1.4em;
  list-style: none outside none;
  margin: 0 10px 10px 0;
  max-height: 80px;
  min-height: 80px;
  padding: 3px;
  width: 46%;
  transition: all 0.8s ease 0s;
}
#related_posts li:hover {background:#ddd;}
#related_posts li a {
  display: block;
}
#related_posts span {
  font-size: 12px;
}
ul#relpost_img_sum li img {
  background:#fff;
  border: 1px solid #777;
  float: right;
  height: 60px;
  margin-left: 5px;
  padding: 2px;
  width: 60px;
} 

 هذا #777 هو لون خلفية كلمة مواضيع ذات صلة
وهذا #FFFFFF هو لون الكلمة
هذا #eee هو لون خلفية المواضيع
هذا #bbb هو لون الإطار
أما الرقم 46% هو مقاس الموضوعات ان جعلته أ:ثر مثلا 90% أو 100% سيصبح في كل سطر موضوع واحد وليس مقسم
وان صغرته مثلاً لـ 29% سيصبح في السطر ثلاث مواضيع
هذا #ddd هو لون خلفية المواضيع عند تمرير الماوس
هذا #fff لون خلفية الصور
وهذا #777 لون اطار الصور
 أما الرقم 60 والمتكرر مرتين هو عرض وارتفاع الصور
في حالة وجدت الإضافة مزاحة لليمين قم بتقليل هذا الرقم -50  او اجعله 0 

هذه اكثر النقاط أهمية في التنسيق ويمكنك بقليل من الدراية بالـ CSS أن تغير الكثير بمظهر الإضافة

دمتم في امان الله