إضافة أداة آخر التعليقات في الشريط الجانبي على مدونة

 تتميز أداة عرض التعليقات في 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