طريقة دمج 4 صناديق للتعليق معاً باحترافيه

دمج تعليقات بلوجر فيسبوك Disqus و جوجل بلس على البلوجر بالشكل احترافي
أقدم لكم اليوم في هذا الشرح المتميز طريقة دمج 4 صناديق التعليقات في البلوجر بالشكل احترافي متناسق مع جميع المدونات البلوجر ، يمكنك دمج تعليقات البلوجر ، الفايسبوك ، Disqus و جوجل + GOOGLE في صندوق واحد احترافي على منصة البلوجر . الطريقة سليمة و مجربة و ايضا احترافية و تساهم في زيادة التفاعل على المدونة بحيث يعلق كل واحد بالشكل المناسب له أو الشكل الذي يتوفر فيه على حساب .

يمكن للزائر التنقل بين صندوق التعليقات بالشكل سهل جدا عن طريق الضغط على عليها ، ووضع التعليق المناسب .

طريقة دمج أربع تعيقات على البلوجر

خذ نسخة احتياطية للقالب لتجنب اي خلل قد يحصل

1. نتوجه الى المدونة 

2. قالب 

3. تحرير HTML

4. نبحث عن الكود الثالي 

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

• ستجد أكثر من كود الكود المطلوب سيكون أسفل من

<b:includable id='comments' var='post'>

5. نقوم بالجمع الكود كامل على الشكل الثالي 

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

6. صورة توضح عملية جمع الكود  

