<style>
#warch-mocount {
  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 #F51D4F;
  border-left:none;
  transition:0.5s ease;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#warch-mocomment-container {
  color:#666;
  font-family: Arial, Sans-serif;
}
#warch-mocomment-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/AVvXsEhW250zXD3Hgz0wJ8CzvPf598CZq_Yn5XLGgIxSoJ90GhIpVdnIWOobvZO_pi4xR4d-mnKBJPFoBlytzyaDYdFU0lph52H9HZ6i_kqyf7fe_qcOTYOWg244rYfjevdKyVFTFXeWI0HLN3Yv/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/AVvXsEj-KPf55X2ScPKuvAWw7IHPz_I3ffly2lxhITaqiqRoPMJizybm42AYKRPQpltJFCJ7lzMSdyDPq3lGK5S06_oZn5mPaeXuoXTwdUdXl5uo1GfbV_zvx9VqfjUIsklkaSe4OBo5z1t3KdsS/s1600/BS+openid.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzhzbp1Be7lypDUEt3fEpcx39F1JJPQo6872PzwcDYWapiH9dihbro8akeLFn9o6Oflb4g9GXJmm_Pijs3UFdvibQ5kxoK8AX4NUsNOy9jT1HIKq1WibZXSEJTmBjI76ORGDWcVBpiizr/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/AVvXsEhDjWe4XFIf9ch7DH1-1mAKDwk_Y5flEVwBuceyAO4R382Ws5Bx3oAVz6hVSeuR9o6lN01hZzFY0SKNWbP5isPnMnfBBNmpKRxTNqAib0SEo8v_SoC4L9tx1H7tvF3Fo4a1iMmWmMaV4L-e/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="warch-mocount">
<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='warch-mocomment-container'></div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://warch-mo.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "warch-mocomment-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://dl.dropboxusercontent.com/s/jsomeh6jkz5gyvv/warch-mo.js' type='text/javascript'></script>