17‏/09‏/2014

اشارككم اضافة خاصة بأحدث التعليقات بجرس مقتبسة من جوجل بلس الخاصة بالإشعارات ، الإضافة تتيح عرض اخر التعليقات بشكل احترافي ويسهل الولوج لمكان التعليق ايضا يحتوي على إشعار بوصول تعليق كظهور رقم في الجرس مع ظهوره في المتصفح حتى إن لم تكن الصفحة محدثة فسيظهر تلقائيا مع إمكانية ظهور الإبتسامات في حال وجودها + كود .. بما انكم علمتم الأن كيف عمل الأداة من خلال تجربتكم لها بمدونتنا سأضع أيضا معاينة خاصة لما ستحصلون عليه ندخل للمعاينة والشرح
شرح طريقة التركيب
1. توجه للقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> وضع الكود التالي فوقه
<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;http://2.bp.blogspot.com/-1fwDSQUDLGg/VBl6-2mFChI/AAAAAAAAFy0/5vRgrNxXtlo/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;http://3.bp.blogspot.com/-NOQloZWyHEA/VAx0E2YqnhI/AAAAAAAAFkQ/EbN2lUg1ELU/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: //2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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>
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.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'/>
* غير ar1web.com برابط مدونتك
4. احفظ العمل ومبروك عليك الإضافة
اشارككم اضافة خاصة بأحدث التعليقات بجرس مقتبسة من جوجل بلس الخاصة بالإشعارات ، الإضافة تتيح عرض اخر التعليقات بشكل احترافي ويسهل الولوج لمكان التعليق ايضا يحتوي على إشعار بوصول تعليق كظهور رقم في الجرس مع ظهوره في المتصفح حتى إن لم تكن الصفحة محدثة فسيظهر تلقائيا مع إمكانية ظهور الإبتسامات في حال وجودها + كود .. بما انكم علمتم الأن كيف عمل الأداة من خلال تجربتكم لها بمدونتنا سأضع أيضا معاينة خاصة لما ستحصلون عليه ندخل للمعاينة والشرح
شرح طريقة التركيب
1. توجه للقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> وضع الكود التالي فوقه
<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;http://2.bp.blogspot.com/-1fwDSQUDLGg/VBl6-2mFChI/AAAAAAAAFy0/5vRgrNxXtlo/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;http://3.bp.blogspot.com/-NOQloZWyHEA/VAx0E2YqnhI/AAAAAAAAFkQ/EbN2lUg1ELU/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: //2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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>
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.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'/>
* غير ar1web.com برابط مدونتك
4. احفظ العمل ومبروك عليك الإضافة
28 Blogger تعليقات
Disqus
28 التعليقات
المشرف
avatar

ألف شكر يا غالي لتلبية الطلب
وجزاك الله خيراً

المشرف
avatar

على واجب :)
جزانا وإياك بالرحمة والمغفرة

المشرف
avatar

بارك الله فيك يا اخي حسام
وشكرا على الاضافة
هل ممكن يا أخي ان اغير مكان الجرس لانه جاء فوق زر البحث واسف على الازعاج

المشرف
avatar

نعم اترك رابط مدونتك لمساعدتك في حل المشكل

المشرف
avatar

شكرا اخي تفضل مدونتي المتواضعة هه
www.pro9web.blogspot.com

المشرف
avatar

رغم انه خارج عن الاضافة اخي عندي مشكلة في تعليقات البلوجر عنما يتم التعليق من الزوار لا يضهر التعليق

المشرف
avatar

هل كان لديك نفس المشكل في القالب السابق ؟

المشرف
avatar

1. ابحث عن : #notif:before أسفلها ستجد كلمة Right غير الرقم بجانبها لــ80px
2. ابحث عن : #notif2:before أسفلها ستجد كلمة Right غير الرقم بجانبها لــ80px

المشرف
avatar

نعم اخي واعتقدت انه بتغيير القالب ستحل المشكلة

المشرف
avatar

قم بالذهاب للإعدادات و من التعليقات إختر مضمن وتأكد عند كتابة موضوع في الجانب من خيارات تأكد من الإعدادات وأنك تسمح لرؤية التعليقات
غير هذا فليس لدي حل اخر لأن ليس مشكل القالب
موفق

المشرف
avatar

كل ما قلته هو موجود بالفعل وبالرغم من ذلك لا تضهر التعليقات

المشرف
avatar

إذا كنت تستعمل تعليقات ديسكس سابقا فتأكد من أنها محذوفة من التخطيط وأنك لم تضفها في القالب

المشرف
avatar
المشرف
avatar
المشرف
avatar

اخي كيف اعمل شعار احترافي مثلك ممكن تعلمنا

المشرف
avatar

توجد العديد من الدروس في اليوتوب ما عليك سوى البحث

المشرف
avatar

اخي مافي شيء لو تتعب من انجلنا والكل يستفاد من خبرتك

المشرف
avatar

شكرا اخي لمجهوداتك الرائعه..اخي ارجوك اريد قالب مدونك

المشرف
avatar

العفو
تفضل النسخة الأولى للقالب
http://www.ar1web.com/2014/09/tempalte-lycoris-for-blogger.html

المشرف
avatar

شكرا لك اخي لاكن عندي سؤال هل يمكنني ان اجعلها اشعار لتعليقات disqusوليس لتعليقات جوجل

المشرف
avatar

ستشتغل كما ترى بالمعاينة

المشرف
avatar

السلام عليكم اخى كنت اريد الكود الخاص بعرض التدوينات بهذا الشكل الموجود فى المدونة لكن بدون النبذة المختصرة اسفل الصورة http://ly-ar1web.blogspot.com

المشرف
avatar

أهلا للآسف ليس متوفر أخي، تلك ليست إضافة يمكن مشاركتها

المشرف
avatar

عندما اقوم بفتح التعليقات لااستطيع اغلاقها الا بعد اعادة تحيل الصفحة ثم ان تعليقاتي لاتظهر

المشرف
avatar

مشكور يا جميل على الاضافة ، ممكن اثبت الاضافة اي لا تتحرك مع التمرير

المشرف
avatar

ابحث في الكود الأول عن هذه الكلمات fixed وغيرها بـ relative

المشرف
avatar

مشكور يا جميل على الاضافة ، ممكن اثبت الاضافة اي لا تتحرك مع التمرير

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة