شرح تركيب اضافة اخر التعليقات منزلقة

  شرح لتركيب اضافة اخر التعليقات منزلقة

شكل الاضافة بعد التركيب

شرح التركيب

 <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;\f086&quot;;font-family:FontAwesome;font-style:normal;

font-weight:normal;text-decoration:inherit;font-size:28px;color:#ff8f00;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 : 370px;position :fixed;top:50px;left:-381px;z-index:9999;

background-color:#fff;padding:15px 15px 25px 13px;color:#444;border-top:6px solid #ff9a36;font-size:10px;transition:all 0.2s ease-in-out;}

#cm-wrapper:before {content:&quot;&quot;;width : 0;height:0;position :absolute;top:-30px;

left:296px;border:12px solid transparent;border-color:transparent transparent #ff9a36;}

#cm-scroll {width : 100%;height:1000px;max-height:100%;overflow:auto;position :relative;}

#comments-container {font-size:13px;color:#444;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:13px;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; border-bottom: 1px solid #00000014;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: #626262;font-size: 16px;}

.cm-outer {margin:0 0 5px}

.cm-header {margin: 5px 60px 14px 0;padding: 0px 0px 4px;font-size: 15px;font-weight: normal!important;border-bottom: 1px solid #02020214;}

.cm-header a {color:#666;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: #fff;font-size: 12px;text-decoration: none;padding: 2px 11px;background: #fb9941;border-radius: 21px;}

.cm-footer a:hover {color: #fff;text-decoration: none;background: #ff6000;}

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> 

  

 <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: "https://widgate-test.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:"https://widgate-test.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+'<br /> <br /><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>

و اذا لم تظهر الايقونة الخاصة بالاضافة يجب ان تضع مكتبة الايقونات أسفل <head