اكواد اضافة الموضوعات الحديثة متعددة الالوان متدرجة و بصور مصغرة

اكواد اضافة الموضوعات الحديثة متعددة الالوان متدرجة و بصور مصغرة

البوستات الحديثة داخل مدونتك هى اكثر محتويات مدونتك حيوية ، وتساعد على زيادة معدل النقر داخل مدونتك .

عندما تستخدم اضافة الموضوعات الحديثة تعمل على تحديث عناوين الموضوعات التى تستدعيها الاضافة من ارشيف مدونتك

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

كما هو موضح بالصورة اعلاه تكون شكل الاضافة.

نأتى للاكواد :

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKiZxyqlYK_OpN_lBpfIRTcOOfeg59OvoxAUh50XcrqW9vsZ8rtjF6vqHjnothOyn1yP3710XkoxwA11BkuN6Elk-Gtt7yh5wloaWaE8kPGpWc1asJ0RAvwnQ41oPiqgY1UCq9mIAe1zOM/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink =true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://egyforus.blogspot.com/2018/08/multi-colored-recent-posts-widget-for_26.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

        

1- رقم 5 هو عدد عناوين البوستات التى تعرضها يمكنك زيادتها او انقاصها كما تحب ان تعرض بتغيير الرقم var posts_number = 5; 

2- كلمة true باللون الازرق اذا اردت عرض الصور المصغرة اتركها كما هى ام اذا اردت الغائها فحولها الى كلمة  false           var showpostswiththumbs = true;
3- كلمة var insidereadmorelink = true;
باللون الاخضر تعرض اقرأ المزيد واذا اردت الغائها حولها الى كلمة false
4- كلمة var posts_date = true;
باللون البنك تعرض تاريخ الموضوع واذا اردت حزف التاريخ حولها الى كلمة false
5- كلمة var post_summary = true;

باللون البرتقالى تعرض مقتطف من الموضوع اما اذا اردت عرض عنوان الموضوع فقط حولها الى كلمة false

لاتنسى ان تستبدل رابط مدونتى باللون الاحمر برابط مدونتك

ضع هذه الاكواد داخل اضافة اداة HTML/Javascript

ومبروك عليك الاضافة الجديدة

أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني: