إضافة اخر التعليقات بشكلين احترافيين

---- your ads -----

إضافة اخر التعليقات عبارة عن واجهة تعمل بطريقة أتوماتيكية تقوم بعرض آخر التعليقات التي تنشر على المدونة.
هذه الاداة مهم للذين يريدون عرض التعليقات التي تنشر على المدونة , وأيضا يمكن الاستغناء عن اشراف التعليقات من لوحة التحكم بهذه الاداة لأن التعليقات ستظهر عليها مباشرة.
إضافة لذالك توفر هذه الااة جذبا للزوار عن طريق عرض المناقشت الجارية على المدونة.

الشكل الأول

See the Pen Recent Comments Blogger Widget V1 by MohammadQt (@itheric) on CodePen.

الشكل الثاني

See the Pen Recent Comments Blogger Widget V2 by MohammadQt (@itheric) on CodePen.

لإضافة الأداة ادخل الي بلوجر وسجل دخولك لمدونتك ثم اختر المظهر ثم تعديل HTML
أضف أحد الكودين التاليين قبل/فوق الوسم </head>

الشكل الاول

مـعـاينة الشــكـل الأول

<style type='text/css'>
#recent_comments{padding:0;margin:0;max-height:320px;overflow-x:hidden;overflow-y:scroll}
#recent_comments li{padding:10px 0;font-size:14px}
#recent_comments li a.recencmtitle{color:#222;display:block;margin:0 auto 10px auto;font-weight:700}
#recent_comments li .recencmbody{background:#fdf1ca;color:#000;display:block;padding:10px;margin:0 0 0 5px;border-radius:5px;line-height:normal;box-shadow:0 2px 0 rgba(0,0,0,0.1);}
#recent_comments li:nth-child(odd) .recencmbody{background:#def7fd}
</style>
<script type='text/javascript'>
//Recent Comments Settings
var numComments  = 15;
var characters  = 80;
</script>
<script type='text/javascript'>
//<![CDATA[
//Recent Comments
var numComments=numComments||15,characters=characters||80;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<a class='recencmtitle' href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" ";commentsHtml+="<span class='recencmbody'>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
</script>

الشكل الثاني

مـعـاينة الشــكـل الثاني

<style type='text/css'>
#recent_comments{padding:0;margin:0;max-height:320px;overflow-x:hidden;overflow-y:scroll}
#recent_comments li .recencmbody{color:#222;padding:0;margin:0 0 0 5px;line-height:normal}
#recent_comments li a.recencmtitle{color:#222;display:block;margin:0 auto 10px auto;font-weight:bold}
#recent_comments li{font-size:14px;list-style:none;padding:0 15px 15px 0;position:relative;border-right:1px solid rgba(0,0,0,0.1);margin:0;margin-right:6px}
#recent_comments li:before{content:"";background:#f39c12;height:12px;width:12px;display:block;border:2px solid #fff;border-radius:100%;float:right;position:absolute;top:6px;right:-6px}
</style>
<script type='text/javascript'>
//Recent Comments Settings
var numComments  = 15;
var characters  = 80;
</script>
<script type='text/javascript'>
//<![CDATA[
//Recent Comments
var numComments=numComments||15,characters=characters||80;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<a class='recencmtitle' href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" ";commentsHtml+="<span class='recencmbody'>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
</script>

المظلل بلأبيض عدد التعليقات الظاهر في الاداة

الان قم بحفظ المظهر واتجه الى تخطيط قم بإضافة أداة HTML/JavaScript وألصق الكود التالي داخلها ثم قم بالحفظ

<script type='text/javascript'>
document.write("<script src=\"/feeds/comments/default?alt=json&callback=recent_comments\"><\/script>");
</script>

ومبروك عليك الاداة
اذا كان لديك اي استفسار يرجى وضعه في تعليقات

---- your ads -----

 CSS

 javascript

 إضافات بلوجر

Share This :