Hướng dẫn thiết kế blogspot căn bản - Tạo nút đăng nhận xét với hiệu ứng popup

Nút đăng nhận xét trong bài viết hiển thị ngoài trang chủ, trang label, trang lưu trữ,v..v.., gọi chung là nhóm trang chỉ mục. Khi ai đó nhấp ào nút popup sẽ bật lên hiển thị sẵn form nhận xét hay rõ hơn là iframe nhận xét. Nếu nhận xét được xuất bản trang sẽ chuyển hướng đến phần nhận xét của bài viết đó.

Popup hiển thị iframe nhận xét khi click vào nút đăng nhận xét

Tác dụng khi đặt nút nhận xét để rút gọn thời gian khi ai đó muốn nhận xét bài đã đăng hiển thị ngoài trang chỉ mục thay vì phải truy cập bài đó scroll đến phần nhận xét và nhập xuất bản nhận xét thay vào đó chỉ cần nhấp vào nút popup bật lên hiển thị sẵn iframe đăng và xuất bản nhận xét.

Để popup hiển thị iframe khi click vào nút đăng nhận cần hai thao tác:

Popup bật lên
Load iframe hiển thị trong popup

Nút đăng nhận xét không chiếm nhiều vùng hiển thị cũng không ảnh hưởng đến thời gian tải trang vì chỉ khi nào nhấp vào nút script mới được tải để tạo iframe nhận xét.

Cơ chế load iframe nhận xét mặc định của Blogger cần tải 3 link script, trong đó có một link script chính và 2 link script phụ tạo iframe. Với link script chính chỉ cần tải một lần còn 2 link script phụ bắt buộc phải được tải mỗi khi click vào nút nhận xét.

Nếu nhận xét được xuất bản, trang sẽ chuyển hướng đến phần nhận xét của bài đăng.

Đề xuất: Hướng dẫn load comment iframe và fix lỗi reply comment trong template layout v3

Các bước thực hiện:

Bước 1: Tạo nút nhận xét

Đặt đoạn mã XML của nút vào vị trí muốn hiển thị trong post tại nhóm trang chỉ mục

<b:if cond='data:post.allowComments'>

  <span aria-expanded='false' aria-pressed='false' class='post-a-comment comment-icon has-svg-icon' expr:aria-label='data:messages.postAComment' expr:data-href='data:post.commentFormIframeSrc' expr:title='data:messages.postAComment' role='button' tabindex='0'></span>

</b:if>

Lưu ý: Thẻ liên kết nhận xét data:post.commentFormIframeSrc chỉ hiển thị trong tiện ích Bài đăng trên blog (widget Blog), nếu bạn muốn đặt nút nhận xét trong tiện ích PopularPosts hay FeaturedPost bạn cần xả thẻ liên kết mặc định này ra như sau:

Ví dụ với nút nhận xét ở trên khi trích xuất HTML liên kết có dạng

<span aria-expanded="false" aria-label="Đăng nhận xét" aria-pressed="false" class="post-a-comment comment-icon has-svg-icon" data-href="https://www.blogger.com/comment-iframe.g?blogID=1452417794068999357&amp;postID=9201692134114803883&amp;skin=emporio" role="button" tabindex="0" title="Đăng nhận xét"></span>

Trong đó, liên kết nhận xét như sau:

https://www.blogger.com/comment-iframe.g?blogID=1452417794068999357&amp;postID=9201692134114803883&amp;skin=emporio

Mình thay thế thẻ liên kết data:post.commentFormIframeSrc bằng thẻ liên kết ở trên như sau:

<b:if cond='data:post.allowComments'>

  <span aria-expanded='false' aria-pressed='false' class='post-a-comment comment-icon has-svg-icon' expr:aria-label='data:messages.postAComment' expr:data-href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id + "&amp;skin=emporio"' expr:title='data:messages.postAComment' role='button' tabindex='0'></span>

</b:if>

Đọc thêm: Hướng dẫn chỉnh sửa widget PopularPosts và FeaturedPost version 2

Bước 2: Đặt script trước thẻ đóng </body>

<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isMultipleItems'>

<script>//<![CDATA[

  function load_script(){

    var src=document.createElement('script')

    src.setAttribute('async','')

    src.setAttribute('src','https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js')

    if(typeof src!='undefined')document.getElementsByTagName('body')[0].appendChild(src)

  } 

  function post_a_comment(){

    var $this=$(this),url=$this.attr('data-href'),

    modal_content='<div class="modal--confirm comment-diaglog"><div class="modal--dialog"><div class="_3em"></div><div class="modal--content"><div class="modal--header"><div class="_mht">Đăng nhận xét cho nội dung này</div><div aria-label="close" class="_mhc modal--icon has-svg-icon has-hover modal--close" role="button" tabindex="0"></div></div><div class="modal--body"><div class="comment-form"><a href='+url+' id="comment-editor-src"></a><div class="comment-iframe"><iframe class="blogger-iframe-colorize blogger-comment-from-post" id="comment-editor" name="comment-editor" src="" title="comment iframe"></iframe></div></div></div><div class="modal--footer"><button aria-label="close" class="primary has-hover modal--close" type="button">Đóng</button></div></div><div class="_3em"></div></div></div>'

    $this.attr({'aria-expanded':'true','aria-pressed':'true'})

    $(modal_content).appendTo('body')

    $('.modal--confirm.comment-diaglog').fadeIn('slow',function(){$(this).addClass('show')})

    $('.modal--close').click(function(){

      $this.attr({'aria-expanded':'false','aria-pressed':'false'})

      $('.modal--confirm.comment-diaglog').removeClass('show')

      setTimeout(function(){$('.modal--confirm.comment-diaglog').remove()},200)

    })

    BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')

  }

  window.addEventListener('load',function(){

    $(document).off('click','.post-a-comment',load_script).one('click','.post-a-comment',load_script)

    $(document).off('click','.post-a-comment',post_a_comment).on('click','.post-a-comment',post_a_comment)

  })

