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

السلام عليكم ورحمة الله وبركاتة .. درس اليوم يعتبر ثلاثة دروس في آن واحد فالغرض الاساسي من هذا الدرس هو الحصول علي تعليقات تفاعليه مثل الموجوده في مدونتي علي سبيل المثال ..  وهى لمن يعرفها نظام جديد من التعليقات او تحديث لتعليقات بلوجر القديمه تتيح لصاحب المدونة كتابة رد علي تعليق احد القراء اسفل الرد مباشرة وليس في آخر التعليقات المنشوره وكذلك يمكن لباقي المعلقين استخدام تلك الخاصيه فيما بينهم لذا سميت بالتعليقات التفاعليه او المترابطه والتي يطلق عليها  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>

وبعده مباشرة ضع التالي

            </div>

الان ابحث عن ]]></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://tqarob.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.tqarob.com