[ بلوجر ] مواضيع ذات صلة مع ملخصات للمدونات بلوجر

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

أضف هذا الكود فوق الوسم </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 أن تغير الكثير بمظهر الإضافة