Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Saturday, November 05, 2011

Chèn Thread comment phân nhiều cấp vào Blogspot Ver 2

Cách tạo Thread Comment phân nhiều cấp cấp kết hợp chèn emoticons,hình ảnh, vdeo, nhạc vào comment cực đẹp.

Chia sẻ:
Chèn Thread comment phân nhiều cấp vào Blogspot Ver 2
Phần comment phân cấp phiên bản đầu tiên có rất nhiều lỗi nghiêm trọng, vì vậy, mình quyết định không sử dụng bộ code đó nữa, mà mình muốn chia sẻ với các bạn bộ code mới hoàn thiện hơn với sự trợ giúp của jQuery.

Phiên bản này được thiết kế bởi Tiến Nguyên , namkna xin giới thiệu lại cho mọi người cùng được biết!.Thread comment jquery

☼ Những gì mới trong tiện ích Thread comment ves 2 này:

» Sử dụng file Jquery do vậy load mượt hơn (Bạn sẽ không cảm thấy chậm).
» Thêm scrip chèn ảnh, video, nhạc mà không cần sử dụng cá thẻ [img] hay [youtobe] hoặc [nct] mà chỉ cần dán trực tiếp link ảnh, link video từ youtube, link nhạc từ nhacucatui.
» Thêm scipt tạo khung cho code bạn chỉ càn dán đoạn code muốn đóng khung vào thẻ [pre]ư và [/pre]
» Giao diện đẹp, thích hợp với mọi blog tiếng việt và tiếng anh.
» Khả năng tuwyf biến cao, Bạn có thể thay đổi giao diện thông qua tùy biến code CSS. Trong bài này mình cung cấp 2 đoạn giao diện khác nhay cho bạn lựu chọn.
» Hiển thị tốt trên mọi trình duyệt.
» Không bị mã hóa bacode do vậy không lệ thuộc vào host của mình.
» Tích hợp phân trang cho bài viết có trên 200 comment.

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Mẫu (Template) => CHỉnh sửa HTML => Mở rộng tiện ích mẫu
3. Tìm đoạn code:
<b:include data='post' name='threaded_comments'/>
- thay thế bằng đoạn code sau:
<b:include data='post' name='comments'/>
4. Thay thế toàn bộ đoạn code ở giữa <b:includable id='comments' var='post'></b:includable> thành
<div class='comments' id='comments'>
        <a name='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>
         </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='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>
                                                                                        
            <a expr:name='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'>
               <data:comment.authorAvatarImage/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>   
              </div>  
         
              <div class='comment_service'>
               <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'><data:comment.timestamp/></abbr></span>
               <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)'>Reply</a> 
               <b:include data='comment' name='commentDeleteIcon'/> 
              </div>
              <div class='clear'/>
             </div> 
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
              </b:if>                                                       
             </div>                          
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            
            <div class='comment_child'/>
            <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
            <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'>
            <h3 id='comment-post-message'><data:postCommentMsg/></h3>
            <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'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>
                     
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
       
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>
         
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 5;//Kedalaman threaded comment
        Display_Emo = true;//Tampilkan emoticon? ganti "false" apabila tidak ditampilkan
        Replace_Youtube_Link = true;//Menampilkan link Youtube, ganti"false" untuk me-nonaktifkan
        Replace_Image_Link = true;//Menampilkan gambar, ganti  "false" untuk me-nonaktifkan.
                                Replace_Force_Tag = true;//Mengganti tag otomatis, seperti: [pre] menjadi <pre>, dan [/pre] </pre>, apabila salah mengetik, maka tidak akan tampil
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya bekerja apabila Replace_Image_Link=true
        
        //List Emoticon
        Emo_List = [
        ':)'  ,'http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif',
        ':('  ,'http://4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif',
        '=('  ,'http://1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif',
        '^_^'  ,'http://1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif',
        ':D'  ,'http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif',
        '=D'  ,'http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.gif',
        '|o|'  ,'http://4.bp.blogspot.com/-ip66eq3uRI8/UKhVF-QK8lI/AAAAAAAADO4/P0G-1PcWpQs/s1600/applause.gif',
        '@@,'  ,'http://4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif',
        ';)'  ,'http://3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif',
        ':-bd'  ,'http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif',
        ':-d'  ,'http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif', 
                                                                 ':p'  ,'http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif',      
        ]; 
        
                                
                                //Mengganti tag, gunakan huruf kecil
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
      
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))        
       //]]>
         </script>
