[بلوجر] اضافة جرس التنبيهات باخر التعليقات عائم 2015

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

بعد ان تلقيت الكثير من الطلبات على صفحة المطور .نت على الفيس بوك فالكثير يبحث عن هذه الاادة والاضافة , فهي اكثر من رائعة تتميز بالجمال والاحترافية في عرض اخر التعليقات , جرس التنبيهات جوجل بلس لمدونات البلوجر 2014 . فهي تعطيك ايضا رقما بعدد التعليقات الجديدة التي لم تشاهدها , ويمكنك الذهاب لمكان التعليق , والكثير الكثير من الميزات اترك تستكشفها بنفسك بدون اطالة اترككم مع التركيب


في البداية قم بالذهاب الى لوحة تحكم بلوجر ثم اذهب قالب ثم تحرير html
قم بالبحث عن </body>
وضع فوقة / قبلة الكود الاتي يمكنك تحميل الكود من هنا 

<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://arabic3professional.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://arabic3professional.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>

بعد ذلك قم بالبحث }]]></b:skin>

وضع فوقها الكود الاتي يمكنك تحميل الكود من هنا

#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>

ثم قم بالحفظ 

لاتنسى ان تقوم بتغير رابط مدونتي برابط مدونتك , اتمنى ان تكون الاضافة قد نالت اعجابك , لاتحرمنا من التعليقات التشجيعية لنقدم لكم المزيد من الاضافات , لاي استفسار لاتتردد في ترك تعليق