Share code widget recent comments

Xin chào các bạn, chào mừng các bạn đã đến với bài viết tiếp theo của Code Pro. Tình hình là sau vài ngày edit template Median UI, mình phát hiện template này thiếu một cái khá là cần thiết (đối với mình) đó chính là phần bình luận gần đây (recent comment)

Sau một hồi tìm tìm kiếm trên mạng và thử rất nhiều mẫu nhưng mình không ưng cái nào. Không phải mình chê xấu đâu mà là thật sự nó không hợp với temp mình đang dùng. Nên là mình quyết định bê một mẫu widget bên BSW về và css lại toàn bộ. Mình không biết nhiều về css nên việc chỉnh sửa mất khá nhiều thời gian (mất nguyên buổi chiều)

Và đây là thành quả:

Nhìn nó khá hợp với template Median UI và mình cũng làm luôn phần dark mode rồi. Widget này theo cá nhân mình chỉ hợp với nhưng ai sử dụng Median. Nên là nếu mọi người dùng template khác up lên thấy xấu thì cũng đừng chửi mình nha!

Đây là một widget gọn nhẹ giúp hiện ra những bình luận mới nhất (mặc định là 5 bình luận và bạn có thể chỉnh sửa tuỳ ý), giúp bạn dễ dàng quản lý được ai đã bình luận trên trang blog của mình để tiện việc theo dõi và trả lời một cách nhanh chóng. Demo xem tại blog của mình luôn!

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

• Bước 1: Vào phần Bố cục, tạo một widget HTML/Javascript.
• Bước 2: Dán toàn bộ code phía dưới vào.

<!-- Recent comments by code.pro.vn -->
<link href='//cdn.leanhduc.pro.vn/css/blog/codeprovn/recent-comment.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="//cdn.leanhduc.pro.vn/js/blog/codeprovn/recent-comment.js"></script>
<script type="text/javascript" src="//cdn.leanhduc.pro.vn/js/blog/codeprovn/total-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=idbcomments&amp;max-results=5"></script>
<div class='idbcomments'>
	<div class='left'>
		Hiện có <b><span id='total-comments'></span></b> bình luận
	</div>
	<div class='right'>
		<a href='/p/recent-comment.html' target='_blank' title='Xem bình luận'>Xem thêm<i class='fa fa-angle-right' style='margin:0 0 0 5px'/></a>
	</div>
</div>

• Bước 3: Lưu tiện ích và nhớ chỉnh lại một số thông số để phù hợp với blog của bạn.

Tạo trang chứa tổng hợp bình luận

• Bước 1: Vào blog, tạo trang mới
• Bước 2: Chọn chế độ xem HTML
• Bước 2: Dán toàn bộ code phía dưới vào.

<!-- Total comments by code.pro.vn -->
<link href='//cdn.leanhduc.pro.vn/css/blog/codeprovn/recent-comment.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="//cdn.leanhduc.pro.vn/js/blog/codeprovn/recent-comment.js"></script>
<script type="text/javascript" src="//cdn.leanhduc.pro.vn/js/blog/codeprovn/total-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=idbcomments&amp;max-results=50"></script>

Chú ý

• Thay đổi số lượng hiển thị tại: max-results=5 - trong đó 5 là số lượng bạn muốn hiển thị
• Thay đổi: /p/recent-comment.html thành link trang chứa tổng hợp bình luận của bạn

Đây là một widget gọn và nhẹ giúp bạn dễ dàng quản lý được nhận xét/bình luận trên blog. Ngoài ra mình có code thêm phần tổng số bình luận và dẫn đến trang mới cho phép xem toàn bộ bình luận.

Nếu thấy hay hãy share và comment ủng hộ cho Code Pro nhé. Chúc bạn ngày tốt lành và tràn đầy năng lượng!

Copyright @ Code Pro

0 Share Share Send by Email Copy URL