اضافة جرس اخر التعليقات

ح

صرياً في العالم العربي والمهتمين بالإضافات الخاصة بقوالب بلوجر اشارككم اضافة خاصة بأحدث التعليقات بجرس مقتبسة من
جوجل بلس الخاصة بالإشعارات ، الإضافة تتيح عرض اخر التعليقات بشكل احترافي ويسهل اللولوج  لمكان التعليق ايضا يحتوي على إشعار بوصول تعليق كظهور رقم في الجرس مع ظهوره في المتصفح حتى إن لم تكن الصفحة محدثة فسيظهر تلقائيا مع إمكانية ظهور الإبتسامات في حال وجودها + كود .. بما انكم علمتم الأن كيف عمل الأداة من خلال تجربتكم لها بمدونتنا سأضع أيضا معاينة خاصة لما ستحصلون عليه ندخل للمعاينة والشرح

معاينة مباشرة

شرح طريقة تركيب الإضافة

1. توجه للقالب >> تحرير

2. ابحث بإستعمال Ctrl+F عن <head/> :

3. ضع الكود التالي فوقه 

<style>
/* Css Comments NotiFication Hm */
#show-total {
  position:fixed;top:10px;right:107px;z-index:99;cursor:pointer;
float:left;}

.total-show {background-color:#2091E9;color:#fff;padding:1px 8px;font-size:12px;
border-radius:1px;font-weight:Bold;font-family: Electrolize,ge_ss_threeregular;}
 
#notif { cursor: pointer }
 
 #notif:before {
  content:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJCnSzo3FU4RNKoq4UPTc6t6uGkpIl8_U_eLr7b1Hr0Y-ZMMTYZ3iY6oi7Lv04Gop5VSGJn-qETSvT2NlERh4wc5dELJGpZsPJrbnWbJQFQWMatbvMMI_Qv3s_iObPVrYWQCl6ELRTe-M/s1600/comm-ar1web.png&#39;);
  padding:5px 6px 6px 6px;
  border-radius: 3px;
  display: block;
  position: fixed;
  top: 19px;
  right: 110px;
  opacity: .5;
  z-index: 999;
  transition: all .4s ease-out }
 
 #notif:hover:before { opacity: 1 }
 
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrQbrxOdVJFyKJ6AbbSTdYLgLFCYWzUYrPcNnzIhQw-h2M0WGUOdr0dmLaWu39mumj57Xv3i7D2Uhcwln5gsmGsqmqEjA34rjNgP5HXZXYMx6uB7LajN0UFRA_Q3wZ3Ba_rJvA7jAgYcI/s320/comm-ar1web.png&#39;);
display:block;
padding:5px 6px 6px 6px;
position:fixed;
top:19px;
right:110px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
 
 #notif2:hover:before { opacity: 1 }
 
#cm-wrapper {
 width: 300px;
 position: fixed;
 top: 56px;
 left: -381px;
 z-index: 999;
 background-color: #192028;
 padding:15px 15px 25px 13px;
 color: #666;
 font-family: Electrolize,ge_ss_threeregular;
 border-top: 8px solid #F3A856;
 transition: .5s ease }
 
 #cm-wrapper:before {
  content: &quot;&quot;;
  width: 0;
  height: 0;
  position: absolute;
  top: -24px;
  left: 193px;
  border: 8px solid transparent;
  border-color: transparent transparent #F3A856 }
 
#scroll {
 width: 293px;
 height: 567px;
 overflow: hidden;
 z-index: 999999 }
 
.cm-outer {
 margin: 0 auto;
 padding: 0;
 font-size: 11px;
 text-align: right;
 height: 567px;
 overflow: auto }
 
pre,.cm-outer pre,i[rel=&quot;pre&quot;] {
 padding: .8em 1em;
 margin: .5em 0;
 height: 50px;
 background-color: #2f3741;
 border-right: 4px solid #0094fc;
 font-size: 13px;
 color: #fff;
 font-family: Electrolize,ge_ss_threeregular;
 line-height: 1.4em;
 white-space: pre;
 word-wrap: normal;
 white-space: pre;
 overflow: auto;
 border: 1px solid #222 }
 
.post pre {
 height: 200px;
 border-right: 5px solid #0094fc; }
 
.post code {
 color: #a9f0ff;
 background: #1c1e2e;
 font-family: Electrolize,ge_ss_threeregular;
 line-height: 14px;
 font-size: 14px;
 padding: 3px 5px;
 margin: 5px;
 border: 1px solid #000;
 border-radius: 2px;
 border-right: 5px solid #0320f7 }
 
.cm-outer code {
 color: #fdffd3;
 font-size: 10px;
 font-style: italic }
 
.cm-text .cm-image {
 width: 160px;
 margin:0 0 40px 10px;
 position: relative;
 border-radius: 0;
 border: 4px solid #000 }
 
#comment_block .cm-image {
 cursor: pointer;
 display: block;
 max-width: 400px;
 margin: 10px auto;
 box-shadow: 0 0 1px #000 }
 
.cm-outer li {
 padding: 7px 10px 12px;
 list-style: none;
 clear: both;
 position: relative;
 border-top: 1px solid #28313b;
 border-bottom: 1px solid #111;
 margin-left: 10px }
 
 .cm-outer li.selected { border-right: 4px solid #fffe8c }
 
 .cm-outer li:first-child { border-top: 0 }
 
 .cm-outer li:last-child { border-bottom: 0 }
 
.cm-text { color: #fff }
 
.cm-outer { margin:0 0 5px;line-height: 14px }
 
.cm-header {
 margin:4px 80px 20px 0;
 font-size: 12px;
 font-weight: normal;
 !important }
 
 .cm-header a {
  color: #c1c1ff;
  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-right: 80px }
 
.cm-outer img {
 display: block;
 float: right;
 background:#8fa2cb url(&#39;http: //img1.blogblog.com/img/anon36.png&#39;) no-repeat 50% 50%;
 overflow: hidden;
 position: absolute;
 top: 12px;
 right: 0;
 border: 3px solid #3d464f }
 
.cm-footer { margin-top:30px;font-size: 10px }
 
 .cm-footer a { color:#ccc;text-decoration: none }
 
  .cm-footer a:hover { color:#c1c1ff;text-decoration: none }
 
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] { content:url(http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_I-YiuG1V8t595uLDbJz1XH1M3s5uoB4qIqCpS9D7OfgVaNGutHR_bdZW2EShTPRruLJWSCQIGski13bQsnW2ENunAH4ZGXhviqI93g-GeWzol73n1q0_5AsrmtvfNiPMYyWaK_rzwFw/s80-c/gravatar.png) }
 
.bg_hitam {
 display: none;
 position: absolute;
 position: fixed;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
 background-color: #000;
 z-index: 99;
 opacity: .7 }
 
img.cm-smiley {
 float: none;
 position: relative;
 display: inline-block;
 width: 12px !important;
 height: 12px !important;
 top: 2px;
 border: 0;
 border-radius: 2px;
 background: 0 }

.quickedit{
display:none;
}
</style>

المحدد باللون الأصفر خاص بصور الجرس 

4. ابحث عن <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.ar1web.com/",
    max_result: 18,
    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://ar1web-com.googlecode.com/svn/trunk/comm-NotiF.js' type='text/javascript'/>

5. غير ar1web.com برابط مدونتك

6. احفظ العمل ومبروك عليك الإضافة 

ملاحظة الجرس يثبت تلقائيا في الأعلى .. إذا واجهتكم أي مشاكل أو تريدون طرح استفسار فتعليقاتكم مرحب بها اتمنى أن تنال إعجابكم الإضافة