إضافة آخر التعليقات مع صورة دائرية للمعلق بتقنية Css

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

• توجه إلى لوحة التحكم =>اختر تصميم =>إضافة اداة HTML/javascript
• قم بنسخ ثم لصق الكود التالي داخل الأداة : 

<style type="text/css"> 

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} 

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidde n;list-style:none;} 

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} 

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden; display:block;} 

.w2b_recent_comments li span{margin-top:4px;color: #333;display: block;font-size: 12px; line-height: 1.4;} 

</style> 

<script type="text/javascript"> 

//<![CDATA[ 

// Recent Comments Settings 

var 

numComments = 5, 

showAvatar = true, 

avatarSize = 60, 

roundAvatar = true, 

characters = 100, 

showMorelink = false, 

moreLinktext = "More »", 

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", 

hideCredits = true; 

//]]> 

</script> 

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script> 

<script type="text/javascript" src="http://webs-tools.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

التعديل على الكود :

• http://webs-tools.blogspot.com : ==> غيره برابط مدونتك
• 60 : هذا الرقم يمثل حجم صورة المعلق بال px.
• 100 : هذا الرقم يمثل عدد الحروف التي تريد إظهارها.
• 5 : عدد التعليقات التي تريدها أن تظهر في الإضافة.

احفظ الكود .و مبروك

Filed Under: اضافات البلوجر on الجمعة، 24 أكتوبر 2014