Thêm thời gian đọc ước tính vào bài viết blogspot

Anh Trai Nắng
0
Blogger Tips - Cách thêm thời gian đọc ước tính vào bài viết blogspot đơn giản.

Bài viết này mình sẽ hướng dẫn các bạn thêm thời gian đọc (Reading time) vào bài viết trên Blogger hoặc các nền tảng khác như Wordpress cũng có thể áp dụng được.

Thêm thời gian đọc ước tính vào bài viết blogspot
Thêm thời gian đọc ước tính vào bài viết blogspot.

Cách thêm thời gian đọc ước tính vào bài viết blogspot

Hiển thị thời gian đọc ước tính cho các bài viết là một ý tưởng hay. Nó cung cấp cho độc giả blog của bạn biết được cụ thể về lượng thời gian họ cần dành để đọc bài viết đó là bao lâu.

Chúng ta sẽ sử dụng một đoạn javascipt đơn giản để làm điều này.

Thêm thời gian đọc ước tính vào bài viết blogspot
Ví dụ minh họa.

Đăng nhập trang quản trị Blogger > Chủ đề > Chỉnh sửa HTML.

Chèn đoạn code sau vào trước thẻ </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
    var txt = $(".post-full-content")[0].textContent,
    wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
    var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;
    var readingTimeAsString = readingTimeInMinutes + " phút đọc";
    $('article .reading-time').html(readingTimeAsString);
});
</script>

Thêm đoạn CSS trước ]]></b:skin>

.reading-time:before {
  content: 'Thời gian đọc:';
  margin-right: 3px;}

Chèn đoạn code bên dưới nơi bạn muốn hiển thị thời gian đọc.

<div class="reading-time"></div>

Lưu lại Template và xem kết quả. Có thể canh chỉnh lại một số CSS cho phù hợp với blog của bạn.

Lời kết

Với thủ thuật đơn giản này sẽ giúp bạn dễ dàng thêm thời gian đọc ước tính vào bài viết blogspot của mình. Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu