
إضافة جديدة تتعلق بآخرالتعليقات لكن هذه المرة مع ميزة جديدة وهي الإشعارات الإضافة تظهر إشعارات مباشرة مع نشر اى تعليق جديد بشكل تلقائي وهو مفيد جداً للمدونات التي تكون التعليقات جزء أساسي من نشاطها وهي أيضاً جاذبة للقارئ لكي يتصفح التعليقات الجديد مما يزيد من الزيارات وبإذن الله تنال إعجابكم يمكنك أولا رؤية المعاينة الحية من الرابط التالي
والآن مع التركيب : تركب الإضافة في آداة HTML/JavaScript
<style>أولا إستبدل هذا الرابط http://cnmu.blogspot.com برابط مدونتك
#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("http://4.bp.blogspot.com/-mo1J0h7bNss/UomkmGX3JnI/AAAAAAAAFKw/LOWcvur3AJI/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='http://1.bp.blogspot.com/-YIbzE9h6c1E/Uomj0AuXrnI/AAAAAAAAFKc/EqSSkKllzbo/s1600/BS+openid.gif'] {
content: url(http://2.bp.blogspot.com/-qmTXacYtxKU/Uomj91RBZnI/AAAAAAAAFKk/-j45gU0tQMQ/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('http://2.bp.blogspot.com/-bL-eL_VIl2A/UoHFt0i8-wI/AAAAAAAAFI8/vn7h5nIbz6A/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://cnmu.blogspot.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>
هذا #0098D9 هو اللون الخاص بالأداة عدله باللون المناسب لقالبك
الكود الاخضر يمكنك ازالته ان كان لديك مكتبة جي كويري في قالبك
تجربة موفقة تحياتي
اضافة رائعة شكرا :)
ردحذفأهلا بك أخي الكريم سررت مرورك =r
حذفاضافة رائعة شكرا لك وكل عام وانت خير بمناسبة اقتراب عيد الأضحى
ردحذفوأنت بخير أخي الغالي احمد وأسال الله ان يعيده علينا وعليك وعلى الأمة الإسلامية بالخير واليمن والبركات =r
حذفشكرا لك اخي عمرو موضوع رائع و اضافة اكثر من رائعة =r
ردحذفربنا يعزك اخي منير نورت الموضوع يا غالي
حذفأخي العزيز أنأ في بداية هذا الأختصاص .. وأريد مساعدتك في تحويل PSD إلى HTML هل من مجيب ؟
ردحذفانا رددت فقط احتراماً لك اخي الكريم لكن انا لا أقدم هذا النوع من الخدمات عبر المدونة وهي خدمات المساعدة الخاصة
حذفلان كثيرين يطلبونها ونا لا يوجد لدي وقت لتنفيذها ولا استطيع تنفيذها لشخص وآخر لا
مع تمنياتي لك بالتوفيق