الأثير https://blog.itheric.com/2019/01/recent-comments-blogger-widget.html

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

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


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

الشكل الأول

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>


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

شارك المقال:

تفاعل:

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

اشترك بنشرتنا البريدية

تنبيه