16:34 - 10/04/2014

Tạo Tab Comment Facebook Và Google Blogspot đẹp và chuyên nghiệp

    Theo yêu cầu thủ thuật của 1 bạn đọc, Minh xin chia sẻ cách tạo Tab Gồm Comment FacebookGoogle Blogger. Tab rất nhẹ nhàng và load nhanh


    Cách thực hiện:
    B1. Chèn đoạn code sau trên </head>
    <script type='text/javascript'>
    //<![CDATA[
    var purl= location.href;
    var fb_href = purl.substring(0,purl.indexOf(".html")+5);
    var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="640"></div>';
    //]]>
    </script>
    Bạn điều chỉnh độ rộng là 640 phù hợp với Web của bạn.

    B2. Chèn tiếp đoạn code sau dưới <body>
    <div id='fb-root'/>
    <script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id;js.src = &quot;//connect.facebook.net/en_GB/all.js#xfbml=1&quot;;fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

    B3. Bạn tìm giúp mình từ khóa related-posts trong temp nư hình bên dưới
    <b:if cond='data:blog.pageType == &quot;item&quot;'>  
    <div id='related-posts'>  
    ............
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);  
    </script>  
    </div>
    </b:if>  
    B4. Tiếp theo chèn đoạn code sau bên dưới đoạn code trên nhé:
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='tabviewsection'><style>.tabs-widget{padding:0;height:28px;border-bottom:1px solid #ddd;width: 630px;padding-left: 15px;background: url(https://lh3.googleusercontent.com/-EDVeNYianFw/UhNNe3I87YI/AAAAAAAAFWs/xV2jPB0AbLQ/s38/hinhnenthanhtab-thaiaiti.gif);}.tabs-widget li{list-style:none;list-style-type:none;padding:0;float:left;}.tabs-widget li:first-child{margin:0}.tabs-widget li a{color:#333;background:url(https://lh5.googleusercontent.com/-9fEG70W3CzY/UhNNBdlAzXI/AAAAAAAAFWk/sPBc06fDgw8/s27/2thaiaiti123.gif);padding:5px 10px;display:block;text-decoration:none;font:bold 13px Arial;text-transform:none;border:1px solid #ccc;height: 17px;margin-right:2px;border-top-left-radius:8px;border-top-right-radius:8px;}.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://lh5.googleusercontent.com/-VaUp4RWbdLo/UhNLVhjTRpI/AAAAAAAAFWQ/DHQNusfcFRs/s31/1thaiaiti123.PNG);color:#333;text-decoration:none;height: 18px;border-bottom: none;}.tabviewsection{width:640px;margin: 0;float: left;margin-top: 20px;}#widget-themater_tabs-1432447472-id1 {float: left;margin-top: 10px;}</style>
    <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
    </script><div style='float: left;margin-top:5px;height: 20px;overflow: hidden;'><div class='addthis_toolbox addthis_default_style '><a class='addthis_button_facebook_like' fb:like:layout='button_count'/><a class='addthis_button_google_plusone' g:plusone:size='medium'/></div><script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f57432236fb4dee' type='text/javascript'/></div><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li><a href='#widget-themater_tabs-1432447472-id1'>Bình luận facebook</a></li> <li><a href='#widget-themater_tabs-1432447472-id2'>Bình luận Google</a></li>
    </ul><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>document.write(fbcm);</script></b:if>
    </div>
    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    Đoạn code commnet của Google Blogger.... </div>
    </div>
    </b:if>
    - Ghi chú: Ở tab 2 có Đoạn code commnet của Google Blogger....
    chỗ này bạn cần phải thay đoạn code trên Template của bạn, bằng cách bạn tìm đoạn code sau:
    <div class='comments' id='comments'>
    - Trong Temp có 2 đoạn code như trên, bạn cần phải tìm đúng đoạn code như bên dưới nhé:
      <div class='comments' id='comments'>
        <a name='comments'/>
        <h4><data:post.commentLabelFull/>:</h4>
    <b:if cond='data:post.numComments &gt; 200'>
    <div class='commentnavi' id='commentnavi'/>
     <script type='text/javascript'>
    var numcomments=&#39;<data:post.numComments/>&#39;;
    //<![CDATA[
    var current;numshowpage=5;prev='«';next='»';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap">&#133;</span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap">&#133;</span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('commentnavi');a.innerHTML=dw;
    //]]>
      </script>
    </b:if>
        <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/>
    <script type='text/javascript'>
    //<![CDATA[
    for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML;c=b.indexOf('icon user blog-author">');if((items_copy[i].author.avatarUrl=='https://lh3.googleusercontent.com/-UVZ5fG6VaGU/Ujm7JHy1cyI/AAAAAAAAFiI/cGp8ptbCKjs/s656/alo_logo%2520%25281%2529%2520copy.png')&&(c!=-1)){b=b.replace(/icon user blog-author">/,'icon user">')}a.innerHTML=b}
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    for(i=0;i<items_copy.length;i++){if(i==items_copy.length-1){d=document.getElementById('c'+items_copy[i].id).getElementsByTagName('p').item(0);e=d.innerHTML+'<div class="thanks-comment '+items_copy[i].deleteclass.replace(/ blog-admin/,'')+'">Cảm ơn '+items_copy[i].author.name+' Chúc bạn 1 ngày làm việc hiệu quả!</div>';d.innerHTML=e}}
    //]]>
    </script>
    <script type='text/javascript'>
    var likeurl=&#39;<data:blog.url/>&#39;;
    //<![CDATA[
    for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
    //]]>
    </script>
          </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> 
    - Sau khi tìm được đoạn code giống như trên trong Temp của bạn, bạn cắt đoạn code đó thay vào Vùng mình bôi màu đỏ ở bước số 4. Chúc bạn thành công!

Bình luận & Góp ý