7. ثم أخير نستبدله بالكود الثالي مع تغيير المطلوب 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'/> <script> $(function() { $( &quot;#tabs&quot; ).tabs(); }); </script> <fieldset> <legend>أضف تعليقا باستعمال أحد ... </legend> <style> fieldset { color:#3d3d3d; background:#ebebeb; border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; width:auto; padding:20px 3px; cursor:pointer; margin:0 auto; } .fieldset:active{ cursor:pointer; position:relative; top:2px; } } .legend:active{ cursor:pointer; position:relative; top:2px; } legend { font: normal 20px oswald,GESSTwoMediumRegular;font-style: normal;color: #000000;background: #e0e0e0;-moz-box-shadow: -1px 4px 7px #000000;-webkit-box-shadow: -1px 4px 7px #000000;-moz-border-radius: 26px 10px 26px 10px;padding: 8px 29px;cursor: pointer;margin: 0 auto; } .legend:active{ cursor:pointer; position:relative; top:2px; } /* jQuery for Multi comment Tab */ .ui-tabs { position: relative;/* position: relative &quot;fixed&quot;) */ padding: 0em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0em 0em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: right; position: relative; top: 0; margin:1px 0 0 .2em; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: right; padding: .5em 1em; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDm8cA66FgufArBoiGTZi1IpR4qjMumj9vLzNyiQIMT89DaS89F941pGjAz-gaG5apLSpIcEoLXieMFYIdaS-exXJK3wtGK3Zgkv9wOO8JNpPuZdV_yS6gcCX36XPAiNXQcXXX2YISvOc/s1600/bg-tab.png&quot;) repeat-x scroll right top rgb(85, 149, 37); color: rgb(255, 255, 255); font-weight: bold; border-width: 1px ; border-style: solid solid none; border-color: -moz-use-text-color; -moz-border-top-colors: none; -moz-border-left-colors: none; -moz-border-bottom-colors: none; -moz-border-right-colors: none; border-image: none; } .ui-tabs .ui-tabs-nav li a, /* first selector... */ .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; color: #ffffff; font: 14px oswald,GESSTwoLight; } .ui-tooltip { position: relative; color:#fff; padding:0.6em 1.3em; line-height:1em; text-decoration:none; text-align:center; white-space: nowrap; } .ui-tabs.small span { font-size:13px; } .ui-tabs.medium span { font-size:15px; } .ui-tabs.large span { font-size:29px; } .ui-tabs.small span { font-size:13px; } .ui-tabs.medium span { font-size:15px; } .ui-tabs.large span { font-size:29px; } .ui-tabs.black { background-color: #333333; } .ui-tabs.gray { background-color: #666666; } .ui-tabs.white span{ color: #666666; } .ui-tabs.red { background-color: #e62727; } .ui-tabs.orange { background-color: #ff5c00; } .ui-tabs.magenta { background-color: #3b5998; } .ui-tabs.yellow { background-color: #ffb515; } .ui-tabs.blue { background-color: #00ADEE; } .ui-tabs.pink { background-color: #e22092; } .ui-tabs.green { background-color: #91bd09; } .ui-tabs.rosy { background-color: #F16C7C; } .ui-tabs.brown { background-color: #804000; } .ui-tabs.purple { background-color: #FE2E2E; } .ui-tabs.cyan { background-color: #46C7C7; } .ui-tabs.gold { background-color: #D4A017; } </style> <div id='tabs'> <ul> <li> <a class='ui-tabs small orange' href='#tabs-3'>تعليقات البوجر </a> </li> <li> <a class='ui-tabs small magenta' href='#tabs-1'> تعليقات الفايس بوك </a> </li> <li> <a class='ui-tabs small blue' href='#tabs-2' id='disqus-comments' onclick='load_disqus()'>تعليقات Disqus </a> </li> <li> <a class='ui-tabs small purple' href='#tabs-4'>جوجل +GOOGLE </a> </li> </ul> <div id='tabs-1'> <fb:comments expr:href='data:post.url' num_posts='10' style='' width='585'/> </div> <div id='tabs-2'> <br/> <div id='disqus_thread'/> <div id='disqus_loader' style='text-align: center'> <script> function load_disqus() { var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true; dsq.src = &quot;http://hukmat.disqus.com/embed.js&quot;; (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq); var ldr = document.getElementById(&#39;disqus_loader&#39;); ldr.parentNode.removeChild(ldr); } </script> </div> </div> <div id='tabs-3'> <div class='comments' id='comments'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.numComments != 0'> <h3> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/> : <b:else/> <data:post.numComments/> <data:commentLabelPlural/> </b:if> </h3> <a class='click-comment' href='#comment-form' title='اضافة تعليق'> اضافة تعليق </a> <div class='clear'/> </b:if> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <div class='clear'/> <div id='comment_block'> <b:loop values='data:post.comments' var='comment'> <div class='data:comment.adminClass' expr:id='data:comment.anchorName'> <b:if cond='data:post.adminClass == data:comment.adminClass'> &lt;div class=&#39;comment_inner comment_admin&#39;&gt; <b:else/> &lt;div class=&#39;comment_inner&#39;&gt; </b:if> <div class='comment_header'> <div class='comment_avatar_wrap'> <div class='comment_avatar'> <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/> </div> <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='الرد السريع'> الرد </a> </div> <div class='clear'/> </div> <div class='comment_body'> <span class='comment_arrow'/> <div class='comment_name'> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <data:comment.author/> </b:if> <b:if cond='data:comment.author == data:post.author'> <span class='comment_author_flag'/> </b:if> <span class='comment_service'> <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'> <img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HWrr-I_pz6BazHum-K2rUBZEzuSiW01-qqvB4XkHHSHM87wB8OmMnVhveL3Lx157TtAJPorpBXQ34-45nGu9_qelYoEG_gLJc5rugpnnbCiJ1n3T1KAZMaT_xX61NW7Xj2taHukVuHM/s1600/delete4.png' title='حذف التعليق'/> </a> <span class='comment_date'> <a expr:href='data:comment.url' rel='nofollow' title='comment permalink'> <data:comment.timestamp/> </a> </span> </span> </div> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'> <data:comment.body/> </span> <b:else/> <p> <data:comment.body/> </p> <div class='clear'/> </b:if> </div> <div class='clear'/> &lt;/div&gt; <div class='clear'/> <div class='comment_child'/> <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/> </div> </b:loop> </div> <div class='clear'/> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <div class='clear'/> <div class='comment_form'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <div class='comment_emo_list'/> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'> <data:postCommentMsg/> </a> </b:if> </b:if> </div> </b:if> </div> </div> <div id='tabs-4'> <script src='https://apis.google.com/js/plusone.js'/> <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='585' expr:data-href='data:post.url'> </div> </div> </div> </fieldset> </b:if>

هذا الموضوع منقول للفائدة ’ + تعديل بعض الاشياء اي استفسار اترك تعليق