Your Quote Will Be Here
Thứ Tư, 10 tháng 9, 2014
Thứ Năm, 8 tháng 5, 2014
Tạo Thread comment nhiều cấp Ves 4 cho Blogspot
Bạn luôn muốn có một mẫu Thread comment có thể phân nhiều cấp để blog của bạn chuyên nghiệp. Tiếp theo ves 3 hôm nay namkna sẽ giới thiệu cho các bạn thêm style 4 mới được tùy biến giúp mẫu commnet của bạn cố thể phân nhiều cấp. Về cơ bạn style này giống với style 2 và 3 mà mình đã giới thiệu trước đây. Các bạn có thể xem ảnh minh họa bên dưới (đẹp phải không).
☼ Tính năng mới của Thread comment ves 4:
Phiên bản này được namkna tùy biến từ mẫu VinaLuv của Tiến Nguyên nhưng đã được mình tùy chỉnh giao diện cho khác đi nhìn đẹp và bắt mắt hơn. Vơi các tính năng mới như:
» Thêm phần viền và nền cho phần nội quy của khung comment.» Dùng bộ Ecomotion mới.
» Sử dụng thư viện Jquery do vậy load mượt hơn.
» 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.
»Tích hợp phân trang cho bài viết có trên 200 comment.
☼ Cách Chèn Thread comment nhiều cấp vào Blogspot Ver 3:
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'> và</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'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h4>
</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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<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'>
<div id='comment-holder'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>
<div class='cm_head'>
<div class='comment_avatar'>
<data:comment.authorAvatarImage/>
</div>
<div class='comment_reply'>
<a expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Reply</a>
</div>
</div>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<div class='comment_header'>
<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'><data:comment.timestamp/></span>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<div class='para visitor-comment' itemprop='text'><data:comment.body/></div>
</div>
<div class='clear'/>
<div class='comment_child'/>
<a expr:name='"r_"+data:comment.anchorName'/>
<div class='comment_reply_form' expr:id='"r_f_"+data:comment.anchorName'>
</div>
</div>
</b:loop> </div>
</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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<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'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
</div>
<!--b:include data='post' name='threaded_comment_js'/-->
<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 = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
/*
***************************************************************
Project name: VinaLuv - multi-threaded comment design
Author name: Tien Nguyen Van
Site name: http://www.bloggeritems.com
Lisence: Creative Commons
Version 1.2
***************************************************************
*/
//Global setting
Config.maxThreadDepth = 5//How threaded level that you want
Display_Emo = true//Display emoticon or not? set "false" to no display
Replace_Youtube_Link = true //Auto replace youtube link to iframe embedded, choose "false" to disable
Replace_Image_Link = true //Auto replace an image link choose "false" to disable.
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
//Config emoticons declare
Emo_List = [
];
//Don't modify this , we use this to get feed source
var Cur_Cform_Hdr = '.comment_form';
var Cur_Cform_Url = $('#comment-editor').attr('src');
function trim(str) {
var whitespace = ' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
for (var i = 0; i < str.length; i++) {
if (whitespace.indexOf(str.charAt(i)) != -1) {
str = str.substring(0, i);
break
}
}
return str
}
$('#comment_block .comment_body p').html(function (index, oldhtml) {
if (Replace_Youtube_Link) {
var search_key = 'http://www.youtube.com/watch?v=';
var check_index = oldhtml.indexOf(search_key);
while (check_index != -1) {
ht = oldhtml.substring(check_index);
yt_link = trim(ht);
var yt_code_index = yt_link.indexOf('&');
var yt_code = '';
if (yt_code_index == -1) {
yt_code = yt_link.substring(search_key.length)
} else {
yt_code = yt_link.substring(search_key.length, yt_code_index)
}
var yt_video = '<iframe class="comment_youtube" src="http://www.youtube.com/embed/' + yt_code + '?autohide=1" frameborder="0" allowfullscreen></iframe>';
oldhtml = oldhtml.substring(0, check_index) + yt_video + oldhtml.substring(check_index + yt_link.length);
check_index = oldhtml.indexOf(search_key);
if (check_index == -1) {
search_key = 'https://www.youtube.com/watch?v=';
check_index = oldhtml.indexOf(search_key)
}
}
}
if (Replace_Image_Link) {
var save_html = '';
var temp_html = oldhtml;
for (var i = 0; i < Replace_Image_Ext.length; i++) {
var search_key = '.' + Replace_Image_Ext[i];
var upper_html = temp_html.toUpperCase();
var check_index = upper_html.indexOf(search_key);
while (check_index != -1) {
img_src = temp_html.substring(0, check_index + search_key.length);
upper_html = img_src.toUpperCase();
var http_search = 'HTTP://';
var find_http = upper_html.indexOf(http_search);
var save_http = '';
while (find_http != -1) {
save_http = http_search.toLowerCase();
img_src = img_src.substring(find_http + http_search.length);
upper_html = img_src.toUpperCase();
find_http = upper_html.indexOf(http_search)
}
http_search = 'HTTPS://';
upper_html = img_src.toUpperCase();
find_http = upper_html.indexOf(http_search);
while (find_http != -1) {
save_http = http_search.toLowerCase();
img_src = img_src.substring(find_http + http_search.length);
upper_html = img_src.toUpperCase();
find_http = upper_html.indexOf(http_search)
}
if (save_http == '' || img_src.length < 6) {
break
}
img_src = save_http + img_src;
save_html += temp_html.substring(0, check_index + search_key.length - img_src.length) + '<img src="' + img_src + '" class="comment_img"/>';
temp_html = temp_html.substring(check_index + search_key.length);
upper_html = temp_html.toUpperCase();
check_index = upper_html.indexOf(search_key)
}
}
oldhtml = save_html + temp_html
}
if (Display_Emo) {
var length = Emo_List.length;
if (length % 2 == 1) {
length--
}
for (var i = 0; i < length; i += 2) {
var img_html = '<img src="' + Emo_List[i + 1] + '" class="comment_emo"/>';
check_index = oldhtml.indexOf(Emo_List[i]);
while (check_index != -1) {
oldhtml = oldhtml.substring(0, check_index) + img_html + oldhtml.substring(check_index + Emo_List[i].length);
check_index = oldhtml.indexOf(Emo_List[i])
}
}
}
if (Replace_Force_Tag) {
var length = Force_Tag.length;
if (length % 2 == 1) {
length--
}
for (var i = 0; i < length; i += 2) {
while (1) {
var temp_html = oldhtml.toLowerCase();
check_index = temp_html.indexOf(Force_Tag[i]);
if (check_index != -1) {
oldhtml = oldhtml.substring(0, check_index) + Force_Tag[i + 1] + oldhtml.substring(check_index + Force_Tag[i].length)
} else {
break
}
}
}
}
return oldhtml
});
$('.comment_emo_list').html(function (index, oldhtml) {
if (Display_Emo) {
var length = Emo_List.length;
if (length % 2 == 1) {
length--
}
var newhtml = '';
for (var i = 0; i < length; i += 2) {
var img_code = '<span>' + Emo_List[i] + '</span>';
var img_html = '<img src="' + Emo_List[i + 1] + '" class="comment_emo"/>';
newhtml += '<div class="item">' + img_html + img_code + '</div>'
}
return newhtml
}
});
$('.comment_wrap .comment_body p').html(function (i, h) {
temp = h.toLowerCase();
index = temp.indexOf('@<a href="#c');
if (index != -1) {
index_tail = temp.indexOf('</a>', index);
if (index_tail != -1) {
h = h.substring(0, index) + h.substring(index_tail + 4)
}
}
return h
});
function Valid_Par_Id(par_id) {
r = par_id.indexOf('c');
if (r != -1) par_id = par_id.substring(r + 1);
return par_id
}function Cform_Ins_ParID(par_id) {
par_id = '&parentID=' + par_id + '#%7B';
n_cform_url = Cur_Cform_Url.replace(/#%7B/, par_id);
return n_cform_url
}function Reset_Comment_Form() {
html = $(Cur_Cform_Hdr).html();
$(Cur_Cform_Hdr).html('');
Cur_Cform_Hdr = '.comment_form';
$(Cur_Cform_Hdr).html(html);
$('#comment-editor').attr('src', Cur_Cform_Url)
}function Display_Reply_Form(e) {
par_id = $(e).attr('id');
par_id = Valid_Par_Id(par_id);
html = $(Cur_Cform_Hdr).html();
if (Cur_Cform_Hdr == '.comment_form') {
reset_html = '<a href="#origin_cform" onclick="Reset_Comment_Form()">' + Msgs.addComment + '</a><a name="origin_cform"/>';
$(Cur_Cform_Hdr).html(reset_html)
} else {
$(Cur_Cform_Hdr).html('')
}
Cur_Cform_Hdr = '#r_f_c' + par_id;
$(Cur_Cform_Hdr).html(html);
$('#comment-editor').attr('src', Cform_Ins_ParID(par_id))
}
cur_url = window.location.href;
search_formid = '#comment-form_';
search_index = cur_url.indexOf(search_formid);
if (search_index != -1) {
ret_id = cur_url.substring(search_index + search_formid.length);
Display_Reply_Form('#rc' + ret_id)
}
for (var i = 0; i < Items.length; i++) {
if ('parentId' in Items[i]) {
var par_id = Items[i].parentId;
var par_level = parseInt($('#c' + par_id + ':first').attr('level'));
$('#c' + par_id + ' .comment_child:first').html(function (index, oldhtml) {
var child_id = Items[i].id;
if (par_level >= Config.maxThreadDepth) {
$('#c' + child_id + ':first .comment_reply').remove()
}
var child_html = $('#c' + child_id + ':first').html();
child_html = '<div class="comment_wrap" id="c' + child_id + '" level="' + (par_level + 1) + '">' + child_html + '</div>';
$('#c' + child_id).remove();
return (oldhtml + child_html)
})
}
}
//]]>
</script>
» Tùy chỉnh:
- Config.maxThreadDepth = 5; là số cấp comment sẽ hiển thị. mặc định mình để lad 5. bạn có thể thay thành số khác. Tuy nhiên không nên phân quá nhiều cấp nếu độ rộng blog của bạn khiêm tốn.
- Display_Emo = true; Cài đặt hiện thị mặt cười emoticons. Nếu không muốn hiển thị hãy thay true thành false.
- Replace_Youtube_Link = true; Cài đặt tự động chuyển link video từ trang youtobe thành trình phát video trên comment. Nếu không muốn hiển thị hãy thay true thành false.
- Replace_Image_Link = true;Cài đặt tự động chuyển link hình ảnh từ thành hình ảnh trên comment. Nếu không muốn hiển thị hãy thay true thành false.
#comments h4{text-indent:-999em;height:3px;background:#0186CB;margin-top:26px}
.unneeded-paging-control{display:none}
.comment_child .comment_wrap{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Zx76z17ohpoRWJCGokXa29pbyrNGxfUwUdo44uE81buVNDLCYPrg8Wyn4Ww3Ne7fLHgt4DAZU-2PiDFB4-m5cBdgbD1wiIDa7qz1SYkJGEKZKHgzJyNWYvG0dG5xohQVBoUHo05IBxxP/s1600/reply_bg-thread-commet-namkna.png) no-repeat;padding:0 0 0 20px;margin-left:10px}
.comment_inner{margin:10px 0 0 0;padding:1.26em;border:1px solid #3c3c3c;background-color:#333;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black;overflow:hidden;position:relative;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;transition:all 1s ease-out}
.comment_header{border:1px solid #555;background-color:#444;padding:.5em .8em}
.comment_name{font-weight:bold;font-style:normal;float:left}
.comment_name a{color:#fff;text-decoration:none;text-shadow:0 0 1px #DDD}
.comment_name a:hover{color:#F90}
.comment_service{font-size:84%;font-style:italic;line-height:1.8;color:#888;float:right}
.comment_reply a{color:#fff!important;}
.comment_reply{display:block;width:auto;margin:0 0 1px 3px;padding:2px 7px 3px;text-transform:none;color:#fff!important;background-color:#527915;background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));font:inherit;font-size:80%;line-height:normal;-webkit-box-shadow:0 2px 2px black;-moz-box-shadow:0 2px 2px black;box-shadow:0 2px 2px black;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-transition:all .16s ease-in-out;-moz-transition:all .16s ease-in-out;-ms-transition:all .16s ease-in-out;-o-transition:all .16s ease-in-out;transition:all .16s ease-in-out}
.comment_reply:hover{color:white!important;margin:0 0 1px -3px!important;padding:2px 10px 3px 7px!important;outline:none!important;text-decoration:none!important}
.comment_reply:active{position:relative;top:1px}
.comment_body p{font-size:12px;margin:10px 15px;color:#666;word-wrap:break-word}
.comment_avatar img{border-width:1px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box}
.comment_avatar .avatar-image-container{margin:0 0 3px;border:1px solid #3c3c3c;padding:4px;width:45px;height:45px;max-width:100%;max-height:100%;float:none;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black;background-color:#666;-webkit-background-clip:content-box;-moz-background-clip:content-box;background-clip:content-box;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.comment-form{max-width:100%!important}
#comment-editor{width:101%!important}
.cm_wrap #comment-form{margin:4px 0 0;border:1px solid #3c3c3c;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black}
.comment_form a{text-decoration:none;font-weight:bold;font-size:12px}
.comment_form a:hover{text-decoration:none}
.comment_reply_form{padding:0 0 0 20px}
.comment_reply_form .comment-form{margin:4px 0 0;padding:2%;border:1px solid #3c3c3c;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black}
.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:45px!important;height:45px!important;max-width:45px!important}
.deleted-comment{padding:10px;display:block;color:#CCC}
.cm_head{width:58px;float:left}
.para{border:1px solid #555;background-color:#444;padding:.5em .8em;margin-top:3px}
.comment_admin{border:3px solid transparent;border-color:transparent #900 #900 transparent}
.fbcm{width:100%;overflow-x:hidden;max-height:500px}
.emo{height:25px}
#comment-holder pre,#comment-holder i[rel="pre"]{display:block;font:normal 12px Monaco,"Courier New",Courier,monospace !important;padding:0.5em 0.5em 0.5em 1em;background-color:#002b36;border-left:4px solid #268bd2;position:relative;overflow:auto;white-space:pre;word-wrap:normal !important}
#comment-holder blockquote,#comment-holder b[rel="quote"]{display:block;font-weight:normal;position:relative;background-color:#5D73B5;color:white;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 0 rgba(0,0,0,0.2);margin:.75em 0;padding:15px 20px}
#comments blockquote:before,#comments b[rel="quote"]:before{content:"";width:0;height:0;position:absolute;bottom:100%;right:15px;border-color:transparent transparent #5D73B5;border-style:solid;border-width:7px}
.comments .note,em[rel="note"]{display:block;padding:5px 10px;border:1px solid black;background-color:#222;background-image:-webkit-linear-gradient(#333,#222);background-image:-moz-linear-gradient(#333,#222);background-image:-ms-linear-gradient(#333,#222);background-image:-o-linear-gradient(#333,#222);background-image:linear-gradient(#333,#222);-webkit-box-shadow:0 0 0 1px #555;-moz-box-shadow:0 0 0 1px #555;box-shadow:0 0 0 1px #555;color:#ccc;font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif;text-shadow:0 1px 0 black}
.comments a.allow,i[rel="anchor"]{font-size:97%;color:#5687B8}
Chúc thành công!
Đăng ký:
Bài đăng (Atom)
