Cách để phân trang trong bài viết Blogger/Blogspot bằng số điều hướng

Chắc hẳn bạn đã từng truy cập vào các trang tin tức hoặc trang đọc truyện tranh, nơi nội dung bài viết được chia thành nhiều trang nhỏ. Một nút "Next" (Tiếp theo) đơn giản, nhưng khi nhấn vào, bạn được dẫn đến phần nội dung kế tiếp, giúp việc đọc trở nên nhẹ nhàng hơn.

Có bao giờ bạn tự hỏi liệu mình có thể áp dụng cách này cho blog của mình không? Tin vui là, điều đó hoàn toàn khả thi!

Cách chia nội dung bài viết thành nhiều trang không chỉ là thủ thuật, mà còn là nghệ thuật tổ chức nội dung. Dưới đây là một vài lý do khiến bạn nên thử:

Hashtag: Cách để phân trang trong bài viết Blogger/Blogspot bằng số điều hướng

Blogger Chitose2D Code hay tiện ích

Cách thêm khung ghi chú vào Blogger/Blogspot

Bạn muốn làm nổi bật nội dung quan trọng trong bài viết của mình? Hãy thử thêm khung ghi chú vào Blogger/Blogspot. Chỉ vài bước đơn giản, bạn sẽ có ngay một chi tiết đẹp mắt để thu hút độc giả.

Note Block (Alert Box) là gì?

Note Block (hay còn gọi là Alert Box, Khung ghi chú) là một khung nhỏ trong bài viết được thiết kế để làm nổi bật nội dung quan trọng. Nó thường được sử dụng để:

• Nhấn mạnh thông tin: Ghi chú, lưu ý, cảnh báo hoặc hướng dẫn đặc biệt.

• Tạo điểm nhấn: Thu hút sự chú ý của người đọc đến những phần nội dung quan trọng.

• Tăng tính thẩm mỹ: Với thiết kế gọn gàng và màu sắc nổi bật, Note Block giúp bài viết trở nên chuyên nghiệp hơn.

Hashtag: Cách thêm khung ghi chú vào Blogger/Blogspot

Blogger Chitose2D Code hay tiện ích

Cách thêm trình phát nhạc có danh sách phát vào Blogger/Blogspot bằng HTML, CSS & JavaScript

Trong năm 2023, trên Chitose2D đã đã có một bài viết hướng dẫn tạo code phát nhạc chỉ bằng HTML5 cho Blogger/Blogspot cực nhẹ. Và hôm nay, mình sẽ tiếp tục cập nhật thêm trình phát nhạc có danh sách phát với sự kết hợp của HTML, CSS & JavaScript.

Ưu điểm của code phát nhạc có danh sách phát cho Blogger/Blogspot 👇

✧ Mặc dù có JavaScript nhưng trình duyệt này cực nhẹ, không gây nặng trang và load nhanh.

✧ Giao diện đẹp mắt, thích hợp cho bạn nào làm web nhạc, hoặc cũng có thể tích hợp vào blog thành Blog truyện Audio.

✧ Không cần mã nhúng của bên thứ 3, tất cả tính năng bạn cần đều trong một đoạn code

✧ Cho phép bạn thỏa mái thay đổi font chữ, màu chữ bằng cách bôi đen văn bản, tận dụng các chức năng kết hợp trong bài viết của Blogger

✧ Độ tùy biến cao, thỏa mái sáng tạo nếu bạn biết code

Nhược điểm: Là méo có chỗ tải đâu nhé, vì trình phát nhạc này tập chung vào phần giữ chân khách ghép thăm, tránh tình trạng tải về, thoát trang mất khách ấy mà. 🤕

Bạn có thể xem demo ở ảnh dưới. 👇

Hashtag: Cách thêm trình phát nhạc có danh sách phát vào Blogger/Blogspot bằng HTML, CSS & JavaScript

Blogger Chitose2D Code hay tiện ích

