اضافة احدث التعليقات لقالب بلوجر

 تركيب "أحدث التعليقات" لقالب بلوجر خطوة بخطوة

هل تبحث عن طريقة لإضفاء لمسة حيوية على مدونتك في بلوجر؟ 🤔 إذاً، إضافة "أحدث التعليقات" هي ما تحتاجه! هذه الإضافة تعرض آخر التعليقات التي تلقاها مدونتك، مما يمنح القراء فرصة للتفاعل أكثر مع المحتوى والشعور بأنهم جزء من المدونة الخاصة بك

و الاضافة خفيفة جدا و لا تحتاج منك اي مجهود بالتركيب فقط خطواط بسيطة جدا و ستشاهدها تعمل بشكل صحيح

 كيفية تركيب هذه الإضافة بخطوات بسيطة

 الدخول إلى لوحة تحكم بلوجر

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

2. التوجه إلى قسم "التخطيط"

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

3. إضافة أداة جديدة

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

4. اختيار أداة "HTML/JavaScript"

ستظهر لك قائمة بالأدوات المتاحة. اختر أداة "HTML/JavaScript". هذه الأداة تسمح لك بإضافة أكواد HTML أو جافا سكريبت مخصصة، والتي سنستخدمها لتركيب الإضافة.

5. إضافة كود "أحدث التعليقات"

<script type="text/javascript">
function idbcomments(a) {
var e;
e = '<ul class="idbcomments">';
for (var t = 0; numComments > t; t++) {
var r, o, n, i;
if (t == a.feed.entry.length) break;
e += "<li>";
for (var d = a.feed.entry[t], s = 0; s < d.link.length; s++) "alternate" == d.link[s].rel && (r = d.link[s].href);
for (var l = 0; l < d.author.length; l++) o = d.author[l].name.$t, n = d.author[l].gd$image.src;
n = -1 != n.indexOf("/s1600/") ? n.replace("/s1600/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s220/") ? n.replace("/s220/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s512-c/") && 0 != n.indexOf("http:") ? "http:" + n.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("blogblog.com/img/b16-rounded.gif") ? "http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s" + avatarSize + "/openid.png" : -1 != n.indexOf("blogblog.com/img/blank.gif") ? -1 != defaultAvatar.indexOf("gravatar.com") ? defaultAvatar + "&s=" + avatarSize : defaultAvatar : n, 1 == showAvatar && (i = 1 == roundAvatar ? "avatarRound" : "", e += '<div class="avatarImage"><img class="' + i + '" src="' + n + '" alt="' + o + '" width="' + avatarSize + '" height="' + avatarSize + '"/></div>'), e+='<div class="commentContent">',e += '<a href="' + r + '">' + o + "</a>";
var A = d.content.$t,
v = A.replace(/(<([^>]+)>)/gi, "");
"" != v && v.length > characters ? (v = v.substring(0, characters), v += "&hellip;", 1 == showMorelink && (v += '<a href="' + r + '">' + moreLinktext + "</a>")) : v = v, e += "<span>" + v + "</span>", e+="</div>",e += "</li>"
}
e += "</ul>";
var c = "";
0 == hideCredits && (c = "display:block;"), e += "", document.write(e)
}
var numComments = 5,
showAvatar = !0,
avatarSize = 42,
roundAvatar = !0,
characters = 35,
showMorelink = !1,
defaultAvatar = "http://1.bp.blogspot.com/-m2JqA8HH-JY/V1Y9Z1SpzpI/AAAAAAAAEEY/jnJ-r_-Ta0UadbOE84Egdea5jfcwPSSvwCLcB/s1600/noimage.png",
hideCredits = !0,
numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 40,
defaultAvatar = defaultAvatar || "http://1.bp.blogspot.com/-m2JqA8HH-JY/V1Y9Z1SpzpI/AAAAAAAAEEY/jnJ-r_-Ta0UadbOE84Egdea5jfcwPSSvwCLcB/s1600/noimage.png",
moreLinktext = moreLinktext || " More &raquo;",
showAvatar = "undefined" == typeof showAvatar ? !0 : showAvatar,
showMorelink = "undefined" == typeof showMorelink ? !1 : showMorelink,
roundAvatar = "undefined" == typeof roundAvatar ? !0 : roundAvatar,
hideCredits = "undefined" == typeof hideCredits ? !1 : roundAvatar;
//]]>
</script>
<script type="text/javascript" src="https:/feeds/comments/default?alt=json&amp;callback=idbcomments&amp;max-results=1000"></script>
<style>
.idbcomments{
list-style: none;
padding: 0;
font-size: 14px;
}
.idbcomments li{
padding: 10px;
margin: 10px 0;
border: 1px solid rgb(226, 226, 226);
border-radius: 8px;
display: flex;
}
.avatarImage{
margin-right: 0px;
margin-left: 10px;
}
.idbcomments img{
display: block;
border-radius: 10px;
}
.commentContent{
display: flex;
flex-direction: column;
}
.commentContent > *{
line-height: 1.6em;
}
</style>

تخصيص الشكل والمظهر

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

7. حفظ ومشاهدة التغييرات

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

 

و شكرا