إضافة عدَّاد تنبيهات لمدونات بلوجر محاكاة لتنبيهات جوجل بلس

عدد مشاهدات الموضوع:

حصرياُ لمدونتي sweup.com ومدونة أبواياد  في العالم العربي اضافة جرس اخر التعليقات لمدونتك المقتبس من قوقل بلس حيث ان هذه الاضافة تضيف مزيد من الاحترافية لقالب مدونتك كما تقلل من معدل الارتداد وتدفع الزائر للتنقل داخل تدويناتك.
الاضافة هي من تصميم مجموعة DTE وتطوير mantapweb وتعريب sweup.com 

لتركيب الاضافة 

1-لحفظ مكتبة جكويري داخل قالب مدونتك ابحث عن الوسم </head> واضف الكود التالي فوقه مباشرة وان كان مضافا مسبقا بأى إضافة سابقة لا تقم بإضافته مرة أخرى.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
 
2-ابحث عن الوسم ]]></b:skin وأضف الكود التالي فوقه مباشرة

 #show-total {
position:fixed;
top:1px; /* يمكنك تغير ارتفاع الموضع الخاص بالجرس من هنا */
right:280px; /* يمكنك تحريك الجرس يمين او يسار من هنا */
z-index:9999; 
cursor:pointer;
float:right;
}
.total-show {
display: block;
position: fixed;
top:50px;
right:20px;
background-color:#FF0000; /*warna total komentar*/
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url('http://3.bp.blogspot.com/-a2UjA9yDFlY/UAeOZy2Tx0I/AAAAAAAAEVU/inHT48OecsQ/s1600/comment.png');
display:block;
position:fixed;
top:40px;
 right:10px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url('https://cdn1.iconfinder.com/data/icons/blue-bits-basic-and-bonus/32/008.png');
display:block;
position:fixed;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:310px;
position:fixed;
top:48px;
right:-381px;
z-index:9999;
background-color:#192028;
padding:15px 15px 25px 13px;
color:#666;
font-family: DroidKufi-blod;
border-top:8px solid #ff6c60;
transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
right: 303px;
border:8px solid transparent;
border-color:transparent transparent #444;
}
#cm-scroll {
width: 100%;
height: 600px;
overflow: auto;
position: relative;
}
#comments-container {
color:#666;
font-family: DroidKufi-blod;
}
#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: 5px;
background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #599b29;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:left;
}
.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 #333;
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 60px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#599b29;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/s1600/anon5.png') 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:#599b29;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;
}
.sticky {
position:fixed;
top:42px;/* jarak dari atas*/
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:"\201C""\201D""\2018""\2019"
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556}
.reblog {
text-align: left;
color: #fff;
font-weight: bold;
font-size: 14px;
text-shadow: 1px 1px 0 #75a43b;
padding: 5px 10px;
display: inline;
border: 1px solid rgba(254, 101, 0, 0.55);
background: #7cc237;
border-radius: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(#afd95b), to(#7cc237));
background: -webkit-linear-gradient(top,rgba(254, 101, 0, 0.55),rgba(254, 101, 0, 0.55));
background: -moz-linear-gradient(top, #afd95b, #7cc237);
background: -ms-linear-gradient(top, #afd95b, #7cc237);
background: -o-linear-gradient(top, #afd95b, #7cc237);
box-shadow: inset 0 1px 0 #d0e8a0;
-webkit-box-shadow: inset 0 1px 0 #d0e8a0;
-moz-box-shadow: inset 0 1px 0 #d0e8a0;
-o-box-shadow: inset 0 1px 0 #d0e8a0;
} 
3-ابحث عن الوسم </body> والصق الكود التالي فوقه مباشرة

 <div id='notif' title='اخر التعليقات'/>
<div id='notif2' title='اخر التعليقات'/>

<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' 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://www.sweup.com/",
    max_result:20,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-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;
    }
};
$('#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 = $('#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();});});
setTimeout(function() {
        $('.jsfiddle-demo').each(function() {
        $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
    });
}, 5000);
//]]>
</script>
<script src='https://sweup--notification-comments-google.googlecode.com/svn/trunk/sweup.js' type='text/javascript'/> 

قم بتغير رابط مدونتي http://www.sweup.com برابط مدونتك مع الملاحظة ان الاشعارات لن تعمل الا اذا كان هناك 20 تعليق في مدونتك فأكثر واذا أرد ت تغير القيمة الى قيمة اقل قم بتغير قيم max_result:20
قم بحفظ قالب مدونتك ومبارك عليك الاضافة واي مشاكل يمكنك وضع تعليق أسفل التدوينة
Resource: http://mantapweb.blogspot.com/2013/12/mempelajari-lebih-lanjut-notifikasi.html

هناك تعليق واحد:

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية