الجمعة، 23 أغسطس 2013

كيف تستخدم تعليقات بلوجر وجوجل+ معا فى مدونتك

How to Use Blogger and Google+ Comments System Together With Toggle
السلام عليكم ورحمه الله وبركاته
تعليقات جوجل ميزه جميله وأيضا تحديث جديد ورائع لنظام تعليقات المدونات , والتى تعطى ايضا رباط قوى بين قراء المدونه . وهذا النظام من التعليقات لا يعطى شكلا فقط او غطاء بشكل جديد للتعليقات ولكن ايضا ولكن يقوم بالرب بين اى مدونه اى مدونه اخرى وهذه ميز ه اضافيه. وهذا النظام يعطى لهم التعليقات والمناقشات بشكل أسرع من تعليقات بلوجر العاديه. بالرغم من سرعته الا قبل ان تترك تعليق لابد من ان تكون مسجلا فى جوجل . وبالنسبه لبعض المدونين يقومون بفتح تعليقات جوجل فقط نظرا لسرعتها ولكن لا ترغم زوارك على انهم يروا شكل واحد ولكن كن متميز :] .

اليوم قد قمت بوضع تعليقات جوجل + فى تعليقات جوجل ولكن لا أخسر ايضا النظام القديم من تعليقات البلوجر فقد جمعتهم معا .
والزوار يختارون ما يشاؤن اذا كان جوجل + او تعليقات بلوجر فى أن واحد .

How to Use Blogger and Google+ Comments System Together With Toggle

ما هى عيوب نظام تعليقات جوجل + ؟

  • عندما يريد الزار التعليق على موضوع ما فأنه لابد من ان يكون مسجلا فى جوجل ليتم فتح الخدمه له والتعليق .
  • نظام تعليق جوجل + يعتمد على لينك الموقع , عكس الفيسبوك يقوم على التطبيق الذى تقوم بوضع رقمه فى مدونتك واذا غيرت اللينك لا يتأثر .
  • لا يقوم بأرسال اشعارت الى ايميلك على جوجل لينبهك ان احد قام بكومنت او ما شابه 
  • اذا قام احد بعمل تعليق مزعج فانه ينشر وانت عندما تراه تمسحع ليس كتعليقات جوجل القديمه يتم الاشراف عليها .

الحل :

الخطوه الاولى : عليك بعمل نسخه احتياطيه من قالبك . ثم تذهب الى القالب -->  تحرير القالب -->  واضغط فى الصندوق الذى به الاكواد CTRL+ F ثم ابحث عن هذا الكود

<b:includable id='threaded_comments' var='post'>
.
.
.
.
</b:includable>

الخطوه الثانيه : بعد ما وجدت الكود الذى بالاعلى قم بوضع مكانه هذا الكود الذى بالاسفل (تذكر ان تكون الاكواد مغلقه جيداا كما قلت حتى لاتحدث اخطاء)

<b:includable id='threaded_comments' var='post'>
  <div id='comment-header'>
    <div class='commentwith'>
      <h5 style="
                 margin-right: 348px;
                 margin-bottom: -33px;
                 ">
        :Comment With
      </h5>
    </div>
    <img class='comment-on' id='comments-norm' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments'/>
    <img src='http://1.bp.blogspot.com/-YJoHHHqshrw/UbmoFKP5mUI/AAAAAAAABfQ/QxSyWG1FPYk/s1600/cloud_comment+(1).png'/>
    <image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/>
    <div class="wascopyright" style="
                                     margin-left: 0px;
                                     margin-top: 0px;
                                     margin-bottom: 0px;
                                     ">
      <a href='http://www.waseeela.blogspot.com' id='wascopyright'>
        Get this widget
      </a>
    </div>
    <div class="commentwiith" style="
                                     margin-left: 342px;
                                     margin-top: -65px;
                                     margin-bottom: 19px;
                                     ">
      <h8>
        !Choose Wisely
      </h8>
    </div>
  </div>
  <div id='comment-zone'>
    <div class='comments' id='comments'>
      <a name='comments'/>
      <h4>
        <data:post.commentLabelFull/>
        :
      </h4>
      <div class='comments-content'>
        <b:if cond='data:post.embedCommentForm'>
          <b:include data='post' name='threaded_comment_js'/>
        </b:if>
        <div id='comment-holder'>
          <data:post.commentHtml/>
        </div>
      </div>
      <p class='comment-footer'>
        <b:if cond='data:post.allowNewComments'>
          <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
          <data:post.noNewCommentsText/>
        </b:if>
      </p>
      <b:if cond='data:showCmtPopup'>
        <div id='comment-popup'>
          <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
          </iframe>
        </div>
      </b:if>
      <div id='backlinks-container'>
        <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
          <b:if cond='data:post.showBacklinks'>
            <b:include data='post' name='backlinks'/>
          </b:if>
        </div>
      </div>
    </div>
    <div id='gcontainer'>
      <div id='gcomments'/>
    </div>
    <script src='http://apis.google.com/js/plusone.js'/>
    <script src='https://googledrive.com/host/0B3NdRzgm9wnpRFlRVzFUSGtILWM'/>
    <script>
      gapi.comments.render(&#39;gcomments&#39;, {
                           href: window.location,
                           width: &#39;600&#39;,
                           first_party_property: &#39;BLOGGER&#39;,
                           view_type: &#39;FILTERED_POSTMOD&#39;
                           });
      $(&#39;#comments-norm&#39;).click(function(){
        // switch to normal comments displaying
        $(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#comments&#39;).css(&#39;display&#39;,&#39;block&#39;);
        $(&#39;#comments-norm&#39;).addClass(&#39;comment-on&#39;);
        $(&#39;#comments-gplus&#39;).removeClass(&#39;comment-on&#39;);
        $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png&#39;);
        $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png&#39;);
        });
      $(&#39;#comments-gplus&#39;).click(function(){
        // switch to google plus comments displaying
        $(&#39;#comments&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;block&#39;);
        $(&#39;#comments-norm&#39;).removeClass(&#39;comment-on&#39;);
        $(&#39;#comments-gplus&#39;).addClass(&#39;comment-on&#39;);
        $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png&#39;);
        $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png&#39;);
        });
      $(&#39;#comments-norm&#39;).hover(
        // switch to normal comments displaying
        function(){
        if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png&#39;);}
               }, function(){
            if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png&#39;);}
            }
           );
        $(&#39;#comments-gplus&#39;).hover(
          // switch to gplus comments displaying
          function(){
          if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png&#39;);}
                 }, function(){
              if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png&#39;);}
              }
             );
    </script>
    <style>
      #comment-zone {
        position: relative;
      }
      #gcontainer {
        display: none;
      }
      #comments-norm, #comments-gplus {
        cursor: pointer;
        padding: 0px 14px;
      }
      #comment-header{
        clear:both; margin:24px -64px;
        padding:0 10px 0 10px;
        padding: 10px;
        width: 703px;
        margin-bottom: 20px;
      }
    </style>
  </div>
</b:includable>

الخطوه الثالثه : نبحث عن هذا الكود ايضا كما فعلنا فى الكود سابق

<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>

الخطوه الرابعه : نقوم بأستبدال الكود الذى بالاعلى بالكود الذى فى الاسفل

<b:includable id='comment_picker' var='post'>
                    <b:if cond='data:post.forceIframeComments'>
                      <b:include data='post' name='iframe_comments'/>
                      <b:if cond='data:post.showThreadedComments'>
                        <b:include data='post' name='threaded_comments'/>
                        <b:else/>
                        <b:include data='post' name='comments'/>
                      </b:if>
                      <b:else/>
                      <b:if cond='data:post.commentSource == 1'>
                        <b:include data='post' name='iframe_comments'/>
                        <b:else/>
                        <b:if cond='data:post.showThreadedComments'>
                          <b:include data='post' name='threaded_comments'/>
                          <b:else/>
                          <b:include data='post' name='threaded_comments'/>
                        </b:if>
                      </b:if>
                    </b:if>
                  </b:includable> 

الخطوه الخامسه : بعد تنفيذ كل التعليمات التى ذٌكرت الان عليك بعمل حفظ للقالب :] .

مبروك الان ركبت نظام تعليقات جوجل + مع تعليقات بلوجر العاديه فى ان واحد :] .

ملحوظه : حتى تظهر تعليقات جوجل و بلوجر العاديه معا من الضرورى ان يكون الموضوع حاصل على الاقل 1 تعليق حتى يظهر . المواضيع التى لا يوجد فيها تعليقات ستسمر بالاختفاء وليس من الضوروى ان تفعل تعليقات جوجل على مدونتك فقد دع الامور تجرى كما فى الموضوع بسهوله ودون تعقيد :] .

MOHAMED TAHSEEN

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

0 التعليقات :

إرسال تعليق

 
: POWERED BY Powered By Blogger Built with jQuery Built with CSS3
Re-Designed by Mohamed Tahseen