الخميس، 27 فبراير 2014

الطريقة الصحيحة لدمج تعليقات الفيس بوك مع تعليقات بلوجر

بقلم: BR MED يوم الخميس، 27 فبراير 2014 القسم : 0 التعليقات

مرحبا، اليوم أحبابي في الله سوف نتعلم كيفية دمج تعليقات الفيس بوك مع تعليقات بلوجر هذه الميزة تمنح مدونتك جمالية وأناقة أكثر حيث ستتخلص من ذلك الفراغ الشاسع الموجود بين تعليقات الفيس بوك وتعليقات البلوجر طريقة صحيحة وحصرية فقط على مدونة ورشة مدون... كي لا أطيل عليكم ننتقل للشرح
النموذج الأول
 قبل كل شيء أنصحك بأخد نسخة إحتياطية للقالب تحسبا لأي خطأ أو في حالة لم تعجبك الإضافة
1-ندهب إلى لوحة التحكم نختار القالب نضغط تحرير html 
2-نضغط  ctrl+f ونبحث عن الكود التالي

<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/AVvXsEilb8X4bXXiuA_EcZShIqDJsYDWiiIrO8BTdouvfBsGek2Bd6CFJBVb_ckQClan_xp1In44Km7Y0k27WjSWg2JOyvQRjxl8c8htTvd-l80HajnvXGRdbwU4yrXAqLw37ax84fmcgtNipGA/s1600/FACEBOOK.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</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/AVvXsEhKrmVUWB84dA32xriawO6wqkuaQ2JXcYd932YNzji8E581d7Rnu2JXXudaXK9pOQIRxTtIRG9_StR2RMHovtGPYVxZ0JQWeTMNXUNr0j6AkaI1DKt1XBhUMZvMW6KYaFsOcwBTMSEtFOM/s1600/BLOGGER.png'/> <data:post.numComments/> التعليقات</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/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' 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-right: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:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-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>

قم بتغير حجم الإضافة بتغير العدد الأحمر 680
تستطيع أيضا تغير الألوان
تم نضغط حفظ وهنيئا لك 

النموذج الثاني

نفس طريقة تركيب الأول ولكن نضع هذا الكود

  <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/AVvXsEiE7kPlhSg36SZdfL4wJvPm2ysR6zZieHEh4iEf1-rD9uuok4Y4AA7Jil1e1V5OBbE-py9Ki3BCUM3W0D4_69gUydntpaGjRemKnwZkMHZRHrlTcs_u1ciOYiqNye7l3Aa-Pe2fHXsEPi_d/s1600/add-b.blogspot1.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</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/AVvXsEhsQWqtjMzQG5yO9Q5xmfJ3iw9JI6cHntc9QIm7OkUDZV6Va-tL1S507xcCGCqBK7KpQPZjxP1Mbk1xuPvl9UpQVzFHSepsoWyUaSCCV0xO1nb0A21W7llXErGOKVC8CCQGNCyhZTQ8jrp2/s1600/add-b.blogspot.com.jpg'/> <data:post.numComments/> التعليقات</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='639'/></b:if></div><div class='comments comakauttafb-page' id='blogger-comments-page'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' 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-right:5px solid #ccc; border-top:2px solid #ccc; border-bottom:2px solid #ccc; border-right:2px solid #ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #FFA221;color:#FFA221;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-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>
يمكنك أيضا تغير عرض التعليقات ليتناسب مع مدونتك بتغير 639
أتمنى أن تعجبكم الإضافة 
لاتنسو لايك لصفحتنا على الفيس بوك لتتوصل دائما الجديد  

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

الاشتراك في: تعليقات الرسالة (Atom)