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

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

يوجد الآن مشاهدة التعليقات : 28

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

اشارككم اضافة خاصة بأحدث التعليقات بجرس مقتبسة من جوجل بلس الخاصة بالإشعارات ، الإضافة تتيح عرض اخر التعليقات بشكل احترافي ويسهل الولوج لمكان التعليق ايضا يحتوي على إشعار بوصول تعليق كظهور رقم في الجرس مع ظهوره في المتصفح حتى إن لم تكن الصفحة محدثة فسيظهر تلقائيا مع إمكانية ظهور الإبتسامات في حال وجودها + كود .. بما انكم علمتم الأن كيف عمل الأداة من خلال تجربتكم لها بمدونتنا سأضع أيضا معاينة خاصة لما ستحصلون عليه ندخل للمعاينة والشرح
شرح طريقة التركيب
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أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 28 تعليقًا:

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

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

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

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

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

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

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

    ردحذف
    الردود
    1. هل كان لديك نفس المشكل في القالب السابق ؟

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

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

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

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

      حذف
  5. اخي ممكن ايميلك

    ردحذف
  6. اخي كيف اعمل شعار احترافي مثلك ممكن تعلمنا

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

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

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

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

      حذف
  9. شكرا لك اخي لاكن عندي سؤال هل يمكنني ان اجعلها اشعار لتعليقات disqusوليس لتعليقات جوجل

    ردحذف
  10. ستشتغل كما ترى بالمعاينة

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

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

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

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

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

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

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم