Khung bình luận blogger hầu như để code mặc định, ít người động chạm đến nó. Trong phần 3 này tôi sẽ hướng dẫn bạn cách tạo và cập nhật comment form, mở rộng thêm đó là cập nhật skin mới cho nó
Trong tiện ích Blog1 v2, comment form cũng được tách ra làm rất nhiều thẻ b:includable nhỏ, ta sẽ tác động đến các thẻ sau
Lần lượt từng thẻ 1 code sẽ như sau
1. <b:includable id='addComments'>
<b:includable id='addComments'> <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'> <b:message name='messages.postAComment'/> </a> </b:includable>
2. <b:includable id='commentAuthorAvatar'>
<b:includable id='commentAuthorAvatar'> <div class='avatar-image-container'> <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35' /> </div> </b:includable>
3. <b:includable id='commentDeleteIcon' var='comment'>
<b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <b:if cond='data:showCmtPopup'> <div class='goog-toggle-button'> <div class='goog-inline-block comment-action-icon'/> </div> <b:else/> <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'> <img src='https://resources.blogblog.com/img/icon_delete13.gif'/> </a> </b:if> </span> </b:includable>
4. <b:includable id='commentForm' var='post'>
<b:includable id='commentForm' var='post'> <div class='comment-form'> <a name='comment-form' /> <h4 id='comment-post-message'><data:messages.postAComment/></h4> <b:if cond='data:this.messages.blogComment != ""'> <p><data:this.messages.blogComment/></p> </b:if> <b:include data='post' name='commentFormIframeSrc' /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%' /> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>'); </script> </div> </b:includable>
5. <b:includable id='commentFormIframeSrc' var='post'>
<b:includable id='commentFormIframeSrc' var='post'> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' /> </b:includable>
6. <b:includable id='commentItem' var='comment'>
<b:includable id='commentItem' var='comment'> <div class='comment' expr:id='"c" + data:comment.id'> <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar' /> <div class='comment-block'> <div class='comment-author'> <b:if cond='data:comment.authorUrl'> <b:message name='messages.authorSaidWithLink'> <b:param expr:value='data:comment.author' name='authorName' /> <b:param expr:value='data:comment.authorUrl' name='authorUrl' /> </b:message> <b:else/> <b:message name='messages.authorSaid'> <b:param expr:value='data:comment.author' name='authorName' /> </b:message> </b:if> </div> <div expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'> <data:comment.body/> </div> <div class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </div> </div> </div> </b:includable>
7. <b:includable id='commentList' var='comments'>
<b:includable id='commentList' var='comments'> <div id='comments-block'> <b:loop values='data:comments' var='comment'> <b:include data='comment' name='commentItem'/> </b:loop> </div> </b:includable>
8. <b:includable id='commentPicker' var='post'>
<b:includable id='commentPicker' var='post'> <b:if cond='data:post.commentSource == 1'> <b:include data='post' name='iframeComments' /> <b:elseif cond='data:post.showThreadedComments' /> <b:include data='post' name='threadedComments' /> <b:else/> <b:include data='post' name='comments' /> </b:if> </b:includable>
9. <b:includable id='comments' var='post'>
<b:includable id='comments' var='post'> <section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-num-comments='data:post.numberOfComments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <b:include name='commentsTitle'/> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <b:include cond='data:post.comments' data='post.comments' name='commentList'/> </div> <b:if cond='data:post.commentPagingRequired'> <div class='paging-control-container'> <b:if cond='data:post.hasOlderLinks'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:messages.oldest/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:messages.older/> </a> </b:if> <span class='comment-range-text'> <data:post.commentRangeText/> </span> <b:if cond='data:post.hasNewerLinks'> <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:messages.newer/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:messages.newest/> </a> </b:if> </div> </b:if> <div class='footer'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='commentForm'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <b:include data='post' name='addComments'/> </b:if> </b:if> </div> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/> </div> </b:if> </section> </b:includable>
10. <b:includable id='commentsLink'>
<b:includable id='commentsLink'> <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'> <b:if cond='data:post.numberOfComments gt 0'> <b:message name='messages.numberOfComments'> <b:param expr:value='data:post.numberOfComments' name='numComments'/> </b:message> <b:else/> <data:messages.postAComment/> </b:if> </a> </b:includable>
11. <b:includable id='commentsTitle'>
<b:includable id='commentsTitle'> <h3 class='title'><data:messages.comments/></h3> </b:includable>
12. <b:includable id='iframeComments' var='post'>
<b:includable id='iframeComments' var='post'> <b:if cond='data:post.allowIframeComments'> <script expr:src='data:post.iframeCommentSrc' type='text/javascript' /> <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType' /> <b:include cond='!data:post.embedCommentForm' data='post' name='commentsLink' /> </b:if> </b:includable>
13. <b:includable id='threadedCommentForm' var='post'>
<b:includable id='threadedCommentForm' var='post'> <div class='comment-form'> <a name='comment-form' /> <h4 id='comment-post-message'><data:messages.postAComment/></h4> <b:if cond='data:this.messages.blogComment != ""'> <p><data:this.messages.blogComment/></p> </b:if> <b:include data='post' name='commentFormIframeSrc' /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%' /> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>'); </script> </div> </b:includable>
14. <b:includable id='threadedCommentJs' var='post'>
<b:includable id='threadedCommentJs' var='post'> <script async='async' expr:src='data:post.commentSrc' type='text/javascript' /> <b:template-script inline='true' name='threaded_comments' /> <script type='text/javascript'> blogger.widgets.blog.initThreadedComments( <data:post.commentJso/>, <data:post.commentMsgs/>, <data:post.commentConfig/>); </script> </b:includable>
15. <b:includable id='threadedComments' var='post'>
<b:includable id='threadedComments' var='post'> <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'> <a name='comments' /> <b:include name='commentsTitle' /> <div class='comments-content'> <b:include cond='data:post.embedCommentForm' data='post' name='threadedCommentJs' /> <div id='comment-holder'> <data:post.commentHtml/> </div> </div> <p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threadedCommentForm' /> <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' /> </div> </b:if> </section> </b:includable>
Sau khi định nghĩa tất cả thẻ xong ta gọi nó trong <b:includable id='postCommentsAndAd' var='post'>. Viết tiếp code
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
Kiểm tra kết quả
** Nâng cấp lên skin mới
Skin mới của blogger comment form có thể bắt gặp ở các theme mặc định của blogger. Trong bài này tôi sẽ hướng dẫn bạn cập nhật lên skin của theme contempo
Thêm b:templateUrl='indie.xml' vào thẻ <html ...>
Chèn tiếp đoạn code sau vào <b:skin ...>
/* <Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true" value="15px Roboto, sans-serif"/> <Variable name="robotoNormal16" description="Roboto Normal 16" type="font" default="16px Roboto, sans-serif" hideEditor="true" value="16px Roboto, sans-serif"/> <Variable name="robotoLightItalic15" description="Roboto Light Italic 15" type="font" default="italic 300 15px Roboto, sans-serif" hideEditor="true" value="italic 300 15px Roboto, sans-serif"/> <Variable name="robotoBold22" description="Roboto Bold 22" type="font" default="bold 22px Roboto, sans-serif" hideEditor="true" value="bold 22px Roboto, sans-serif"/> <Variable name="robotoBold30" description="Roboto Bold 30" type="font" default="bold 30px Roboto, sans-serif" hideEditor="true" value="bold 30px Roboto, sans-serif"/> <Variable name="robotoBold45" description="Roboto Bold 45" type="font" default="bold 45px Roboto, sans-serif" hideEditor="true" value="bold 45px Roboto, sans-serif"/> <Group description="Body"> <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif"/> <Variable name="body.text.color" description="Color" type="color" default="#757575" value="#757575"/> <Variable name="body.background.height" description="Background height" type="length" min="420px" max="640px" default="480px" value="480px"/> <Variable name="body.background" description="Background" color="$(body.background.color)" type="background" default="$(color) none repeat scroll top left" value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/> <Variable name="body.background.color" description="Body background color" type="color" default="#eee" value="#eeeeee"/> <Variable name="body.background.blur" description="Background blur" type="length" min="0px" max="50px" default="0px" value="0px"/> <Variable name="body.link.color" description="Link color" type="color" default="#2196f3" value="#2196f3"/> <Variable name="body.link.visited.color" description="Visited link color" type="color" default="$(body.link.color)" value="#2196f3"/> <Variable name="body.link.hover.color" description="Link Hover Color" type="color" default="$(body.link.color)" value="#2196f3"/> <Variable name="labels.text.color" description="Label text color" type="color" default="$(body.link.color)" value="rgba(0,0,0,0.54)"/> <Variable name="labels.background.color" description="Label background color" type="color" red="$(labels.text.color.red)" green="$(labels.text.color.green)" blue="$(labels.text.color.blue)" default="rgba($red, $green, $blue, 0.05)" value="#f7f7f7"/> </Group> <Group description="Posts" selector="div.widget.Blog"> <Variable name="posts.title.color" description="Post title color" type="color" default="#212121" value="#212121"/> <Variable name="posts.title.font" description="Post title font" type="font" default="$(robotoBold22)" value="bold 22px Roboto, sans-serif"/> <Variable name="posts.stream.title.font" description="Post title stream font" type="font" default="$(robotoBold30)" value="bold 30px Roboto, sans-serif"/> <Variable name="posts.background.color" description="Post background color" type="color" default="#fff" value="#ffffff"/> <Variable name="posts.text.font" description="Post text font" type="font" default="$(body.text.font)" value="15px Roboto, sans-serif"/> <Variable name="posts.text.color" description="Post text color" type="color" default="$(body.text.color)" value="#757575"/> <Variable name="posts.byline.color" description="Post byline color" type="color" default="rgba(0, 0, 0, 0.54)" value="rgba(0, 0, 0, 0.54)"/> <Variable name="blockquote.font" description="Blockquote font" type="font" default="$(robotoLightItalic15)" value="italic 300 15px Roboto, sans-serif"/> <Variable name="blockquote.color" description="Blockquote color" type="color" default="#444" value="#444444"/> <Variable name="posts.icons.color" description="Post icons color" type="color" default="#707070" value="#707070"/> <Variable name="tabs.font" description="Font" type="font" family="$(robotoNormal15.family)" size="$(robotoNormal15.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/> <Variable name="tabs.color" description="Text color" type="color" default="#ccc" value="#cccccc"/> <Variable name="tabs.selected.color" description="Selected color" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.overflow.background.color" description="Popup background color" type="color" default="$(posts.background.color)" value="#ffffff"/> <Variable name="tabs.overflow.color" description="Popup text color" type="color" default="$(posts.text.color)" value="#757575"/> <Variable name="tabs.overflow.selected.color" description="Popup selected color" type="color" default="$(posts.title.color)" value="#212121"/> </Group> */
Nếu gặp lỗi Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background tức biến này được định nghĩa 2 lần, bạn có thể đổi thành <Variable name="body1.background"...> để lưu được mẫu
Kết quả
Hết phần 3, hẹn gặp lại ở phần 4
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên