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

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

- كيفية تركيب الإضافة :

1-  أدخل  إلى مدونتك ثم أختر لوحة التحكم >> قالب >> تحرير قالب .

2- إبحث عن الوسم : </head>

3- إضف هذا الكود فوقه :

 <style>
#show-total {position :fixed;top:9px;left:295px;z-index:99;cursor:pointer;
float :left;}
.total-show {background-color:#ebbd74;color:#fff;border:1px solid  #fafafa;padding:2px 6px;font-size:11px;
border-radius:2px;font-weight:normal;}
#notif {cursor:pointer;}
#notif:before {content:&quot;\f0f3&quot;;font-family:FontAwesome;font-style:normal;
font-weight:normal;text-decoration:inherit;font-size:20px;color:#aaa;display :block;
position :fixed;top:15px;left:300px;opacity:1;z-index:97;transition:all 0.3s ease-in-out;}
#notif:hover:before {opacity:1;}
#notif2 {cursor:pointer;display :none}
#notif2:before {content:&quot;\f00d&quot;;font-family:FontAwesome;font-style:normal;
font-weight:normal;text-decoration:inherit;font-size:20px;color:#f35d5c;display :block;
position :fixed;top:15px;left:300px;opacity:1;z-index:97;transition:all 0.3s ease-in-out;}
#notif2:hover:before {opacity:1;}
#cm-wrapper {width : 310px;position :fixed;top:50px;left:-381px;z-index:9999;
background-color:#fff;padding:15px 15px 25px 13px;color:#444;font-family:&#39;ge_ss_threeregular&#39;,ge_ss_threeregular;border-top:4px solid #11b7b5;font-size:10px;transition:all 0.2s ease-in-out;}
#cm-wrapper:before {content:&quot;&quot;;width : 0;height:0;position :absolute;top:-24px;
left:298px;border:10px solid transparent;border-color:transparent transparent #11b7b5;}
#cm-scroll {width : 100%;height:1000px;max-height:100%;overflow:auto;position :relative;}
#comments-container {font-size:13px;color:#444;font-family:&#39;ge_ss_threeregular&#39;,ge_ss_threeregular;opacity:1;}
#comments-container.cm-active {position :fixed;left:0;top:61px;}
.scrollgeneric {line-height:1px;font-size:1px;position :absolute;top:0;right:0;}
.vscrollerbase {width : 5px;background-color:#fafafa;}
.vscrollerbar {width : 5px;background-color:#f2f6f7;}
.hscrollerbase {height:10px;background-color:#fafafa;}
.hscrollerbar {height:10px;background-color:#fafafa;}
.scrollerjogbox {width : 10px;height:10px;top:auto;right:auto;bottom:0px;left:0px;
background-color:transparent;transition:0.3s ease-in-out;}
.cm-outer {margin:0 auto;padding:0;font-size:11px;text-align:right;}
.cm-outer pre {background-color:#f9f9f9;color:#888;border:1px solid #e0e0e0;border-right:2px solid #f7941d;font-size:11px;}
.vscrollerbar .cm-outer pre {width : 5px;background-color:#fafafa;}
.cm-outer li {padding:7px 10px 12px;list-style:none;clear:both;position :relative;margin-left:10px;}
.cm-outer code {color:#888;font-size:11px;}
.cm-outer li.selected {border-right:2px solid #ddd;}
.cm-outer li:first-child {border-top:none;}
.cm-outer li:last-child {border-bottom:none;}
.cm-text {color:#888;}
.cm-outer {margin:0 0 5px}
.cm-header {margin:4px 60px 8px 0;font-size:15px;font-weight:normal!important;}
.cm-header a {color:#666;font-family:&#39;ge_ss_threeregular&#39;;text-decoration:none;font-size:13px;font-weight:400;}
.cm-header a:hover {color:#49abeb;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-right:60px}
.cm-outer img {display :block;float :right;background:#fafafa url(&#39;http://1.bp.blogspot.com/-21HK5HI5YEM/U6wYCTGPkKI/AAAAAAAAECQ/_R2ECAxKrug/s1600/anonim.png&#39;) no-repeat 50% 50%;
overflow:hidden;border-radius:100px;position :absolute;top:10px;right:0;
border:2px solid #f9f9f9;transition:all 0.3s ease-in-out;}
.cm-outer img:hover {border:2px solid #f2f6f7;}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#aaa;font-size:11px;text-decoration:none;}
.cm-footer a:hover {color:#888;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://1.bp.blogspot.com/-21HK5HI5YEM/U6wYCTGPkKI/AAAAAAAAECQ/_R2ECAxKrug/s1600/anonim.png);}
.bg_hitam{display :none;position :absolute;position :fixed;top:0%;left:0%;width : 100%;
height:100%;background-color:#000;z-index:90;opacity:0.3;transition:all 0.3s ease-in-out;}
.sticky {position :fixed;top:42px;z-index:100;}
</style> 

4- بعد ذلك إبحث عن الوسم : </body>

5- إضف الكود التالي فوقه :

 <script src='https://docs.google.com/file/d/0B-LfmBH13G56M0gyaDVhcmtmVWM' type='text/javascript'/>
<div id='notif' title='أخر التعليقات'/>
    <div id='notif2' title='إغلاق'/>
    <div class='bg_hitam' id='bg'/>
    <div id='cm-wrapper'>
    <div class='flexcroll' id='cm-scroll'>
    <div id='comments-container'/>
    </div>
    </div>
    <div id='show-total'/>
    <script type='text/javascript'>
    //<![CDATA[
    var originalTitle = document.title;
    var cm_config = {
        home_page: "http://www.homeblog7.blogspot.com/",
        max_result: 18,
        t_w: 50,
        t_h: 50,
        summary: 9999,
        new_tab_link: false,
        ct_id: "comments-container",
        new_cm: " New Comments!",
        interval: 30000,
        alert: true,
        alert: function(total) {
            document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
            document.title = '(' + total + ') ' + originalTitle;
        }
    };
    $('#notif').click(function(){$("#cm-wrapper").css({left: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({left: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({left: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({left: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
    var stickyNavTop = $('#HTML001').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML001').addClass('sticky');} else {$('#HTML001').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
    setTimeout(function() {
            $('.jsfiddle-demo').each(function() {
            $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
        });
    }, 5000);var cm_config_defaults={home_page:"http://www.homeblog7.blogspot.com/",max_result:15,t_w:50,t_h:50,summary:9999,new_tab_link:false,ct_id:"comments-container",new_cm:" New Comments!",interval:30000,alert:true,},_cookie={set:function(g,f,j){var i,h;if(j){i=new Date();i.setTime(i.getTime()+(j*24*60*60*1000));h="; expires="+i.toGMTString()}else{h=""}document.cookie=g+"="+f+h+"; path=/"},get:function(f){var e=f+"=",h=document.cookie.split(";"),j;for(var g=0;g<h.length;g++){j=h[g];while(j.charAt(0)==" "){j=j.substring(1,j.length)}if(j.indexOf(e)==0){return j.substring(e.length,j.length)}}return null},del:function(b){this.set(b,"",-1)}},tt_cm=(_cookie.get("tt_cm"))?_cookie.get("tt_cm"):0,doc_title=document.title;for(var i in cm_config_defaults){cm_config_defaults[i]=(typeof(cm_config[i])=="undefined")?cm_config_defaults[i]:cm_config[i]}function showRecentComments(json){var entry=json.feed.entry,total=parseInt(json.feed.openSearch$totalResults.$t,10),skeleton="",oldCount=tt_cm,co=cm_config_defaults;var totalComments=total-oldCount>50?'50+':total-oldCount;if(oldCount<total){if(cm_config.alert===true){alert((total-oldCount)+cm_config.new_cm)}else{if(cm_config.alert===false){document.title="("+(total-oldCount)+cm_config.new_cm+") "+document.title}else{cm_config.alert((total-oldCount),cm_config.new_cm)}}}skeleton='<ul class="cm-outer">';for(var i=0;i<entry.length;i++){for(var j=0;j<entry[i].link.length;j++){if(entry[i].link[j].rel=="alternate"){link=entry[i].link[j].href;break}}var dash=link.lastIndexOf("/")+1,dot=link.lastIndexOf("."),title=link.split("-").join(" ").substring(dash,dot)+"&hellip;";author=entry[i].author[0],name=author.name.$t,avatar=author.gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+co.t_w+"$1").replace(/http\:\/\/www.google.com\/url\?source\=imglanding(.*?)q\=/i,"").replace(/\.(jpg|jpeg|png|bmp|gif)(.*?)$/i,".$1"),profile=(author.uri)?author.uri.$t:"#nope",u=entry[i].id.$t.replace(/^.*?blog\-([0-9]+).*?post\-([0-9]+)/,"http://www.blogger.com/delete-comment.g?blogID=$1&postID=$2"),r=entry[i]["thr$in-reply-to"].source.split("default/")[1],d=entry[i].id.$t.replace(/^.*?blog\-([0-9]+).*?post\-([0-9]+)/,"http://www.blogger.com/comment-iframe.g?blogID=$1&postID="+r+"&parentID=$2"),date=entry[i].gd$extendedProperty[1].value,content=("content"in entry[i])?entry[i].content.$t.replace(/<i rel="pre">(.*?)<\/i>/ig,"<pre>$1</pre>").replace(/<i rel="code">(.*?)<\/i>/ig,"<code>$1</code>").replace(/<i rel="linku">(.*?)<\/i>/ig,"<a class='allow' href='$1'>\{link\}</a>").replace(/:D/ig,"<img src='http://4.bp.blogspot.com/-J7s7flyAolE/U6tMYuCWJjI/AAAAAAAAD-g/ktLPs0sF0zM/s1600/smile.png' alt='' class='cm-smiley'/>").replace(/:\)/ig,"<img src='http://4.bp.blogspot.com/-J7s7flyAolE/U6tMYuCWJjI/AAAAAAAAD-g/ktLPs0sF0zM/s1600/smile.png' alt='smile' class='cm-smiley'/>"):"",nt=(co.new_tab_link)?' target="_blank"':"";content=(content.length>co.summary)?content.substring(0,co.summary)+"&hellip;":content;skeleton+="<li>";skeleton+='<div class="cm-header"><a href="'+profile+'" title="'+name+'"'+nt+'><img alt="Loading..." style="width : '+co.t_w+"px;height:"+co.t_h+'px;" src="'+avatar+'"></a><span class="author"><a href="'+profile+'" rel="nofollow">'+name+'</a> في <a href="'+link+'" title="'+title+'"'+nt+" rel=>"+title+"</a></div></span>";skeleton+='<div class="cm-content">';skeleton+='<span class="cm-text">'+content+"</span>";skeleton+='<div class="cm-footer">'+date+' <a href="'+d+'" onclick="window.open(this.href,&#39;_cf&#39;,&#39;scrollbars=1,width=470,height=250,right=355,top=135&#39;);return false;" title="أدخل رد">رد</a> <a href="'+u+'"  title="حذف التعليق" target="_blank">حذف</a></span> </span>';skeleton+="</div></li>"}skeleton+="</ul>";document.getElementById(co.ct_id).innerHTML=skeleton;_cookie.set("tt_cm",total,7000);tt_cm=total}(function(){var head=document.getElementsByTagName("head")[0],script=document.createElement("script"),co=cm_config_defaults;script.type="text/javascript";script.id="cm-feed-script";script.src=co.home_page+"/feeds/comments/default?alt=json-in-script&redirect=false&max-results="+co.max_result+"&callback=showRecentComments";head.appendChild(script);setInterval(function(){var newScript=document.createElement("script");newScript.type="text/javascript";newScript.id="cm-feed-script";newScript.src=co.home_page+"/feeds/comments/default?alt=json-in-script&redirect=false&max-results="+co.max_result+"&callback=showRecentComments";var oldScript=document.getElementById("cm-feed-script");oldScript.parentNode.removeChild(oldScript);head.appendChild(newScript)},co.interval)})();
    //]]>
    </script>
 

- إبحث بالكود عن رابط مدونتنا : http://www.homeblog7.blogspot.com/  مكرر مرتين واستبدله برابط مدونتك .