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

Related Posts with Thumbnails and Summary

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

معاينة

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

أضف هذا الكود فوق الوسم </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 == "item"'>
<div id='related_posts'>
          <h4>مواضيع ذات صلة</h4>
          <b:loop values='data:post.labels' var='label'>
               <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
<div style='clear: both;'/>
</div>
</b:if>

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

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

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

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

201