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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

• معاينة

شرح طريقة التركيب
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. احفظ العمل ومبروك عليك الإضافة

• 
  تركيب اضافة مانع الإعلانات بشكل جديد
  بالنسبة لناشري adsense، يمثل مانع الإعلانات تحديًا. فهو يؤدي إلى انخفاض الدخل بش
• 
  منع النسخ ببلوجر عند النقر بتحذير منبثق
  مرحبا بكم مجددا، تكلمة في السابق عن هذه الإضافة طريقة حماية قالبك من Inspect element في
• 
  تغيير شكل التعليقات النسخة الأولى
  من هذا المنبر أتمنى لكم رمضان مبارك سعيد و أسأل الله لكم حسنات تتكاثر وذنوب تتناثر وهموم
• 
  اضافة صفحة الأرشيف لمدونات بلوجر
  اضافة فهرس المواضيع لمدونات بلوجر بشكل احترافي. حان وقت تحديث هذه الإضافة فآخر تدوينة لهذ
• 
  إضافة الوضع الليلي السريع إلى قالبك
  كل عام وانتم بخير مع تطور القوالب اصبحنا نرى مختلف الملحقات والإضافات الرائعة، تعطيك ا
• 
  اضافة تأثيرات الظل على شعار المدونة
  جعل تأثير الظل يتحرك ذهابا وإيابا على شعار المدونة. هذا التأثير رائع حقا سيعطي لشعار مدون

ملحوظة:

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

عن الكاتب : Hussam

إرشادات

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

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

أين تجدنا؟

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


كلمة الختام

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

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