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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

• معاينة

شرح طريقة التركيب
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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHD_sRmAbLJe96pH-BSpgUxM4zqTrgTmRkwztuVlM2O3eb-7LHBrkZWXHeVTpOZaXXDEDt0KJKolsVKNBl09k_AM1cc0e1dtlN6BpuCgnafiQDJktZAJynUs_Tk56z0IvBjikjnlvUUlg/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/AVvXsEjul4zxk_83tjLhK1pYKvja7SayYkC6d1p6kgkgdzQrKTgSQTMBmSD00g1uiM15bCKOZ94Rxw0ruSI5FmeK8QsWoZ-j1X6l39ENebkMTn9_MYVDnVvOUX_f-m2cYWfrI4XIKgOgHG61p4A/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/AVvXsEh7ENvfYg-VVjOFV7ThAsXOGeNbl2pywPqITn3ZQfQZCFVgzDsiRaHEp-p36edaT7f4exkW_gdrIELJy4Uy1knxQR6THWCE4OzS6iMX5g5V0VSGgsUh209O52DAj1PXrfdvzRCQlp0Qm2E/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. احفظ العمل ومبروك عليك الإضافة

• 
  تغيير شكل التعليقات النسخة الأولى
  من هذا المنبر أتمنى لكم رمضان مبارك سعيد و أسأل الله لكم حسنات تتكاثر وذنوب تتناثر وهموم
• 
  اضافة اداة الدردشة Whatsapp لبلوجر
  اضافة اداة Whatsapp للبلوجر هذه الأداة توفرها بعض المواقع ذات طرف ثالث (Third Party) لكن
• 
  طريقة إظهار وإخفاء التعليقات على بلوجر
  صندوق التعليقات على اي موقع هو وسيلة مهمة للتفاعل والترابط بين مدير المدونة والزائر. بالت
• 
  اضافة ملف تعريف احترفي على بلوجر
  مرحبًا يا رفاق اتمنى ان تكونوا بتمام الصحة والعافية. نلتقي مجددا في تدوينة من اضافات بلو
• 
  إضافة تعليقات Disqus يدويا
  يعتبر صندوق تعليقات DISQUS إضافة هامة جداً لأصحاب المواقع بسبب إمكانياته المتعددة وخصوصاً
• 
  إضافة تأثير التموج على بلوجر Ripple Effect
  إنشاء تأثير تموج عند النقر بالنسبة إلى قوالب بلوجر الافتراضية في الإصدار الجديد،

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

عن الكاتب : Hussam

إرشادات

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

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

أين تجدنا؟

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


كلمة الختام

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

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم