التعليقات المترابطه وتمييز تعليق كاتب المدونه مع ايقونة الرد

السلام عليكم ورحمة الله وبركاتة .. درس اليوم يعتبر ثلاثة دروس في آن واحد فالغرض الاساسي من هذا الدرس هو الحصول علي تعليقات تفاعليه مثل الموجوده في مدونتي علي سبيل المثال ..  وهى لمن يعرفها نظام جديد من التعليقات او تحديث لتعليقات بلوجر القديمه تتيح لصاحب المدونة كتابة رد علي تعليق احد القراء اسفل الرد مباشرة وليس في آخر التعليقات المنشوره وكذلك يمكن لباقي المعلقين استخدام تلك الخاصيه فيما بينهم لذا سميت بالتعليقات التفاعليه او المترابطه والتي يطلق عليها  THEARDED COMMENTING 
وهي التي اقوم باستعمالها حاليا في مدونتي وهذا دليل علي ثقتي فيها واي مخاوف قد تساورهم يمكنهم التجربه بكل سهوله قبل التطبيق..
ما الجديد في اضافة اليوم : اضافة اليوم لن تجدها بمثل هذا الشكل في اي مدونه عربيه وان وجدت فسيكون الاختلاف هائل بين الاثنين.
فاضافة اليوم تجمع مابين ما وضحنا بالاعلى وبين تمييز تعليقات صاحب المدونه عن باقي المعلقين بتقمية ال CSS المتميزه وكذلك زر الرد علي التعليق او التعقيب كما اسميه انا في مدونتي .. شرح اليوم سينقسم الي ثلاث اقسام يجب عليك تطبيقهم بالترتيب المطروح بالاسفل دون تعديل فبغير احدهما لن يتم التطبيق بنجاح ..:
القسم الاول : تمييز تعليقات كاتب المدونه عن باقي القراء , ولتطبيق ذلك اتبع التالي..
سجل دخول الى لوحة تحكم بلوجر ثم الي عناصر تصميم الصفحه ثم الي تحرير HTML وابحث عن
<b:loop values='data:post.comments' var='comment'>
ضع بعده مباشرة الكود التالي

<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>
              &lt;div class=&#39;admin-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
            <b:else/>
              &lt;div class=&#39;normal-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
            </b:if>
 ثم ابحث مجددا عن 
<b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
وبعده مباشرة ضع التالي
            &lt;/div&gt;
الان ابحث عن ]]></b:skin> وضع قبله مباشرة 
.admin-comment {
background: #EDEDFF;
margin: 4px 0px 4px 4;
padding: 3px 3px 0 3px;
border: 1px solid #D0D0FF;
}
.admin-comment:hover {
background: #F8F8FF;
border: 1px solid #D0D0FF;
}
.normal-comment {
margin-right: 0px;
padding: 3px 3px 0 3px;
background: #F8F8FF;
border: 1px solid #D0D0FF;
}
.normal-comment:hover {
background: #EDEDFF;
border: 1px solid #EDEDFF;
padding: 3px 3px 0 3px;
}
.comment-footer { margin-bottom: 5px; }
ثم قم بحفظ القالب .. وبذلك تكون قد انتهيت من تمييز تعليقاتك عن تعليقات المعلقين..
القسم الثاني :اضافة ايقونة الرد علي التعليقات
ابحث من جديد عن الكود التالي
<data:commentPostedByMsg/>
ضع اسفله مباشرة الكود الموجود بالاسفل
<b:if cond='data:post.allowNewComments'>
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=
YOURID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=@%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[تعقيب]</a></span>
                </b:if>
<b:else/> <b:if cond='data:post.allowComments'> <a class='comment-reply-link' expr:href='data:post.addCommentUrl + &quot;&amp;postBody=%40%3Ca%20href%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2Fa%3E%26%2332%3B#form&quot;' expr:onclick='data:post.addCommentOnclick' style='float:right;font-weight:normal;' expr:title='&quot;Reply to &quot; + data:comment.author'>[تعقيب]</a> </b:if> </b:if>
 ولا تنسى استبدال كلمةYOURID  داخل الكود باي دي مدونتك وهو الارقام الموجوده بالمتصفح حين دخولك علي تحرير HTML...

 ومن اجل تفاعل اكبر في التعليقات سنضيف خاصية ترقيم التعليقات بوضع الكود التالي بعد الكود الموجود بالاعلى
<!-- Comment count and display START -->
<div class='commentnumber' style='font-size: 20px;padding:0 10px;'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' expr:id='&quot;comment-&quot; + data:comment.id' style='float:left; margin-top:-10px;' title='Comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
</script>
</a></div>
<!-- Comment count and display END -->
 بهذا ننتقل للجزء الثالث والاخير وهو تطبيق التعليقات المترابطه:
ابحث داخل القالب عن </body>
وضع قبلها مباشرة الكود الموجود بالاسفل 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
 
// Threaded comments for Blogger
// http://www.thesimplexdesign.com
 // http://tatweerweb.com

  var clss = [];
  var elements = document.getElementsByTagName("*");
  for(var i=0 ; i<elements.length ; i++)
    if(elements[i].className=="normal-comment" || elements[i].className=="admin-comment")
      clss.push(elements[i]);
 
  var prevAuthor = "";
  var prevNode = null;
  var authornodes = {};
  for (var x=0 ; x < clss.length; x++ )
  {
    var moved = false;
 
    var width = clss[x].scrollWidth;
    clss[x].style.position = "relative";
    clss[x].style.left = "0px";
 
    var author = clss[x].innerHTML.toLowerCase().indexOf("%22%3e");
    author = clss[x].innerHTML.substr(author+6);
 
    if(author.toLowerCase().indexOf("%3c%2fa%3e") > -1)
      author = author.substr(0, author.toLowerCase().indexOf("%3c%2fa%3e"));
    else
      author = "";
 
    var cmtChild = clss[x].firstChild;
    while(cmtChild && !/(^| )comment-body( |$)/.test(cmtChild.className) && !/(^| )comment-body-author( |$)/.test(cmtChild.className))
        cmtChild = cmtChild.nextSibling;
    var txt = cmtChild.innerHTML;
 
    var elm = null;
    var cmtID = txt.toLowerCase().indexOf("href=\"#");
    if(cmtID == -1) cmtID = txt.toLowerCase().indexOf("href=\"" + (window.location.href.toLowerCase()).split("#",1)[0] + "#");
    if(cmtID > -1) {
      var commentid = "x" + txt.substr(cmtID).split("#")[1].split("\"")[0];
      elm = document.getElementById(commentid);
    }
    if(!elm && prevAuthor != "" && x && prevNode)
    {
      if(txt.indexOf("@" + prevAuthor) > -1)
        elm = prevNode;
      else if(prevAuthor.length > 3 && txt.toLowerCase().indexOf("@" + prevAuthor.toLowerCase()) > -1)
        elm = prevNode;
    }
    if(!elm) {
        for(var tmp in authornodes) {
            if(txt.indexOf("@" + tmp) > -1)
                elm = authornodes[tmp];
        }
    }
    if(elm) {
      var ind = 0;
      if(elm.style.left != "")
        ind = parseInt(elm.style.left);
      if(ind < 300) {     // max indent
        ind = ind + 20;   // amount of indent
      }
      var parNode = elm.parentNode;
      var place = elm;
      var xpos;
 
      do {
        do place = place.nextSibling;
        while(place && place.nodeType != 1);
 
        if(place && place.style && place.style.left != "")
            xpos = parseInt(place.style.left);
        else
            xpos = 0;
 
      } while(place && xpos >= ind);
 
      if(place != clss[x]) {
        parNode.insertBefore(clss[x], place);
        moved = true;
      }
 
      clss[x].style.position = "relative";
      clss[x].style.left = ind + "px";
      width = width - ind;
    }
    clss[x].style.width = width + "px";
    if(!moved) {
      prevAuthor = author;
      prevNode = clss[x];
    }
    if(author != "")
        authornodes[author] = clss[x];
  }
//]]>
</script>
</b:if>
 
الان قم بحفظ قالب من مدونتك وشاهد النتيجه واي استفسارات يرجا كتابتها بالاسفل..
الاضافة الاصليه من مدونة www.thesimplexdesign.com  
تعديل وتطوير مدونة تطوير ويب www.tatweerweb.com
أصدقاء(تطوير ويب)
تعليقات Facebook
25تعليقات Blogger

25 عدد التعليقات على موضوع التعليقات المترابطه وتمييز تعليق كاتب المدونه مع ايقونة الرد

قارئ رقم1 يقول...

تجربة التعليقات بواسطة قارئ عادي

قارئ رقم2 يقول...

طريقة رد اخري عاديه للقراء

قارئ رقم2 يقول...

@tqarob weblog
لاحظ هنا تعقيب خلفية تعليق القاري علي كاتب المدونة تختلف عن خلفيه تعليق صاحب المدونه عليه!!

tqarob weblog يقول...

اتمني تكون اتضحت تاثيرات الاضافه علي التعليقات واصبحت تفاعليه كا هو مرجو منها

tqarob weblog يقول...

@قارئ رقم1
طريقة عرض تعليق صاحب المدونة علي تعليق القارئ لاحظ تسلسل رقم التعليق اصبح رق 6 مع انه التعليق الثاني

Nordax يقول...

إضافة رائعة .. !
إليك تدوينة مماثلة، عن كيفية تغيير لون خلفية تعليق الكاتب و كذلك لون الخظ حتى يهر تعليقه مختلفا عن باقي تعليقات الزوارْ
http://simo-nordax.blogspot.com/2012/01/blog-post_08.html

tqarob weblog يقول...

@Nordax
مرحبا بك اخي شكرا لمتابعتك وساقوم بمشاهدة الطريقه الاخري على مدونتك.. تقبل مودتي الدائمه لشخصك الكريم.

اعتراف يقول...

شكرا جزيلا لك
لكن القالب اللى املكه صعب التعديل عليه

tqarob weblog يقول...

اخى العزيز Mahmoud Ahmed لم استطع نشر تعليقك لما يحتويه من اكواد ثيره ستشوه التعليق ولكن على كل حال انصحك بعدم تطبيقها في الوقت الراهن لوجود مشكله في ملفات الجافا ابحث لها عن حلول . يمكنك تطبيق نفس طريقة التعليقات التى اتبعها في مدونتى ان اردت فهى تفهى بالغرض الاساسى من الموضوع الا وهو تخفيف اللود عند تحميل الصفحه حال وجود تعليقات كثيره ..

Mahmoud Ahmed يقول...

اخي الفاضل بارك الله فيكم للرد السريع والاهتمام
لي شرف بأنني على تواصل معك

قمت باضافة الأكواد كلها الا الكود الذي ذكرته لك

وأتمنى ان تفيدني بالآتي
أريد ان أضيف الاضافة الموجوده على مدونتك التي تظهر معلومات عن الكاتب وتعليقات الفيس وتعليقات بلوجر فانها حقا روعه غاية في الروعه واتمنى اضافتها

بالنسبه للموضوع
هل أقوم بحذف جميع الأكواد مره اخرى أم ماذا أفعل ؟؟

tqarob weblog يقول...

اخي العزيز قم بحذفها وطبق الاضافه التي استخدمها من هذا الرابط
http://www.tqarob.com/2012/03/blog-post_05.html

Mahmoud Ahmed يقول...

بارك الله فيكم للمتابعه
جاري التعديل والتطبيق ..
تحياتي لشخصكم المميز

tqarob weblog يقول...

بالتوفيق اخى العزيز محمود واى مشاكل تقابلك ساكون معك لحين التطبيق بنجاح

Mahmoud Ahmed يقول...

جزاكم الله خيرا للمسانده الرائعه اخي الفاضل / أحمد
اليكم التقرير
قمت بمتابعة الخطوات خطوة خطوة وتنفيذها على أكمل وجه في هذا الموضوع
http://www.tqarob.com/2012/03/blog-post_05.html
وكذا بعده هذا الموضوع
http://www.tqarob.com/2012/03/blog-post_9687.html
الا انه لم تظهر عندي الإضافة اطلاقا
رغم انه لم يظهر لي أي خطأ في تحرير ال Html

حقيقة حاولت كثيرا لأصل الى الهدف
لكن !! في انتظار مساندتكم الراقيه
هذه مدونتي ( http://ectall.blogspot.com/ )

tqarob weblog يقول...

سارد عليك في نفس الموضوع هناك اخي كى لا يختلط الامر على احد هنا

Mahmoud Ahmed يقول...

اخي الحبيب احمد

ما رأيك ان لا تنشر هذا الرد ؟؟
اذا رأيت فيه افاده للغير كما لي فانشره ولك دعاء في ظهر الغيب ان شاء الله

حقيقة لا أدري ما أقول
لكني بعد اضافة عدد من الاضافات هنا
وجدت أخطاء عدة في مدونتي
تتمثل في الآتي
أولها /
السلايد شو توقف ولا يستمر كعادته في السابق .
ثانيا / اختفت كل ارتباطات الفيس بوك ولا يظهر اي شيء يتعلق بالفيس بوك .
بالاضافة الى انه لم يظهر اي شيء من الاضافات التي قمت باضافتها

لو تكرمت وانت اهل للكرم
تحل لي هذا الاشكال
الاضافات التي اضفتها هي كالتالي

1/ الحل الامثل لاضافة تدوينات ذات صلة بشكل متحرك على مدونة بلوجر وهذا رابطه
http://www.tqarob.com/2012/02/blog-post_01.html
ومشكلتها انها لا تظهر اي شيء على الاطلاق

2 / قمت باضافة الاكواد تماما في هذين الموضوعين وبعدها حدثت كل المشاكل
وهما متعلقين باضافة تعليقات الفيس وبلوجر
( ما تحدثت عنه سابقا في التعقيب )
http://www.tqarob.com/2012/03/blog-post_05.html

http://www.tqarob.com/2012/03/blog-post_9687.html

والآن أنا في حيرة من أمري
وقد اختلط علي الموضوع واصبحت في توتر من مشاكل الاكواد
هل يمكن ان تحل لي هذه المشاكل جزاكم الله خيرا

سأنتظر الرد
واذا كان بالإيجاب واتمنى ذلك
فسأقوم برفع القالب للتعديل ولكم كل الشكر المتواصل
القالب على الميديا فاير
http://www.mediafire.com/?x3vs08g6kksfpuh

tqarob weblog يقول...

حسنا اخي ساقوم بتركيب الاشافه لك ولكن ارسل لي معرف حسابك على الفيس بوك وكذلك معرف التطبيق الذي انشاته كما هو في الشرح وحينها ساقوم بتركيبها لك وارسال القالب لك . بالنسبه للمشاكل التي واجهتك بالطبع هذا امر طبيعي حين تختلط الاكواد ببعضها ينتج تعارض وتوقف لبعض الاضافات الاخرى.

Mahmoud Ahmed يقول...

جزاكم الله خيرا اخي الحبيب وبارك فيكم
تقارب للباحثين عن التميز في عالم التدوين والاحتراف

معرف التطبيق 415841511775675
معرف الحساب على الفيس بوك
"id": "100001402954438",

جزاكم الله خيراا اخي الحبيب
طلب آخر روعه رأيته بعيني فقلت ما روعه هذا الانسان افادك الله وأثابك

صفحة القرآن الكريم
اريدها بكل ما تحتويه فهي رائعه حقا حقا
وكيف يمكن اضافة مقرئين آخرين اليها ؟

tqarob weblog يقول...

سيتم العمل على القالب اخي العزيز محمود ولكن اكتب لي بريدك الالكتروني كى ارسل لك القالب فور الانتهاء وبالنسبه لاضافة القران الكريم قد قمت بالرد عليك هناك وبريدك هو مانتظره لارسال الانين اليك . شكرا لمتابعتك المستمره لكل ما ينشر هنا , بالتوفيق لك .

Mahmoud Ahmed يقول...

جزاكم الله خيرا اخي الحبيب احمد وبارك فيكم لدعمكم المستمر
الإيميل
dr.ma7moud.a7med@gmail.com
أسعد الله أيامك وجعلها كلها في خير

tqarob weblog يقول...

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

Mahmoud Ahmed يقول...

جزاكم الله خيرا اخي الحبيب احمد
في انتظاركم
تقارب روعة المدونات العربية
كل التحيه

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .