اسهل طريقة لاضافة تعليقات الفيس بوك على مدونات بلوجر Facebook Comment

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

أولا : ندخل على لوحة التحم الخاصة بك في بلوجر ثم توجه الى قالب ثم تحرير HTML
  
أبحث عن

 <div class='comments' id='comments'>

سوف تجدها مكررة مرتين
تحت كل واحدة ضع الكود التالي

  <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhou57-E00iNCKQ52yiDKUjC5fOSXHbySU2cfbzo8srRhOjbnzZd0sBQfOcsqjMEt23flZcrNk3rGHdlu2mFuLuFJWtWLQFEwuL1TTEM_Nttatr_Lo6YmnOOQ3wsfEd3o2LAn0gHsj7gyc/s1600/FACEBOOK.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6PaAQb1yzvtX8rdJAjGZCmRfdDVfpOCE41Zd8NSF5o3AbDIuCeDrcP4DZ3H4mFF4cBoP3JuHZYKtyBePgn8Sywxyr4r_sHYPgKbtRRAPHb4P0ClzbJN0MJE3aMH8Fj4GofFt3lRniKQ/s1600/BLOGGER.png'/>
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comakauttafb-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/>
</b:if>
</div>
<div class='comments comakauttafb-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='497272210334076' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comakauttafb-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>
<style type='text/css'>.comakauttafb-page, .comakauttafb-tab
{-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-left:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page
{background:transparent;);margin-top:8px;}#blogger-comments-page
{padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px
1px
#fff;color:#000;float:left;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5s
ease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s
ease-out}.comakauttafb-tab-icon
{height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover
{background:rgba(219,219,219,.8);}.inactive-select-tab
{background:rgba(255,255,255,.4);}.inactive-select-tab,
.comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000}</style> 

التعديلات الازمة
عرض الصندوق لتعديل عليه بحسب عرض المدونة الخاصة بك عدل ما هو بالون الاحمر

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

مدونة ربحني شكرا