إضافة مواضيع عشوائية مع مصغرات Random Post

الكاتب :كن مدون

 واليوم نعرض إضافة لعرض مواضيع عشوائية

                                                                                                                                                                                                                    

كنا عرضنا في موضوع سابق زر المواضيع العشوائية واليوم نعرض إضافة لعرض مواضيع عشوائية لكن بعناوين المواضيع وصور مصغرة Random Post With Thumbnail الفرق بين الإضافتين أن الأولى كما سماها مبرمجها ضربة حظ فأنت لا تعلم الى أين يأخذك الزر أما هذه انت تعلم بالضبط اي موضوع ستشاهد وكلاهما يفيد في إبقاء الزائر وقت أطول نظراً لانهما يعرضان مواضيع مختلفة مع كل تحديث للصفحة

وطريقة الإضافة فقط ضع الكود التالي في آداة HTML/JavaScript

<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='تعليق';
var rdp_disable='بدون تعليقات';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDwFPtrXK15DVaduZ4NmdgIHQxJlDKOikRk9m1JaetYdOUcmlhm7nYNJwhaZ-u17lJX8OWy7gJCJHoakjeConWI4E6iGofnGc4lJhN4YuuRy2gtBos0mmJWjXOOSiNaZ-MdhFVV_TwzU/s1600/na_image.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

إن أردت جعل صور المصغرات على اليمين حول left الى Right و

Right الي left

الرقم 5 هو عدد المواضيع المعروضة في الإضافة

150 هو طول العنوان المسموح بعرضه

yes حولها الى No إن أردت إخفاء التعليقات والتاريخ من الإضافة 

أما 36 هو طول وعرض الصور المصغرة