10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot

Dạo gần đây méo có cảm hứng đăng cái vẹo gì, cữ mỗi lần viết bài tầm 5, 10 phút lại tụt hứng, một phần cũng bận vọc làm video nên méo có thời gian chăm coi blog.

Thôi thì up đại 1 bài cho có lệ vậy, dưới đây là: 10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot. Cho bạn nào cần mà lên mạng toàn mấy cái lẻ tẻ nay gom lại thành một đóng cho gọn, đỡ mất công tìm kiếm. 🙃

◉_◉

Hashtag: 10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot

Blogger Chitose2D Code hay tiện ích

Tạo hộp download Anime và Manga với chức năng Ẩn/Hiện Javascript

Hộp download Anime và Manga là gì? Ờ thì nó là hộp để link download Anime và Manga??? 🤨 Với một số bạn nào thường dùng blog để làm nơi lưu trữ phim, anime, manga các kiểu thì bạn đặt link tải kiểu gì nè?

Đa số các mẫu blog không có code hỗ trợ sẵn, do vậy chúng ta chỉ có cách tạo link trực tiếp luôn trên bài viết, trông thì đơn giản nhanh gọn nhưng không đẹp mắt cho lắm, nhất là với các blog làm về nội dung mà hay chèn link tải chia thành nhiều tập, độ phân giải cùng vô số server để dự phòng.

Vậy phải làm như nào? Bên dưới đây chính là cách tạo hộp download Anime và Manga với chức năng Ẩn/Hiện Javascript.

• Ưu điểm: Code nhẹ không gây nặng trang, trông đẹp mắt và chuyên nghiệp hơn nhiều.

• Bạn có thể xem demo từ ảnh trên hoặc click vào Download: Tên Anime: Ẩn/Hiện ở bên dưới. 👇

Episode 1

• 360p Server: Google Drive Server: 2 Server: 3
• 480p Server: Google Drive Server: 2 Server: 3
• 720p Server: Google Drive Server: 2 Server: 3
• 1080p Server: Google Drive Server: 2 Server: 3

Episode 2

• 360p Server: Google Drive Server: 2 Server: 3
• 480p Server: Google Drive Server: 2 Server: 3
• 720p Server: Google Drive Server: 2 Server: 3
• 1080p Server: Google Drive Server: 2 Server: 3

Episode 3

• 360p Server: Google Drive Server: 2 Server: 3
• 480p Server: Google Drive Server: 2 Server: 3
• 720p Server: Google Drive Server: 2 Server: 3
• 1080p Server: Google Drive Server: 2 Server: 3

Bước 1: Chủ đề > Tùy chỉnh > Chỉnh sửa HTML > Chèn CSS dưới đây, nhớ là dán trước thẻ đóng </head> xong lưu lại.

<style type='text/css'>
/* Tạo hộp download Anime và Manga với chức năng Ẩn/Hiện Javascript
============================ */
#db-area{margin:0 auto;margin-bottom:5px;position:relative;padding:2px;border:1px solid #ddd;background:#eee}
#db-area button{background-color: #3399FF;padding: 10px 12px; border-radius: 3px;border: none;color: #fff;width: 50%;}
#db-area .db-ini h2{margin:auto;font-size:15px;background-color:#333;display:block;color:white;padding:5px;border-radius:1px}
#db-area .db-ini ul{list-style:none;padding:5px;margin:auto}
#db-area .db-ini ul li{margin:3px auto}
#db-area .db-ini ul li b,#db-area .db-ini ul li a{display:inline-block;padding:3px 5px;border-radius:3px;text-decoration:none;color:white}
#db-area .db-ini ul li a{background-color:#7e8392}
#db-area .db-ini ul li a:hover{text-decoration:underline}
#db-area .db-ini ul li:nth-child(even) b{background-color:#df5b5b}
#db-area .db-ini ul li:nth-child(odd) b{background-color:#339999}
</style>

