(HN) -
(TP.HCM)
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 Facebook và Google 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'>Bạn điều chỉnh độ rộng là 640 phù hợp với Web của bạn.
//<![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>
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 = "//connect.facebook.net/en_GB/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<b:if cond='data:blog.pageType == "item"'>B4. Tiếp theo chèn đoạn code sau bên dưới đoạn code trên nhé:
<div id='related-posts'>
............
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><div class='tabviewsection'><style>.tabs-widget{padding:0;height:28px;border-bottom:1px solid #ddd;width: 630px;padding-left: 15px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWF3F3iiKj89GZctKjPH8MukAB4hIQgdKe27PcaAc7CSxnBkdWNUS5nZWXVDd71iP_4Rnto2OD0peyWv7GJLkhl6j_Tjl00OvCiRGCb9G8IGxVx6hxwBIbftGSwPsKaC_mTscCs47ueMt7/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6G7WmLha0XGbqN37dKCXyWBjZTAC3_frBt7YLtGlnTqna7W1yXfPF6vSRh_rCaOfb4CSxspjBYPsk0YYvASj6Hdus-ANM0FWfNFzDQFULmgcJAWl_xG1QWRhPtUkwu9M2mB-zDj257a_G/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1-ZU8MU4DLPZ42yKuMb5yx969lB4NRKdDDSA-HiZbaYQlSIBFLHeriehKvUXVb-f5wQH3fE_3egySw_jGowFrlYN3r9rHM6rYAuXEhp75OH9gfVYpsVSBVR8PZrdVo5Eu6f0JbnCutDY/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>- Ghi chú: Ở tab 2 có Đoạn code commnet của Google Blogger....
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(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 == "item"'><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>
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'>- 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!
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.numComments > 200'>
<div class='commentnavi' id='commentnavi'/>
<script type='text/javascript'>
var numcomments='<data:post.numComments/>';
//<![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">…</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">…</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFsowTBeX8wSx_K7bXW3Au6CIu_4RbnqJ7PoMd_y9Drq-eALwhLgsBaxon0XXC6hCBVluZC8LnMezqn5MhnTc25_Bew-EHg4JbIV84yisK_aZNnn6HmlaSzsRaWQ1tVep6v7RpQ1gcgDz/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='<data:blog.url/>';
//<![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 + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
0 nhận xét:
Đăng nhận xét