Hướng dẫn tạo lazy load cho khung comment và đưa khung comment lên đầu cho blog

byThiGanSa

3

Hiện nay việc tối ưu tải trang cho blogspot đang được nhiều bạn quan tâm chú ý. Một trong số đó là tạo lazy load cho những phần không quan trọng khi tải bài đăng lên màn hình. Ở bài này mình sẽ hướng dẫn cho các bạn mẹo hay cách tại lazy load cho mục bình luận khiến cho trang bài đăng được tải lên nhẹ hơn và mượt hơn. Các bạn lưu ý là khi tải bài lên thì mục bình luận sẽ không cần phải được tải lên ngay lập tức nhé. Vì lúc đó độc giả chú tâm đến tiêu đề, nội dung quan trọng bên trên hơn. Do đó phần comment có thể được tải chậm lên sau cũng không ảnh hưởng đến trải nghiệm cho người đọc bao nhiêu cả.

Phần bình luận của blog bao gồm hai phần là khung comment và nội dung comment. Khi bài đăng không có bình luận nào thì chỉ có khung comment mà thôi. Còn khi bài đăng có bình luận thì đó là nội dung comment.

{tocify} $title={Nội Dung Chính}

Cách làm mình sẽ hướng dẫn cho hai template kiểu cũ và kiểu mới nhất bây giờ cho các bạn dễ làm

Vào chỉnh sửa mẫu template chọn chuyển đến tiện ích Blog1

I. ÁP DỤNG VỚI BLOG LAYOUT V1 & WIDGET V1 HOẶC ĐÃ NÂNG CẤP BLOG LAYOUT LÊN V2, V3 NHƯNG VẪN GIỮ WIDGET V1

Bước 1: Mở rộng thẻ <b:includable id='comment-form' var='post'> (Bài viết không có nhận xét sẽ load thẻ này) tìm thay thế nội dung bên dưới:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>

thành nội dung:

<script>//<![CDATA[
$(window).on('load', function() {
$('.comment-form').addClass('spinner').addClass('load')
setTimeout(function() {
$('.comment-form').append("<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>");
$.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0')
$('.comment-form').removeClass('spinner').removeClass('load')
})
}, 2000)
})
//]]></script>

Bước 2: Làm tương tự như Bước 1 với thẻ <b:includable id='threaded-comment-form' var='post'> (Bài viết có nhận xét sẽ load thẻ này)

Bước 3: Mở rộng thẻ <b:includable id='threaded_comment_js' var='post'> (Bài viết có nhận xét sẽ load thẻ này) thay hết nội dung bên trong thành:

<script>//<![CDATA[
$('.comments-content').addClass('hidden')
$(window).on('load', function() {
setTimeout(function() {
$.getScript('//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js').done(function() {
$('.comments-content').removeClass('hidden')
})
}, 2000)
})
//]]></script>
<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ước 4: Mở rộng thẻ <b:includable id='threaded_comments' var='post'> (Đưa nội dung nhận xét nằm dưới khung nhận xét) di chuyển nội dung bên dưới:

<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>

nằm trên nội dung:

<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/>
</div>
</div>

thành đoạn HTML như sau:

<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>
<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/>
</div>
</div>

II. ÁP DỤNG VỚI BLOG LAYOUT V2, V3 & WIDGET V2

Bước 1: Mở rộng thẻ <b:includable id='commentForm' var='post'> (Bài viết không có nhận xét sẽ load thẻ này) tìm thay thế nội dung bên dưới:

<data:post.cmtfpIframe/>

BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');

</script>

thành nội dung:

<script>//<![CDATA[
$(window).on('load', function() {
$('.comment-form').addClass('spinner').addClass('load')
setTimeout(function() {
$('.comment-form').append("<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='' height='93px' width='100%'></iframe>");
$.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')
$('.comment-form').removeClass('spinner').removeClass('load')
})
}, 2000)
})
//]]></script>

Bước 2: Làm tương tự như Bước 1 với thẻ <b:includable id='threadedCommentForm' var='post'> (Bài viết có nhận xét sẽ load thẻ này)

Bước 3: Mở rộng thẻ <b:includable id='threadedCommentJs' var='post'> (Bài viết có nhận xét sẽ load thẻ này) thay hết nội dung bên trong thành:

<script>//<![CDATA[
$('.comments-content').addClass('hidden')
$(window).on('load', function() {
setTimeout(function() {
$.getScript('//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js').done(function() {
$('.comments-content').removeClass('hidden')
})
}, 2000)
})
//]]></script>
<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ước 4: Mở rộng thẻ <b:includable id='threadedComments' var='post'> (Đưa nội dung nhận xét nằm dưới khung nhận xét) di chuyển nội dung bên dưới:

<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threadedCommentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>

nằm trên nội dung:

<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threadedCommentJs'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>

thành đoạn HTML như sau:

<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threadedCommentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threadedCommentJs'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>

III. ĐOẠN CODE CSS SỬ DỤNG CHUNG

.comments-content.spinner:before {
content:'';
box-sizing:border-box;
position:absolute;
top:45%;
left:47%;
width:36px;
height:36px;
border-radius:50%;
border:3px solid hsl(0,0%,53.3%);
border-right-color:transparent;
animation:spinner .9s linear infinite;
-webkit-animation:spinner .9s ease-in-out infinite;
}
.comment-form.load {
position: relative;
height:200px;
width:100%;
}
@keyframes spinner {
to {
transform:rotate(360deg);
}
}
@-webkit-keyframes spinner {
to {
-webkit-transform:rotate(360deg);
}
}
.comments-content.hidden {
display:none;
}

IV. LƯU Ý

Trong mẫu template cần có thư viện link jquery.js nếu chưa có thì thêm trước thẻ </head>

Tham khảo https://www.facebook.com/kequaduongvodanh

3 Nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .
✪★ Chúc các bạn có một năm Nhâm Dần 2022 🐯 nhiều thành công tốt đẹp!