تحديث اختياري واحترافي لاضافة تبويب تعليقات بلوجر والفيس بوك

السلام  عليكم ورحمة الله وبركاته . استكمالا للدرس السابق المعني بعمل تبويبات تجمع مابين تعليقات الفيس بوك وتعليقات بلوجر والموجود على الرابط التالي حصريا طريقة دمج تعليقات الفيس بوك مع تعليقات بلوجر في تبويب واحد اليوم سنقوم بعمل شئ في غاية الروعه يضيف لمدونتك مزيد من الاحترافيه والاناقه وهو اضافة عداد لتعليقات الفيس بوك في مدونتك يظهر جنبا الي جنب عداد تعليقات بلوجر في الصفحه الرئيسيه وداخل المواضيع  .. اظن الفكره واضحه . ولمن يريد تطبيقها عليه بالضروره تطبيق الدرس السابق اولا لانها مكمله له ولا تصلح بدونه .. للتطبيق على مدونتك قم بالدخول الي لوحة تحكم المدونه  ثم تصميم ثم تحرير HTML وضع علامه على خانة توسيع القالب ثم ابحث عن  post-comment-link  ستجده يقع في بداية قطعه من الاكواد بالشكل الموجود في الاسفل

<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </span>

قم بتظليل قطعة الاكواد تلك بالكامل واستبدلها بالكود التالي

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
<span class='fb-comments-count'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<a class='comment-link' expr:href='data:post.addCommentUrl'><fb:comments-count expr:href='data:post.url'/> Comments</a></span>
<span class='blogger-comments-count'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> 
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></span>
            </b:if>
          </b:if>
        </b:if>
      </span>

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

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

واستبداله بالكامل بالكود التالي

<br/>
<div style='border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:3px 0px; text-align:right;'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5v1f5sdP4Hv0LVBJDuiduqfngT7LsNiCSHmMDwqYe_2OIjCxpkpnYu8oX3EI7jCjf3iIW9-8Dn7RZILCqusAc5oqOOkB52a1wp0_yHxswJ8y9m7xR9rWUifqwTxAwezG8Es6nTH88G4/s400/fb.png'/>
<a class='comment-link' expr:href='data:post.addCommentUrl'><fb:comments-count expr:href='data:post.url'/> Comments</a>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

ثم ابحث عن  ]]></b:skin>
وضع قبلها الكود التالي

.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}

ثم قم بحفظ قالب مدونتك واي استفسار يرجا ترك تعليق بالاسفل .