تتميز أداة عرض التعليقات في Sidebar بكونها قابلة لتخصيص حيث يمكنك تخصيص عدد التعليقات المراد عرضها، كما تدعم إضافة آخر التعليقات ميزة Lazy Loading او التحميل الكسول الذي يساهم في جعل الإضافة لا تؤثر على سرعة مدونتك، كما يمكنك تفعيلها وتعطيلها بسهولة ومن خلال HTML فقط
البحث عن
]]></b:skin>
فوقه
.hamcom *{box-sizing:border-box;margin:0;padding:0}
.hamcom{display:none;direction:rtl}
@keyframes xload{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.hamcom .hload{width:50px;height:50px;border:solid 3px #aaa;border-right-color:transparent;border-bottom-color:transparent;border-radius:100%;margin:20px auto;animation:xload 1s linear infinite}
.hamcom .cm-item{padding:8px 0;border-bottom:solid 1px #eee}
.hamcom .cm-item:last-child{border:0}
.hamcom .cm-item a.hamian{display:flex;flex-direction:row;text-decoration:none}
.hamcom .cm-item .cm-right{margin:0 0 0 10px}
.hamcom .cm-item .cm-right .cm-logo{width:50px;height:50px;overflow:hidden;border-radius:100%}
.hamcom .cm-item .cm-right .cm-logo img{width:100%;height:100%;object-fit:cover}
.hamcom .cm-item .cm-left{display:flex;flex-direction:column}
.hamcom .cm-item .cm-left .cm-pop{display:flex;flex-direction:column}
.hamcom .cm-item .cm-left .cm-pop .auname{color:#00a;font-size:16px}
.hamcom .cm-item .cm-left .cm-date{display:inline-block;color:rgb(0,140,33);margin:5px 0;font-size:14px}
.hamcom .cm-item .cm-left .cm-data{color:#555;font-size:14px;line-height:1.4em}
البحث عن
</body>
فوقه
<script type='text/javascript'>
//<![CDATA[
function gbt(d,e){var b=e.split("#"),c="";for(let a=0;a<b.length;a++)if(b[a].indexOf(d)> -1){var f=b[a].indexOf("=(")+2,g=b[a].indexOf(")");c=b[a].substring(f,g);break}return c}
function hamlink(d){var b=d.link,c="";for(let a=0;a<b.length;a++)"alternate"==b[a].rel&&(c=b[a].href);return c}
function hamimg(b){var a=b.author[0].gd$image.src;return a.indexOf("blogblog")> -1?"https://blogger.googleusercontent.com/img/a/AVvXsEiRsAp7PnDA2d9xSbFDTuDmDwkAkY3Q2AaF-lUvP6cQMh-9beaJUiHfs_XerXnl6Gjwdq08nsevBWzVn26cG_TBtkg5SehkdPujknwkUPB78JK4R9UNKWLXmnXikfdd15ktJFfEB1V8pX_zGQGL04-XmG_RIY-wlwJjcrQQWwJhJ7ZR_0GlrlVdMgyy=s16000":"https:"+a}
function hamdate(b){var a=b.published.$t.substring(0,10).split("-");return a[2]+" "+["\u064A\u0646\u0627\u064A\u0631","\u0641\u0628\u0631\u0627\u064A\u0631","\u0645\u0627\u0631\u0633","\u0627\u0628\u0631\u064A\u0644","\u0645\u0627\u064A","\u064A\u0648\u0646\u064A\u0648","\u064A\u0648\u0644\u064A\u0648\u0632","\u063A\u0634\u062A","\u0634\u062A\u0646\u0628\u0631","\u0627\u0643\u062A\u0648\u0628\u0631","\u0646\u0648\u0646\u0628\u0631","\u062F\u062C\u0646\u0628\u0631"][parseInt(a[1])]+" "+a[0]}
function exgetcomments(b,a){$.ajax({type:"Get",url:"/feeds/comments/summary?alt=json&max-results="+a,dataType:"jsonp",success:function(f){var c=f.feed.entry,d="";for(let a=0;a<c.length;a++){var e=c[a].author[0].name.$t,g=hamimg(c[a]),h=c[a].title.$t,i=hamlink(c[a]),j=hamdate(c[a]);d+="<div class='cm-item'><a class='hamian' target='_blank' href='"+i+"'><div class='cm-right'> <div class='cm-logo'> <img src='"+g+"' alt='"+e+"'> </div></div><div class='cm-left'> <div class='cm-pop'><span class='auname'>"+e+"</span></div><span class='cm-date'>"+j+"</span> <p class='cm-data'>"+h+"</p></div></a></div>"}b.html(d)}})}
$(".hamcom").each(function() {
var a = $(this),
b = a.html().trim(),
d = $(window),
e = parseInt(gbt("num", b)),
c = gbt("lazy", b);
a.html("<div class='hload'></div>"), a.show(), "true" == c || "yes" == c ? d.on("scroll load", function b() {
d.scrollTop() + d.height() > a.offset().top && (exgetcomments(a, e), d.off("scroll load", b))
}) : exgetcomments(a, e)
})
//]]>
</script>
تركيب اكواد HTML اداة آخر التعليقات
قم بالتوجه الى التنسيق من خلال لوحة تحكم بلوجر
ابحث عن الشريط الجانبي وقم بالضغط على إضافة أداة.
ثم قم بإختيار HTML/JavaScript وضع الاكواد التالية في محتوى الصندوق.
<div class="hamcom">#num=(10)#lazy(true)</div>
نسخ
يمكنك التعديل على عدد التعليقات المراد عرضها بسهولة، من خلال تغيير قيمة المتغير num كما هو ملاحظ في الكود
يمكنك الغاء خاصية lazy من خلال استبدال true ب false
0 التعليقات :
إرسال تعليق