اضافة اخر التعليقات بشكل جديد وتقنية جديده لبلوجر
إضافة جديدة تتعلق بآخرالتعليقات لكن هذه المرة مع ميزة جديدة وهي الإشعارات الإضافة تظهر إشعارات مباشرة مع نشر اى تعليق جديد بشكل تلقائي وهو مفيد جداً للمدونات التي تكون التعليقات جزء أساسي من نشاطها وهي أيضاً جاذبة للقارئ لكي يتصفح التعليقات الجديد مما يزيد من الزيارات وبإذن الله تنال إعجابكم يمكنك أولا رؤية المعاينة الحية من الرابط التالي
طـ،ــــريقة التركيب بسيطة جدا
تركب الإضافة في آداة 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/AVvXsEgE9vpqnQJweoaimdPhHarQvqhywg6OspDgKv3kqjzZuaoslWfHACA4KUVJ46otZtZZw0HJTLdEyRrB_Pn9ifwp0wJgmNwcOvTUZxfoipk9tmNeDXWewH8MsnPGme5EZPLcX9y9OISM5U63/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/AVvXsEiEXQt_KZBCN53E7PKcq6WZHf0FaVllNeC2bf_qZiDvjvbsU9bwlQU2HR1AXsHweA9tN3ZSBeKtk9ssP8hA-wKcv8oulunScbSLs4-dPn1gPxXQSZDc_UFJZQRaDf3fMCdBPpfWnA5RNdTr/s1600/BS+openid.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZCuHDsz29v02tv0htOiQbzX5g26qiBZOEV_DLJu2dUHk9uT3-PbjZTMnJXZqv6f1eEWrcKE_1fSNuA3OggSlS1yXVKQQKCjuFphESumCXSKuKhZ-PdxxUhHSBYE6NjS5JsAMJLA4rPYo/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/AVvXsEjCqCAOKm_EciGnBqiSq8YiKbexGqE3g-eYaZPxT0YW2mlQzfItmuQt2mIEwlpriNw4wmktFrBnGU3NuV50c4POWADlsVBfFYPJmb5utAtHXnkJipXLuNTF4O5Ht7fUGNPDmBmOV3rXwdHh/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://www.alinael.com",
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>
الان قم بتغيير http://www.alinael.com الى رابط مدونتك
وتستطيع تغير لون الادة فقط قم بالبحث عن #0098D9 وقم بتغيره للون الذي يناسبك
اما هذا الكود
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
قم بازالته اذا كنت قد ركبت مكتبة جي كويري
انتهى الموضوع منقول من مدونة كن مدون للفائدة