5. Chọn một trong các CSS style bên dưới qua ảnh minh họa mà bạn thích và Thêm đoạn code bên dưới vào trên code ]]></b:skin> :
Style 1: Thread comment mẹ cọn.
Ảnh minh họa
Code CSS 1.
.comment_wrap {
background: #FFF;
padding: 10px;
border: 1px solid #CCC;
-moz-box-shadow: inset 0 0 10px #CCC;
-webkit-box-shadow: inset 0 0 10px #CCC;
box-shadow: inset 0 0 10px #EEE;
margin: 10px 0 0 0;
}
#comments {
clear: both;
}
#comments h3{
font-size:18px;
margin-top:15px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 50px;
height: 50px;
max-width:50px;
max-height:50px;
padding: 0 10px 0 0;
border-right: 1px solid #DDD;
}
#comments .avatar-image-container img {
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
background:url(http://1.bp.blogspot.com/-M-tnUtHR8K0/UK4ydWzeYsI/AAAAAAAADUg/AJMNsU71XSM/s1600/anonymous.jpg) no-repeat;
}
.comment_name{
font-weight: bold;
padding: 0;
font-size: 14px;
text-decoration: none;
}
.comment_name a {
font-weight: bold;
padding:0;
font-size: 14px;
text-decoration: none;
}
.comment_date {color: #BBB;}
.comment_body p {
line-height: 1.5em;
margin: 1em 0 0 0;
color: #666;
word-wrap:break-word;
}
.comment_inner {
word-wrap: break-word;
}
.comment_child .comment_wrap {padding-left: 10px;}
.comment_reply {
font-size: 10px;
font-weight:bold;
text-transform: uppercase;
margin-left:5px;
margin-right:5px;
}
.comment_admin .avatar-image-container {border-right: 3px solid #308D9B!important;}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment_reply_form {
padding: 0 0 0 20px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo {
vertical-align: middle;
margin: -0.3em 0 0 0;
}
.comment_emo_list .item {
float: left;
width: 40px;
text-align: center;
height: 40px;
margin: 10px 10px 0 0;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_service{
margin-top:5px;
font-size:10px;
}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
Style 2: Thread comment dạng thư mục.
Ảnh minh họa
Chèn Thread comment phân nhiều cấp vào Blogspot Ver 2
Code Css 2:
#comments h4 {
font-weight: normal;
text-transform: uppercase;
font-size: 18px;
display: block;
float: none;
padding: 0 8px;
margin: 0 0 0 0;
background-color: #0F83A0;
color: white;
font-weight: bold;
line-height: 28px;
height: 30px;
font-size: 110%;
}
.unneeded-paging-control {display: none;}
.comment_child .comment_wrap {
background: url(http://4.bp.blogspot.com/-EeuBuBf-6Ec/UPy2-iSsegI/AAAAAAAAJ-k/QDZAAl9TvRg/s1600/reply_bg.png) no-repeat;
padding: 0px 0px 0px 20px;
margin-left: 10px;
}
.comment_inner {
width: 100%;
zoom: 1;
display: inline-block;
outline: none;
overflow: hidden;
background: white;
box-shadow: 0 1px 3px 0 #B5B5B5;
-moz-box-shadow: 0 1px 3px 0 #b5b5b5;
-webkit-box-shadow: 0 1px 3px 0 #B5B5B5;
border: 1px solid #DDD;
border-bottom: 4px solid #0F83A0;
overflow: hidden;
position: relative;
margin: 10px 0px 10px 0px;
}
.comment_header {background: #fff;
border: 1px solid #ddd;
float: left;
padding: 10px;
width: 200px;
margin: 10px 20px 20px 10px;
line-height: 1.8;}
.comment_avatar img {
 border-width: 1px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 -webkit-background-clip: padding-box;
}
.comment_name {
margin: -6px 0 0 42px!important;
margin: 2.1em 0 1em;
color: #525252;
font-weight: bold;
font-size: 13px;
}
.comment_name {
margin: 0 0 0 40px;
font-weight: bold;
line-height: 1;
font-size: 13px;
}
.comment_name a {
color: #525252;
text-decoration: none;
text-shadow: 0 0 1px #DDD;
}
.comment_name a:hover {color: #F90;}
.comment_service {
margin: 0 0 0 41px;
color: #666;
font-size: 13px;
}
.comment_reply {
clear: both;
float: right;
 background-color:#fff;
 border:1px solid #ddd;
 display:inline-block;
 margin: 10px -22px -22px 0;
 font-size:12px;
 font-weight:bold;
 padding:3px 11px;
 text-decoration:none;}
.comment_reply:hover {background-color:#5390AD;}
.comment_reply:active {
 position:relative;
 top:1px;
}
.comment_body p {
font-size: 12px;
margin: 10px 15px 10px 15px;
color: #666;
word-wrap: break-word;
}
.comment_avatar .avatar-image-container {
height: 36px!important;
width: 36px!important;
 border: 1px solid #ddd;
 -webkit-background-clip: padding-box;
}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_admin {
background: #fff url(http://3.bp.blogspot.com/-N0Envax4dyY/UQqrpM6BzWI/AAAAAAAAKYk/zSgezjHN8YQ/s1600/admin.png) no-repeat right -1px;
box-shadow: 0 1px 3px 0 #B5B5B5;
-moz-box-shadow: 0 1px 3px 0 #b5b5b5;
-webkit-box-shadow: 0 1px 3px 0 #B5B5B5;
border: 1px solid #DDD;
border-bottom: 4px solid #0F83A0;
overflow: hidden;
position: relative;
}
.comment_form a {
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
.comment_form a:hover {text-decoration: underline;}
.comment_reply_form {
padding: 0 0 0 20px;
border-left: 1px solid #ddd;
}
.comment_reply_form .comment-form {width: 100%;}
.comment_emo {
max-width: 1.5em;
max-height: 1.5em;
vertical-align: middle;
margin: -0.3em 0 0 0;
}
.comment_emo_list .item {
float: left;
padding: 10px 10px 0 10px;
text-align: center;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {
max-width:100%!important;
}
.comments .avatar-image-container img {
width:34px!important;
height:33px!important
}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
Style 3: Style Wb sub menu thread comment
6. Lưu mẫu lại là xong. Giờ quay lại tận hưởng thành quả của bạn thôi. :))

54 nhận xét:

  1. sao thêm cái này vào nó lại do blog nhỉ làm theo cái cũ thì bị lỗi làm cái này thì dơ luôn blog cứ load mãi may mà mình lưu trước

    ReplyDelete
  2. à được rồi .làm theo cái mới này có j query nặng thì phải cái cũ thì ra do quên thay id hèn gì toàn báo lỗi j làm theo cách cũ đc rồi

    ReplyDelete
  3. @everytimeNếu dùng bản Free trên mạng:3) :3) :3) thì bạn Lưu ý xóa hết đoạn sau phần /*Comment .... */ cú đi vì nó xung khắc với phần đó. Mình không xem được trang bạn nên không biết góp ý cụ thể đoạn đó thế nào:3) :3) :3)

    ReplyDelete
  4. dùng cái cũ cũng đc tí nữa vo coi xem cái mới thay thê nào nhé tìm tim và chỉnh từ hom qua đến h h viết bài cái đã
    có gì góp ý với nhé

    ReplyDelete
  5. @everytime
    Bạn thử xóa bỏ đoạn này đi nha:
    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    margin: 1em 0;
    color: #ff0000;
    }
    #comments h4 strong {
    font-size: 110%;
    }
    #comments-block {
    margin: 1em 0 1.5em;
    line-height: 1.3em;
    }
    #comments-block dt {
    margin: .5em 0;
    }
    #comments-block dd {
    margin: .25em 0 0;
    }
    #comments-block dd.comment-footer {
    margin: -.25em 0 2em;
    line-height: 1.4em;
    font-size: 78%;
    }
    #comments-block dd p {
    margin: 0 0 .75em;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }
    .feed-links {
    clear: both;
    line-height: 2.5em;
    }
    #blog-pager-newer-link {
    float: left;
    }
    #blog-pager-older-link {
    float: right;
    }
    #blog-pager {
    text-align: center;
    }
    /* Sidebar Content
    ----------------------------------------------- */

    Xung đột Code với phần này mà :3) :3) :3) :3)

    ReplyDelete
  6. Anh namkna ơi, xem giùm em ạ, em đã áp dụng thủ thuật này nhưng không được ạ T_T
    http://blogtructuyenvn.blogspot.com/2012/02/huong-dan-ang-ki-tk-ngan-hang-liberty.html

    ReplyDelete
  7. @vlpm4st3r Ok để anh fix lại coi thế nào :3) :3) :3)

    ReplyDelete
  8. Vâng ạ, anh xem giùm em sớm nhất có thể nhé :2) Cùng họ hàng, giúp đỡ nhau tí :4) :1) :1) :5)

    ReplyDelete
  9. @vlpm4st3r Ok:D) :D) :D) . Mấy hôm nay đi xuốt không có thời gian mấy :B) :B) :B)

    ReplyDelete
  10. OK, anh quăng em cái yh được không, sợ spam thì pm em qua yh dep trai_deophai, a rảnh thì hỏi vai điều :3) :1) :1)

    ReplyDelete
  11. @vlpm4st3r Ok! Để anh cài lại yahoo đã. Hôm trước Remove để máy nhẹ hơn. Máy anh cùi mà :3) :3)

    ReplyDelete
  12. Anh ngủ rồi à?:C) :C) :H) :J)

    ReplyDelete
  13. @vlpm4st3r Dạo này phải đi ngủ xớm rùi. Ở nhà bị thầy bu quản lý mà :B) :B) :B) :B)

    ReplyDelete
  14. @Fairstar
    :3) :3)
    Mà sao em chưa thấy a Nam pm yh em nhỉ :K) :K) :K) , a cài chưa :F)

    ReplyDelete
  15. @vlpm4st3r Vừa cài xong nè. Yahoo anh là: langtuluongsonbac_tq.:F) :F)

    ReplyDelete
  16. Nam ơi giúp mình với:F)Mình làm coment phân cấp hoài mà không được,Nam có rãnh chỉnh dùm mình tí nhé!link template của mình: http://www.mediafire.com/?cbraa7hajuqrwmd.
    Rất cảm ơn Nam!:Q)

    ReplyDelete
  17. Nam ơi! Giúp mình cái này với:Q). Sau tạo ra được 3 cột cho footer giống như Nam vậy? <a href='https://lh3.googleusercontent.com/-oBPw8wjWqXs/T5ElyywmfWI/AAAAAAAAAbw/ZnowxT_QfeU/w888-h316-k.Nam rãnh chỉ dùm mình nhé!Cảm ơn Nam rất nhiều.

    ReplyDelete
  18. @Admin Mình nhớ template đó có 3 cột rùi mà. Tuy nhiên nếu muốn biết cách chia bạn tham khảo bài viết Chia Footer Blogger (Đáy Blogspot) thành nhiều cột :3) :3) :3)

    ReplyDelete
  19. Không phải! ý mình hỏi là làm sao kẻ được đường phân chia cho 3 cột kìa:Q) :Q)

    ReplyDelete
  20. @FairstarThì lấy cái trên để sửa thêm cái commen phân cấp mà

    ReplyDelete
  21. @Admin Bạn chỉ cần thêm thuộc tính border-right:1px solid #eee;border-left:1px solid #eee; vào thẻ quy định của wiget nằm giữa.
    Bằng các vào Thiết kế => Chỉnh sửa HTML và tìm đoạn code sau:
    #footer2-wrapper{margin-left:10px;width:290px;float:left;word-wrap:break-word;overflow:hidden;padding:0 10px}

    - Và thay thế nó thành:
    #footer2-wrapper{margin-left:10px;width:290px;float:left;word-wrap:break-word;overflow:hidden;padding:0 10pxborder-right:1px solid #8f8f8f;border-left:1px solid #8f8f8f;}

    Với #8f8f8f lòa mã màu của đường kẻ :3) :3) :3) :3)

    ReplyDelete
  22. @Admin Chết nhầm đổi thành đoạn này nha:
    #footer2-wrapper{margin-left:10px;width:290px;float:left;word-wrap:break-word;overflow:hidden;padding:0 10px; border-right:1px solid #8f8f8f;border-left:1px solid #8f8f8f;}

    ReplyDelete
  23. @Admin Chết nhầm đổi thành đoạn này nha:
    #footer2-wrapper{margin-left:10px;width:290px;float:left;word-wrap:break-word;overflow:hidden;padding:0 10px; border-right:1px solid #8f8f8f;border-left:1px solid #8f8f8f;}

    ReplyDelete
  24. khung viết code phần này đẹp nhỉ!

    ReplyDelete
  25. @Thao Trinh Code này dduwwocj bác Tiên nguyên viết mà :3) :3) :3)

    ReplyDelete
  26. Ờ namkna ơi cho mình hỏi sao mà khi mình tạo phân cấp cho comment thì mất cái biểu tượng mặt cười vậy?

    ReplyDelete
  27. @Vo thi LamXin lỗi Namkna mình trả lời thay. bạn phải đổi đoạn này trong phần mặt cười:
    bodyText = document.getElementById('comments-block');
    Thành:
    bodyText = document.getElementById('cm_block'); mí được.

    ReplyDelete
  28. a xem hộ em giờ làm sao mà reply được nhỉ em không reply được e sử dụng css thứ 2 ấy :(

    ReplyDelete
  29. Ngược lại chèn reply như bài http://namkna.blogspot.com/2011/12/tao-nut-reply-cho-nhan-xet-blogger-nut.html#.UY04xEqgXKG
    của anh thì tịt phân cấp luôn :(

    ReplyDelete
    Replies
    1. Mẫu comment của em là mẫu commnet cũ, Em phải thực hiện đầy đủ các bước như bài đăng này nha. Chỉ lấy nguyên qđoạn mã CSS thứ 2 thì không có tác dụng đâu em ak.

      Delete
  30. Anh Namkna oi!Yen lam roi van bi loi kg hien phan hinh anh dc anh a !Nho anh sang nha xem giup Yen nha anh !

    ReplyDelete
    Replies
    1. Chào Yến mình đã qua trang enbiendethuong của bạn và tháy rằng bạn chưa áp dụng thủ thuật này. Bạn hãy áp dụng để được hỗ trợ nha.

      p/s: nếu không làm được hãy gửi template vào mail: tavannam01@gmail.com mình sẽ thêm giúp

      Delete
  31. Hom qua Yen da ap dung het tat ca thu thuat nay ban a ! ap dung ti buoc 1 den buoc 5 luon...nhung blog cua Yen van kg thay doi dc gi het ...nen Yen da xoa buoc 5 (vi no anh huong den 1 chut xiu blog la cho DANG NHAN XET CUA BAN hien len nen mau xanh duong nam duoi nhung chu nay trong hoi xau nen minh moi xoa buoc 5 )
    Co le blog minh bi loi sao ,sao do...(minh nghi la do chen nen tim vao entry bai viet va tien tich ngoai)Gio minh gui template qua mail Nam dum giup Yen them vao va chinh sua lai neu bi loi nha ban !Cam on ban that nhieu !!!
    P/S:Tu khi minh chen nen tim vao tien tich ngoai va entry bai viet thi nhung ai theo doi blog minh kg nhin thay bai viet moi nua va cung kg hieu nghiem khi ap dung cac thu thuat nhu "comment moi nhat,tao Slide bài viết moi v.v...trong Javascript !

    ReplyDelete
    Replies
    1. Để lát mình chỉnh template rồi gửi cho bạn.

      Delete
    2. Yến kiểm tra mail đi nha namkna đã gửi template cho bạn rùi đó.

      Delete
  32. Anh ơi em làm được rồi nhưng tại sao comment thử thì không hiện chữ vậy ?

    ReplyDelete
    Replies
    1. Em để lại URL bog để anh kiểm tra nha.

      Delete
  33. bác ơi cho em hỏi cái :D ,blog em hiện h đang dùng template mới thì ko biết sao nó mất cái comment phân cấp này anh à @@ ,anh có cách nào giúp em với ,em thử 3 mẫu trên rồi ,trong 3 cái mẫu trên thì em thấy mẫu 2 rất ok nhưng mà em ko muốn khi em cmt có chữ ad ở sau đó anh @@ ,anh có thể fix dk ko ạ :D ,ko thì kiểu 3 cũng dk nhưng kiểu 3 em làm vào thì có thêm mấy cái icon biểu tượng nữa @@ mà trong khi đó em có chèn thêm emotion vào chỗ comment rồi ,nên em thấy như thế nhìn hơi nhiều quá anh ạ :D ,mong anh giúp em với nha :D

    ReplyDelete
    Replies
    1. 1- với cả 3 kiểu em đều có thể tắt emoticons bằng cách thay đổi đoạn

      Display_Emo = true;

      thành:

      Display_Emo = false;

      2- Kiểu 2 cách ẩn chữ ADD đó không khó. Em hãy áp dụng nó vào blog sau đó dán link blog áp dụng thủ thuật đó lên đây anh chỉ cách cho nha.

      Delete
    2. http://congdongl3.blogspot.com/

      Delete
    3. This comment has been removed by the author.

      Delete
    4. vậy để em áp dụng rồi anh giúp em vs nha :D ,à em có kết bạn đó anh của em là Kỵ Sĩ Rồng đó anh :D

      Delete
    5. em làm xong rồi đó anh :D ,nhưng mà có lạ 1 cái là bây h em cmt ko hiện chữ admin nữa mà nó hiện vào người khác (người đó là author chứ ko phải admin) @@ vậy là sao hở anh @@,mà dù sao cũng nhờ anh chỉ cách ẩn chữ admin với ^^ ,địa chỉ blog đây anh :) : http://congdongl3.blogspot.com/

      Delete
    6. bây h thì em hiểu rồi @@ ,ai viết bài nào mà nếu người ấy cmt thì có chữ ad ở sau vậy mà em cứ tưởng nếu ai là ad thì cmt vào bài nào cũng hiện chữ ad :D ,nếu vậy thì h ok rồi anh ạ :) ,tks anh ^^

      Delete
    7. Uk. không có gì đây e ak.

      Delete
  34. Anh Nam xem hộ blog của em có đầy đủ commnet theo phân cấp nhưng lại không hiện khung comment. Bấm nút trả lời cũng không hiện thị. Không biết em đã xóa nhầm cái gì rôi. Anh Nam xem sơm trả lời em với. thank. Tên blog nè www.nhatthienkt.com

    ReplyDelete
  35. cái code của ad còn thiếu cái thẻ đóng của div ở cuối nhé.

    ReplyDelete