اضافة اخر المعلقين الاكثر احترافية لمدونات بلوجر

اضافة اخر المعلقين الاكثر احترافية لمدونات بلوجر

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

HTML/JavaScript

الصق الكود فى المربع

<style>
#cnmucount {
margin: -4px -49px;
z-index: 9997;
position: absolute;
}
#show-total {
position: absolute;
cursor: pointer;
display: block;
z-index: 9999;
}
.total-show {
background-color: #0098d9;
border-radius: 4px;
color: white;
display: block;
font-size: 11px;
font-weight: bold;
height: 15px;
margin: -7px -16px 0 0;
text-align: center;
width: 34px;
z-index: 9999;
}
#bsnotif {
background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #bbb;
border-radius: 0 5px 5px 0;
cursor: pointer;
height: 24px;
padding: 3px 4px;
width: 24px;
z-index: 9997;
position: absolute;
}
#bsnotif2 {
background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #0098d9;
border-radius: 0 5px 5px 0;
cursor: pointer;
height: 24px;
padding: 3px 4px;
width: 24px;
z-index: 9996;
position: absolute;
}
#bs-wrapper {
width:352px;
position:fixed;
top:30px;
z-index:9999;
background-color:#fff;
padding:0 13px 0 0;
color:#666;
left:-369px;
font-family: Arial, Sans-serif;
border:4px solid #0098D9;
border-left:none;
transition:0.5s ease;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#cnmucomment-container {
color:#666;
font-family: Arial, Sans-serif;
}
#cnmucomment-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
    background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #444;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.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-bottom:1px dashed #777;
margin-left: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:#555;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 60px 8px 0;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#0098D9;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#555;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-right:60px}
.cm-outer img {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyl-BxEDT1gydNDpRQLbtXA2LKtlT-nJsRgsN7fHZ6odOYArC9dmwyOdqbthWXKCVB2ak-iJjpHKX5nIjeaFKlfB54epWgL6P29nF3pdhyphenhyphenRJmNxOzqHyw_0A8UjripTc7AFmVhrAvF01nc/s1600/BS+anon.png") no-repeat scroll 50% 50% #ddd;
border-radius: 100px;
box-shadow: 0 0 2px #222;
display: block;
float: right;
overflow: hidden;
padding: 2px;
position: absolute;
right: 0;
top: 10px;
}
.BS-Notif-footer {margin-top:7px;}
.BS-Notif-footer a {color:#04BDFA;text-decoration:none;}
.BS-Notif-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfcfAkzSZOtVj6Fk5FUC085aQ-6xdi05eQBlq9EE2HWB3ylaq9wN7qpDce2qOneWLRb9dDQLnkP8D2hCB3YS6BAJVO5VNNLRn5n5l0lJ0JG4W2gii384MbI4ng2Vc_RCfNw6NrMSWo-IbT/s1600/BS+openid.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmYJXEXXWmFYrJ514jRrXe4T2vpKrYs0rSaXfMsCerP5fnxVPLBtws9ob4bvSp6ZTIvBQ3TFO6dTlmU4p5R6eyi31Z6vNjxLn0RRQkPUXtQ04Ji6_Z6QcsOWPif7yk7tTnRzrEUoXZZxt/s1600/BS+gravatar.png);
}
.bs-ground{
        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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwrADPHW6Wz6DR3QG0X6SOEhEMOQ255oZHvenwWU92jYbA6SozdLpu1kSiLVvL-_B8rWeixBOjaHASGktR_iptY7emh4ZYQW7SBV8zFCT_wNZCg_OjVpXWlofH80AjJkB4iUTtw5Z8DYq-/s1600/bs+loading+dot.gif') no-repeat 50% 50%;
}
.sticky {
    position: fixed;
    top: 80px;
    z-index: 100;
    border-top: 0;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<div class='bs-ground' id='bg'></div>
<div id='bs-wrapper'>
<div id="cnmucount">
<div id='bsnotif' title='Notification'></div>
<div id='show-total'></div>
<div id='bsnotif2' title='Notification'></div>
</div>
<div class='flexcroll' id='cm-scroll'>
<div id='cnmucomment-container'></div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://q4q4.blogspot.com.eg/",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "cnmucomment-container",
    new_cm: " تعليقات جديدة ",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#bsnotif').click(function(){$("#bs-wrapper").css({left: "0px"});$("#bg, #bsnotif2").show();$("#bsnotif").hide();});$('#bsnotif2').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});$('#bg').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});document.getElementById('bsnotif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#bs-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 = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
//]]>
</script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/comment-Notification.js' type='text/javascript'></script>