اضافة آخر المواضيع تعتبر اضافة فرعية نظراً لانها ليست أساسية في بلوجر بالإضافة أن آخر المواضيع طبيعي تظهر في الصفحة الرئيسية لكنها تكون حيوية داخل المواضيع أو في المدونات التي تحدث بإستمرار مثل المدونات الإخبارية ولكن أحيانا أيضا تكون قوية حينما يتم عرض آخر المواضيع من قسم معين فهذا يساعد في التركيز على قسم وتقوية الزيارات اليه لكن دعونا اولا نتكلم عن انواع اضافة آخر المواضيع , وأنا أحب تصنيف إضافة آخر المواضيع إلى 4 انواع
آخر المواضيع العادية
وهي عبارة عن اضافة تحتوي عناوين آخر المواضيع فقط يميزها الخفه والسرعه يعيبها عدم جذب الإنتباه
آخر المواضيع مع مصغرات
وهي كالسابقه لكنها تتيح نبذه من الموضوع وصورة مصغره وهي الافضل سواء في العرض او جذب الإنتباه
آخر المواضيع مصغرات فقط
جيده في المدونات التي تهتم بشكل المصغرات وتجعلها تدل على المحتوى أما المدونات التي لا تهتم بالصور المصغره لن تكون جيده في عرضها
آخر المواضيع المتحركه
تميزها الحركة في عرض عدد أكبر من المواضيع لكنها الأسوأ من حيث السرعه والثقل
لذا اخترت لكم أفضل نوعين للحديث عنهما وهما
آخر المواضيع مع مصغرات , وآخر المواضيع مصغرات فقط
آخر المواضيع مع مصغرات
وهي كالسابقه لكنها تتيح نبذه من الموضوع وصورة مصغره وهي الافضل سواء في العرض او جذب الإنتباه
آخر المواضيع مصغرات فقط
جيده في المدونات التي تهتم بشكل المصغرات وتجعلها تدل على المحتوى أما المدونات التي لا تهتم بالصور المصغره لن تكون جيده في عرضها
آخر المواضيع المتحركه
تميزها الحركة في عرض عدد أكبر من المواضيع لكنها الأسوأ من حيث السرعه والثقل
لذا اخترت لكم أفضل نوعين للحديث عنهما وهما
آخر المواضيع مع مصغرات , وآخر المواضيع مصغرات فقط
كود الإضافة أضفه الى آداة HTML/JavaScript
<style>img.recent_thumb {background:#fff;padding:2px;width:64px;height:64px;border:1px solid #777;float:left;margin:5px 10px 5px 0;}.recent_posts_with_thumbs {float: left;margin: 5px 0px 5px 0px;padding: 0;font-size:15px;font-family:Arial;}ul.recent_posts_with_thumbs li {padding:5px; height:85px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:12px;}</style><script style='text/javascript' src='https://cnmu.googlecode.com/svn/trunk/Recent-Posts.js'></script><script style='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script><div id="sai"><script src='http://cnmu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></div>
هذا الكود width:64px هو عرض الصورة المصغرة غير الرقم 64 لتغيير عرض الصورة
هذا الكود height:64px هو ارتفاع الصورة المصغره غيره أيضا بحسب ما تريد
ان ردت الصورة المصغرة جهة اليمين غير float:left الى float:right
واستبدل هذه الأرقام 5px 10px 5px 0 بهذه 5px 0 5px 10px
هذا الرقم 15px هو حجم الخط
وهذا هو font-family:Arial; نوع الخط استبدل الوسم بوسم الخط الذي تريده
وهذا هو height:85px; ارتفاع كل مشاركه قم بزيادة الرقم بحسب ما تريد
الرقم 5 هو عدد المشاركات المعروضه
والرقم 60 هو عدد حروف النبذه من كل مشاركة
ثم استبدل http://cnmu.blogspot.com برابط مدونتك
ملاحظه ان ردت عرض المواضيع من قسم معين استبدل الكود التالي default
بهذا الكود default/-/# مع مراعاة تغيير علامة # برابط القسم
مثال
http://cnmu.blogspot.com/feeds/posts/default/-/Facebook?orderby
رابط القسم هو المعلم بالأزرق
لكن الأقسام التي تكون بالعربية لا تكون كلمة بل رموز كهذه
%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1كيفية الحصول عليها , عند نسخ رابط القسم ستجده بشكل مثل التالي
http://cnmu.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5
نحن نريد الأكواد التي تقع بين العلامتين ذوات اللون الأحمرمثال كامل للمعاينة بعد إضافة القسم
<div id="sai"><script src='http://cnmu.blogspot.com/feeds/posts/default/-/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></div>
ننتقل الى آخر المواضيع مصغرات فقط
كود الإضافة ضعه في آداة HTML/Java Script
<style text-type="CSS">img.label_thumb {float:right;padding:2px;background:#fff;border:1px solid #000;width:78px;height:78px;margin-right:10px;margin-top:5px;margin-bottom:5px; }img.label_thumb:hover {opacity:0.8;filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity:0.8 }</style><script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='';}document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');if(i!=(numposts-1))document.write('');}document.write('</div>');}//]]>var numposts = 9;</script><script type="text/javascript" src="http://cnmu.blogspot.com/feeds/posts/default?alt=json-in-script&callback=labelthumbs"></script>
هذا الكود width:78px; عرض الصور المصغرة
وهذا هو ارتفاعها height:78px
والرقم 9 هو عدد المواضيع التي ستظهر في الإضافة
أيضا استبدل رابط مدونتي برابط مدونتك وان اردت عرض مواضيع من قسم معين قم بتطبيق نفس الشرح الخاص بالإضافة السابقة
وهذا هو ارتفاعها height:78px
والرقم 9 هو عدد المواضيع التي ستظهر في الإضافة
أيضا استبدل رابط مدونتي برابط مدونتك وان اردت عرض مواضيع من قسم معين قم بتطبيق نفس الشرح الخاص بالإضافة السابقة
ملاحظة ختامية : بالنسبة لأى من الإضافات وخصوصا الأولى هناك من يحب عرض أعداد كبيرة من المواضيع ولهذا يحب إستخدام الإضافة المتحركة وكما وضحت هي ثقيلة لذا البديل أن نجعل الآداة داخل إطار يمكن تمريره بحيث نعرض العدد الذي نريده من المواضيع دون أن نأخذ حيز او نثقل المدونة بآداة متحركة ثقيلة قم بمراجعة الدرس التالي لمعرفة أكثر حول الأمر
