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

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

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

أضف هذا الكود فوق الوسم </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>

1. 
   
2. /*Related cnmu.blogspot.com Posts*/
3. #related_posts {
4.   display: block;
5.   padding: 0 5px 5px;
6.   width: 100%;
7. }
8. #related_posts h4 {
9.   background: #777;
10.   color: #FFFFFF;
11.   display: block;
12.   font: bold 18px tahoma;
13.   margin: 5px -15px 10px -5px;
14.   padding:10px;
15.   position: relative;
16. }
17. #related_posts ul {
18.   margin-right: -50px;
19.   width: 102%;
20. }
21. #related_posts li {
22.   background:#eee;
23.   border: 1px solid #bbb;
24.   display: block;
25.   float: right;
26.   line-height: 1.4em;
27.   list-style: none outside none;
28.   margin: 0 10px 10px 0;
29.   max-height: 80px;
30.   min-height: 80px;
31.   padding: 3px;
32.   width: 46%;
33.   transition: all 0.8s ease 0s;
34. }
35. #related_posts li:hover {background:#ddd;}
36. #related_posts li a {
37.   display: block;
38. }
39. #related_posts span {
40.   font-size: 12px;
41. }
42. ul#relpost_img_sum li img {
43.   background:#fff;
44.   border: 1px solid #777;
45.   float: right;
46.   height: 60px;
47.   margin-left: 5px;
48.   padding: 2px;
49.   width: 60px;
50. }

هذا #777 هو لون خلفية كلمة مواضيع ذات صلة

1. وهذا #FFFFFF هو لون الكلمة
2. هذا #eee هو لون خلفية المواضيع
3. هذا #bbb هو لون الإطار
4. أما الرقم 46% هو مقاس الموضوعات ان جعلته أ:ثر مثلا 90% أو 100% سيصبح في كل سطر موضوع واحد وليس مقسم
5. وان صغرته مثلاً لـ 29% سيصبح في السطر ثلاث مواضيع
6. هذا #ddd هو لون خلفية المواضيع عند تمرير الماوس
7. هذا #fff لون خلفية الصور
8. وهذا #777 لون اطار الصور
9.  أما الرقم 60 والمتكرر مرتين هو عرض وارتفاع الصور
10. في حالة وجدت الإضافة مزاحة لليمين قم بتقليل هذا الرقم -50  او اجعله 0  
11. هذه اكثر النقاط أهمية في التنسيق ويمكنك بقليل من الدراية بالـ CSS أن تغير الكثير بمظهر الإضافة
12. دمتم في امان الله 

روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode