اضافة جميلة للمدونات كود صندوق اخر التعليقات على المدونة
السلام عليكم ورحمة الله وبركاته
بدايتا تقبل الله صيامكم وقيامكم وادخلكم فسيح جناته ان شاء الله
اليوم تم انشاء اضافة جميلة صندوق اخر التعليقات للمدونات خفيف وجميل بتأثيرات بسيطه
صورة الصندوق
كيفية اضافة الصندوق للمدونة
- ادخل لوحة التحكم في مدونتك 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezuyAgBe57ja20Oi3TNcDfc4fGpBGjuh_4qe7hPASfabxKyWmVNjgr95o3fjWkCkGGbvmL4cnnEyQWs4z4ofLQp7kGF4-xIn-_4dA67MsRy633ZxS2XdIS01fPw6N_tMBjWcHFhbvQEyJ/"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFh_iQD3W8xjO0iQwWkJKrKDfRsYu-dFiXK4XZ-oFyJ-bjhMS8EUqXlNuJBuNqklS-X5E-rTypZ9_Cy1v7N5Ff5a6iMAXo59DfH0eXOY7Z_rh1NlT5GlykaGgCF8uD-uRVLMi3PaqAUtq8/"+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&callback=w2b_recent_comments&max-results=9" type="text/javascript"></script>
</div>
| لاتنسى تغيير رابط باللون الاحمر برابط مدونتك |
;(( (k)
رائع http://el-masrawya.blogspot.com
(h)