Bước 2: Thêm đoạn JavaScript dưới đây vào trước thẻ đóng </body> và lưu lại.

<script type="text/javascript">
   const targetDiv = document.getElementById("db-isi");
    const btn = document.getElementById("db-toggle");
    btn.onclick = function () {
      if (targetDiv.style.display !== "none") {
        targetDiv.style.display = "none";
      } else {
        targetDiv.style.display = "block";
      }
    };
</script>

Bước 3: Vào bài viết Blogspot > Chuyển sang Chế độ xem HTML > copy và dán đoạn code dưới này vào trong bài viết của bạn.

<div id="db-area">
 <span style="font-family: Mali; font-size: medium;"><button id="db-toggle"><span><strong>Download: </strong>Tên Anime: Ẩn/Hiện</span></button>
 <div id="db-isi" style="display: none;">
   <div class="db-ini">
     <h2>Episode 1</h2>
     <ul>
       <li><b>360p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>480p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>720p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>1080p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
     </ul>
   </div>
   <div class="db-ini">
     <h2>Episode 2</h2>
     <ul>
       <li><b>360p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>480p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>720p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>1080p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
     </ul>
   </div>
   <div class="db-ini">
     <h2>Episode 3</h2>
     <ul>
       <li><b>360p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>480p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>720p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
       <li><b>1080p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
     </ul>
   </div>
 </div>
</span></div>

Lưu ý: Trước khi dùng đoạn code này, hãy viết bài nội dung quần văn què gì đó rồi chuyển sang chế độ xem HTML > Copy code trên dán vào cuối bài viết của bạn. Chủ yếu là để trông chuyên nghiệp và đẹp mắt hơn ấy mà. 🙄

Đây là code lụm bên trang indo, nguồn code.ruidrive nhé!

Hashtag: Tạo hộp download Anime và Manga với chức năng Ẩn/Hiện Javascript

Blogger Chitose2D Code hay tiện ích

Code bộ đếm từ văn bản

Code này thì để làm cái éo gì? Ờm thì tự nhiên nhớ lại chuyện ngày xửa ngày xưa, đâu đó vào khoảng giữa năm 2017, cái thời nghiện light novel đến nổi đọc tới gần 4 giờ sáng chưa ngủ, ôi nghĩ lại đúng là hao tổn sức khỏe vãi đáiiiii.

Một thời gian sau cũng vì vậy mà tập tành viết truyện đăng trên mấy web kia, nhưng thường có yêu cầu là phải đủ số từ ít nhất phải 2, 3000. Và nhờ code đơn giản này mà đếm số từ văn bản trở nên khá dễ dàng. Bạn có thể xem demo và code bên dưới. 👇

Nhập nội dung văn bản của bạn:

Số từ: 0

Dán code này vào bất kỳ đâu trên blog của bạn, tốt nhất là tạo một bài viết >> Chuyển sang chế độ HTML >> Copy và dán code dưới đây.

<div class="containerg">

  <textarea id="text"></textarea>
  <p id="wordCount"><b>Số từ: <span style="color: #cc0000;">0</span></b></p>
</div>
<script>
  const textArea = document.getElementById('text');
  const wordCountElement = document.getElementById('wordCount');
 
  textArea.addEventListener('input', updateWordCount);
 
  function updateWordCount() {
    const text = textArea.value;
    const words = text.trim().split(/\s+/).filter(word => word !== '');
    const wordCount = words.length;
 
    wordCountElement.textContent = `Số từ: ${wordCount}`;
  }
</script>

<style>
{
    font-family: Mali, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .containerg {
    display:;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
  }
  textarea {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    resize: vertical;
  }
</style>

P/s: Làm bài viết này xong tự nhiên có hứng viết truyện ghê, cơ mà được vài phút mất cmn hứng lun. 😓

Hashtag: Code bộ đếm từ văn bản

Blogger Chitose2D Code hay tiện ích