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

محسن حميان
0
عرض التعليقات في sidebar مدونة بلوجر

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

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

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

تقوم الأداة بعرض في كل تعليق، اسم المعلق وكذلك نبذة عن تعليقه، بالاضافة الى صورة ملفه الشخصي، واذا ما ضغطت على اي تعليق ستتمكن من التوجه مباشرة الى موضوع التعليق، بالإضافة ان المتصفح سيتوجه مباشرة الى التعليق بدون داع للبحث عنه.

عرض التعاليق على مدونة بلوجر يعطي انطباع جيد لزوار الجدد، كما سيجعلهم على دراية بالمناقشات الجارية على موقعك، وبالتالي تشجيعهم على زيارة المزيد من مواضيع مدونتك.

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

طريقة تركيب أداة عرض التعليقات في الشريط الجانبي



تتميز أداة عرض التعليقات في Sidebar بكونها قابلة لتخصيص حيث يمكنك تخصيص عدد التعليقات المراد عرضها، كما تدعم إضافة آخر التعليقات ميزة Lazy Loading او التحميل الكسول الذي يساهم في جعل الإضافة لا تؤثر على سرعة مدونتك، كما يمكنك تفعيلها وتعطيلها بسهولة ومن خلال HTML فقط.

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

تركيب اكواد CSS اضافة آخر التعليقات

من خلال لوحة تحكم Blogger قم بالتوجه الى المظهر ثم اضغط تعديل HTML .

قم نسخ اكواد CSS التالية ولصقها فوق ]]></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}

تركيب اكواد Javascript لعرض التعليقات في قالب بلوجر

وكذلك قم بتركيب اكواد Javascript فوق </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:"https://www.7amian.com/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 فهي تساهم في جعل التعليقات لا تظهر مباشرة في الشريط الجانبي، بل تنتظر الى ان ينتهي تحميل الصفحة، وهذا مايساهم في جعل هذه الأداة لا تؤثر على سرعة مدونتك نهائيا.

يمكنك الغاء خاصية lazy من خلال استبدال true ب false.

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

إرسال تعليق

أحدث أقدم