إضافة المشاركات العشوائية مع الصور للمدونة

ضمن إضافات بلوجر، سنرى طريقة إظهار مجموعة من المواضيع بشكل عشوائي مع الصور Random Posts اسفل الموضوع.

الهدف من هذه الأداة هو جعل الزائر يبقى لفترة طويلة على المدونة، إضافة إلى الحصول على المزيد من الصفحات المشاهدة. الإضافة تتكون من صورة مأخوذة من الموضوع، العنوان، ثم فقرة نصية صغيرة. وتبدو كما يلي:
اضافات بلوجر المواضيع العشوائية
شكل إضافة المواضيع العشوائية

طريقة إضافة المواضيع العشوائية أسفل الموضوع على بلوجر



لإظهار أكثر من 3 مشاركات قم بتغيير الرقم 3 في الكود المحدد بالأحمر بالرقم الذي ينسابك.

الكود:
<style>
.recentr{
padding: 40px;
margin-bottom: 30px;
background: #ffffff;
border: 1px solid #efefef;
box-shadow: 0 1px 0 0 rgba(238, 238, 238, 0.6);
position: relative;
}
.recentr h6 {
text-align: center;
font-family: Droid Arabic Kufi;
font-size: 17px;
}
#creditadds a {
color: #aac5ff;
text-decoration: none;
font-size: 11px;
}
#random-posts img{float:right;margin-left:5px;
width:75px;height:75px;background-color: #FFFFF;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a { font-size: 18px;
color: #333;
text-transform: capitalize;
text-decoration: none;
line-height: 20px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 14px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<div class='recentr'>
<h6>مواضيع جديدة</h6>
<ul id='random-posts'>
<script type='text/javaScript'>
//<![CDATA[
var rdp_numposts=3;
var rdp_snippet_length=120;
var rdp_info='no';
var rdp_comment='comment';
var rdp_disable='Comments Disabled';
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'>
//<![CDATA[
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)+"…";};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="http://1.bp.blogspot.com/-PPTJQCe-atQ/U4ca2QTr_5I/AAAAAAAAEEc/TRrKNK1fqQY/s1600/no-image-available.jpg"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<div class="rp-snippet">'+rdp_snippet+'</div><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>
<div id="creditadds">
أداة من <a href="http://www.folfoly.com/" rel="_nofollow" target="_blank">فولفولي</a>
</div>
</div>