recent
أخبار ساخنة

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

mostafa
الصفحة الرئيسية

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

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

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

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

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

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


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

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


اولا نقوم بالدخول للمظهر ثم تعديل 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:"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/JavaScrip
ونضع الكود التالي فيها


<div class="hamcom">#num=(10)#lazy(true)</div>
يمكنك التعديل على عدد التعليقات المراد عرضها بسهولة، من خلال تغيير قيمة المتغير num كما هو ملاحظ في الكود.

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

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


google-playkhamsatmostaqltradent