//]]></script>

</b:if>

Đọc nhiều: Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js

Bước 3: Đặt css trước thẻ đóng </head>

<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isMultipleItems'>

<b:tag name='style'>/* <![CDATA[ */

*{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;text-rendering:geometricPrecision}

.has-svg-icon:before{background-size:100%;content:"";display:inline-block;vertical-align:middle}

.modals-dialog{box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149);-webkit-font-smoothing:antialiased;letter-spacing:.2px;-webkit-align-items:center;align-items:center;background-color:#202124;border:none;-webkit-border-radius:4px;border-radius:4px;bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;left:0;margin:20px;max-width:640px;min-height:50px;padding:8px 15px;position:fixed;right:auto;text-align:left;top:auto;white-space:normal;z-index:10000}

.modals-dialog-content{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:1rem;font-weight:400;color:#fff}

.modals-dialog-buttons{vertical-align:middle;margin-left:15px}

.modal--confirm{background-color:rgba(0, 0, 0, 0.5);position:fixed;right:0;top:0;bottom:0;left:0;z-index:5000;opacity:0;transition:opacity .15s cubic-bezier(0.4,0.0,0.2,1) .15s}

.modal--target{display:none}

.modal--confirm.show{transition:opacity .05s cubic-bezier(0.4,0.0,0.2,1);opacity:1}

.modal--dialog{-webkit-box-align:center;box-align:center;align-items:center;display:flex;-webkit-box-orient:vertical;box-orient:vertical;flex-direction:column;bottom:0;left:0;padding:0 5%;position:absolute;right:0;top:0;-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-ms-transform:scale(0,0);-o-transform:scale(0,0);transform:scale(0,0);transform-origin:center center;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}

.modal--confirm.show .modal--dialog{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1)}

.modal--confirm form{margin:0}

.modal--content{background-color:#fff;-webkit-box-align:stretch;align-items:stretch;display:flex;-webkit-box-orient:vertical;flex-direction:column;transition:transform .225s cubic-bezier(0.0,0.0,0.2,1);position:relative;border-radius:3px;box-shadow:0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);max-width:600px;overflow:hidden;flex-shrink:1;max-height:100%;font-family:Roboto,Arial,sans-serif;font-size:inherit;color:currentColor}

@media(min-width:551px){.modal--content{min-width:510px}}

@media(max-width:550px){.modal--content{width:100%}}

._3em{display:block;height:3em;flex-grow:1}

._cs{padding:10px 0 0 22px}

.modal--header{background-color:#f5f6f7;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;position:relative;padding:10px 12px;border-bottom:1px solid #e5e5e5;border-radius:3px 3px 0 0;color:currentColor;font-weight:bolder;line-height:normal}

.modal--header ._mht{margin-right:auto}

.modal--header ._mhc{margin-left:auto}

.modal--icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid;border-color:transparent}

.modal--icon:hover,.modal--icon:focus{border-color:#2d2d2d}

.modal--icon:focus{outline:none!important}

.modal--icon:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='21px' tabindex='0' viewBox='0 0 24 24' width='21px'%3E%3Cpath fill='%23707070' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'%3E%3C/path%3E%3C/svg%3E");width:21px;height:21px}

.modal--content p:not(:last-child){margin-bottom:.5rem}

.modal--body{background:#fff;padding:12px;overflow:hidden;overflow-y:auto}

.modal--body>div{line-height:1.6rem}

.modal--body>div:not(:last-child)>p{margin-bottom:1rem}

.modal--body input[type="radio"]{margin:0 5px 0 0}

.modal--footer{background:#fff;margin:0 12px;padding:12px 0;border-top:1px solid #dddfe2;text-align:right}

.modal--footer button{position:relative;display:inline-block;min-width:50px;padding:0 8px;border:1px solid;white-space:nowrap;height:26px;line-height:26px;border-radius:2px;-webkit-font-smoothing:antialiased;font:600 14px Roboto,Arial,sans-serif;justify-content:center;text-align:center;text-shadow:none;vertical-align:middle;transition: 200ms cubic-bezier(.08,.52,.52,1) background-color, 200ms cubic-bezier(.08,.52,.52,1) box-shadow, 200ms cubic-bezier(.08,.52,.52,1) transform}

.modal--footer button:not(.primary){background-color:#f5f6f7;border-color:#ccd0d5;color:currentColor}

.modal--footer button[type="submit"],.modal--footer button.primary{background-color:#4267b2;border-color:#4267b2;color:#fff}

.modal--footer button+button{margin-left:5px}

.modal--footer button:hover,.modal--footer button:focus{outline:none}

.modal--body .comment-form{float:left;width:100%}

.modal--body iframe{width:100%;border:0;min-height:90px}

.comment-icon{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}

.comment-icon:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z' fill='%23707070'%3E%3C/path%3E%3C/svg%3E");width:13px;height:13px}

.comment-icon{width:32px;height:32px;border-radius:50%}

.comment-icon:hover{background:rgba(60,64,67,0.08)}

.comment-icon[aria-pressed=true],.comment-on-click:focus,.comment-on-click:active{background:rgba(95,99,104,0.24)}

.comment-icon:focus{outline:none!important}

@media(min-width:1025px){.modal--icon:hover,.modal--footer button:hover,comment-icon:hover{cursor:pointer}}

/* ]]> */</b:tag>

</b:if>

Xem thêm các bài viết hướng dẫn thiết kế blogspot căn bản khác:

Bài cùng chuyên mục

Bài cùng tác giả