حصريا أداة آخر التعليقات بشكل متميز "شبيهة بجوجل بليس g+"

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

معاينة مباشرة

كما قلت بعد تجريب هذه الإضافة ستبهرك حتما ، كما انها سهلة التركيب على البلوجر اضافة الى انها اضافة احترافية بكل المعني .

طريقة الإضافة الى البلوجر

1. نتوجه الى المدونة ، قالب ، تحرير HTML
2. نبحث عن الكود

اقتباس :: </head>

3. ثم نضيف الكود الثالي فوقه

اقتباس :: <link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' id='font-awesome-css' media='all' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<style>
/* CSS Comment Notification */
/* hukmat.blogspot.com */
#cm-scroll_mcontentwrapper,.mcontentwrapper{left: -1px;}
#show-total {
position:fixed;
top:8px;
right:288px;
z-index:999;
cursor:pointer;
    float:right;
}
.total-show {
    background-color:#f1c40f;color:white;padding:2px 6px;font-size:11px;border-radius:4px;font-weight:normal;
}
#notif {cursor:pointer;}
#notif:before {
content: url('http://2.bp.blogspot.com/-wNOnRbS7rfM/UoZYxuLVMkI/AAAAAAAAGFI/CEqcJwQXOfc/s1600/lonceng2.png');
border:1px solid #b6b5b5;
padding:5px 6px 0 6px;
border-radius:3px;
display:block;
position:fixed;
top:15px;
right:298px;
opacity:.5;
z-index:999;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: "\f00d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: 20px;
color: #e25734;
display: block;
position: fixed;
top: 23px;
right: 306px;
opacity: 1;
z-index: 97;
transition: all 0.3s ease-in-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:300px;
position:fixed;
top:61px;
right:-381px;
z-index:999;
background-color:#192028;
padding:15px 13px 25px 15px;
color:#666;
font-family: Arial, Sans-serif;
border-top:8px solid #b71427;
transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:6px;
border:8px solid transparent;
border-color:transparent transparent #b71427;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#comments-container {
color:#666;
font-family: oswald, droidkufi-bold;
}

#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 7px;
    background-color: #111;border-radius:3px;
}
.vscrollerbar {
width: 7px;
background-color: #444;border-radius:3px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:3px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:3px;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:right;
}
.cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-top:1px solid #28313b;
border-bottom:1px solid #111;
margin-right:10px;
}
.cm-outer code {
color:#a6a658;
    font-size:11px;
}

.cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
.cm-outer li:first-child {
border-top:none;
}
.cm-outer li:last-child {
border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 50px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#168980;text-decoration:none;font-size:12px;font-weight:normal}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:50px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png&#39 no-repeat 50% 50%;
overflow:hidden;
border-radius:100px;
position:absolute;
top:10px;
left:0;
border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#168980;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley {
float:none;
position:relative;
display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}

.myframe {
display:none;
width:100%;
height:265px;
margin-bottom:5px;
border-radius:5px;
}
.jsfiddle-demo {
display:block;
width:100%;
height:250px;
border:1px solid #bbb;
background:transparent url('http://4.bp.blogspot.com/-TIf6ayZW9R4/UkxBo2beCQI/AAAAAAAAFsA/XR2DBWD3YG4/s1600/kangis-loader.gif&#39 no-repeat 50% 50%;
}
.sticky {
    position: fixed;
    top: 80px;
    z-index: 100;
    border-top: 0;
}
      /*-----Font Face-----*/
      /* latin-ext */
      @font-face {
        font-family: 'Oswald';
        font-style: normal;
        font-weight: 400;
        src: local('Oswald Regular'), local('Oswald-Regular'), url(http://fonts.gstatic.com/s/oswald/v9/RqRF4AQrkUh3ft98NHH2mA.woff2) format('woff2'), url(http://fonts.gstatic.com/s/oswald/v9/PyqsDANUgLi2UsdO-d4iZQ.woff) format('woff');
        unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
      }
      /* latin */
      @font-face {
        font-family: 'Oswald';
        font-style: normal;
        font-weight: 400;
        src: local('Oswald Regular'), local('Oswald-Regular'), url(http://fonts.gstatic.com/s/oswald/v9/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2'), url(http://fonts.gstatic.com/s/oswald/v9/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
      }
@font-face {
        font-family: 'DroidKufi-Bold';
        font-style: normal;
        font-weight: 700;
        src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
        src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
        url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('x-woff2'),
        url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
        url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
      }
</style>

4. نبحث عن الكود الثالي

اقتباس :: </body>

5. و آخيرا نضيف الكود الثالي فوقه مباشرة

اقتباس :: <script src='https://aisuka-project.googlecode.com/svn/flexcroll.js' type='text/javascript'></script>
<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='scrollbar' 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://hukmat.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({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-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({right: "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://hukmat.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)+"…";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(//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)+"…":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> on <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,'_cf','scrollbars=1,width=470,height=250,left=355,top=135');return false;" title="Reply Comment">Reply</a> <a href="'+u+'" title="Delete Comment" target="_blank">Delete</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>

6. نقوم بالتغيير رابط مدونتي الى رابط مدونتك و نضغط حفظ
7. مبروك عليك الإضافة .

» أداة آخر التعليقات على البلوجر بشكل احترافي متناسق
» أداة التسميات بشكل جميل منقسمة إلى عمودين
» أداة المشاركات الشائعة بشكل جميل ومتطور
» أداة إتصل بنا في صفحة مستقلة بشكل إحترافي
» تسريع الأنترنت و تصفح المواقع بشكل ملحوظ مع أداة DNS GOOGLE