اضافة جميلة للمدونات كود صندوق اخر التعليقات على المدونة

1 سبتمبر، 2021

السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم

بدايتا تقبل الله صيامكم وقيامكم وادخلكم فسيح جناته ان شاء الله

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

كيفية اضافة الصندوق للمدونة

ادخل لوحة التحكم في مدونتك blogger.com
تخطيط > اضافة ادوات اختر اداة HTML/JavaScript
لان اضف الكود التالي حيث تشاء ظهوره

<h2 class=’title’>تعليقات الزوار</h2><div class=’widget-content’>
<style type=”text/css”>
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none
!important;margin:8px 0 6px !important;padding:0 2px 6px 0
!important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:left;width:250px;font:12px
Arial;color:#888;background:#FFFFFF;border:1px solid
#888;-webkit-box-shadow:0 0 3px rgba(0,0,0,.4);-moz-box-shadow:0 0 3px
rgba(0,0,0,.4);box-shadow:0 0 3px rgba(0,0,0,.4);margin:9px 10px 0
0;padding:13px 7px 7px;}
.latest_recent_comments li a:hover{color:#FFFFFF;background:#1195C9;}
.latest_recent_comments li
.avatarImage {
padding: 3px;
background: none repeat scroll 0% 0% rgb(30, 144, 255);
box-shadow: 0px 1px 1px rgb(91, 233, 166);
float: right;
margin: 0px 6px 0px 0px;
position: relative;
overflow: hidden;
}
.avatarRound{border-radius:100px 100px 100px 100px}
.latest_recent_comments li
img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position:
absolute;right:48px;top:-3px;padding:3px 3px
1px;color:#FFFFFF;background:#888;opacity:0.7;
filter:alpha(opacity=70);border:1px solid #444;display:block;font:12px Arial;line-height:1.4}
.latest_recent_comments span{display:none}
</style>
<script type=’text/javascript’>
function latest_recent_comments(e){var t;t='<ul class=”latest_recent_comments”>’;for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+=”<li>”;var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel==”alternate”){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf(“/s1600/”)!=-1){s=s.replace(“/s1600/”,”/s”+avatarSize+”-c/”)}else if(s.indexOf(“/s220/”)!=-1){s=s.replace(“/s220/”,”/s”+avatarSize+”-c/”)}else if(s.indexOf(“/s512-c/”)!=-1&&s.indexOf(“http:”)!=0){s=”http:”+s.replace(“/s512-c/”,”/s”+avatarSize+”-c/”)}else if(s.indexOf(“blogblog.com/img/b16-rounded.gif”)!=-1){s=”http://1.bp.blogspot.com/-NAMZejK41So/T0evV0_SSUI/AAAAAAAACso/ol6-PKkZipA/s”+avatarSize+”/md_blogger_logo.png”}else if(s.indexOf(“blogblog.com/img/openid16-rounded.gif”)!=-1){s=”http://4.bp.blogspot.com/-k0U7v1WpNRs/T0euKMHQi_I/AAAAAAAACsg/DNqzinhvxt4/s”+avatarSize+”/md_openid_logo.png”}else if(s.indexOf(“blogblog.com/img/blank.gif”)!=-1){if(defaultAvatar.indexOf(“gravatar.com”)!=-1){s=defaultAvatar+”&s=”+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o=”avatarRound”}else{o=””}t+='<div class=”avatarImage ‘+o+'”><img class=”‘+o+'” src=”‘+s+'” alt=”‘+i+'” width=”‘+avatarSize+'” height=”‘+avatarSize+'”/></div>’}t+=”<span>”+i+”</span>”;var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,””);if(c!=””&&c.length>characters){c=c.substring(0,characters);c+=”…”}else{c=c}t+='<a href=”‘+r+'”>’+c+”</a>”;t+=”</li>”}t+=””;document.write(t)}var numComments=numComments||5,avatarSize=avatarSize||34,characters=characters||43,defaultAvatar=defaultAvatar||”https://lh3.googleusercontent.com/-h4ww_-yvEEY/Uara1hcCU7I/AAAAAAAAA6w/FgKm-q3kYyw/h120/images.jpg”,showAvatar=”undefined”===typeof showAvatar?!0:showAvatar,roundAvatar=”undefined”===typeof roundAvatar?!0:roundAvatar,hideCredits=”undefined”===typeof hideCredits?!1:roundAvatar
</script>
<script type=”text/javascript” src=”http://madad2.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5″></script>
</div>

4.غير رابط مدونتك بدل رابط مدوناتي باللون الاحمر ثم اختر حفظ

تحديث

اقدم لكم صندوق اخر جميل ايضا

معاينة

طريقة الاضافة نفس الطريقة بالاعلى
الكود

<div class='widget-content'>
<div style="border: 5px solid #; color: cyan; height: 250px; margin: 5px 0; overflow: auto; padding: 10px; text-align: left; width: 270px;">

<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:hidden;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: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

    // Recent Comments Settings

    var

 numComments  = 9,

 showAvatar  = true,

 avatarSize  = 50,

 roundAvatar = true,

 characters  = 50,

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

 hideCredits = true;

//]]>

</script>

<script src="https://cdn.staticaly.com/gh/mohammedxx/madad2/master/comment2.js" type="text/javascript"></script>

<script src="https://madad2.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=9" type="text/javascript"></script>

</div>

لاتنسى تغيير رابط باللون الاحمر برابط مدونتك

1 سبتمبر، 2021

مقالات ذات صلة