Hướng dẫn tạo nhiều giao diện khác nhau trên Blogspot và lưu trạng thái sử dụng cookie

Chia sẻ:

18.11.21 | 0 nhận xét | lượt xem

Ở bài viết này chúng ta sẽ khám phá một thủ thuật thú vị trên nền tảng Blogspot. Bạn có biết rằng bạn có thể tạo ra không chỉ một, mà nhiều giao diện khác nhau cho blog của mình? Điều thú vị hơn nữa, chúng ta sẽ làm sao để lưu trạng thái giao diện mà người dùng đã chọn, đảm bảo rằng khi họ quay lại, giao diện yêu thích của họ vẫn được hiển thị.

Trong bài viết này, chúng ta sẽ sử dụng cookie và CSS để thay đổi giao diện và lưu trạng thái vào cookie

Mình sẽ demo giao diện đơn giản cho bạn ở bên dưới vì ngại viết CSS :D

Và sau đây sẽ hướng dẫn bạn từng bước một để thực hiện thủ thuật này.

Thêm mã JavaScript

Tìm phần <head> trong mã HTML và chèn mã JavaScript sau

<script>
  // Hàm để đổi giao diện
  function changeTheme(themeName) {
    var element = document.getElementsByTagName("body")[0];
    element.className = themeName;
    document.cookie = "selectedTheme=" + themeName + "; path=/";
  }

  // Hàm để lấy giao diện được lưu trong cookie
  function getSelectedTheme() {
    var name = "selectedTheme=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var cookies = decodedCookie.split(";");
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i];
      while (cookie.charAt(0) == " ") {
        cookie = cookie.substring(1);
      }
      if (cookie.indexOf(name) == 0) {
        return cookie.substring(name.length, cookie.length);
      }
    }
    return "";
  }

  // Xử lý khi tài liệu HTML đã được tải
  document.addEventListener("DOMContentLoaded", function () {
    var selectedTheme = getSelectedTheme();
    if (selectedTheme) {
      var element = document.getElementsByTagName("body")[0];
      element.className = selectedTheme;
    }
  });
</script>

Thêm nút chuyển đổi giao diện

Tìm vị trí bạn muốn hiển thị các nút chuyển đổi giao diện và thêm mã HTML sau đây, ví dụ mình muốn thêm 3 giao diện

<button onclick="changeTheme('theme1')">Giao diện 1</button>
<button onclick="changeTheme('theme2')">Giao diện 2</button>
<button onclick="changeTheme('theme3')">Giao diện 3</button>

Cập nhật CSS

.theme1 {
  /* Quy tắc CSS cho giao diện 1 */
}

.theme2 {
  /* Quy tắc CSS cho giao diện 2 */
}

.theme3 {
  /* Quy tắc CSS cho giao diện 3 */
}

Ví dụ như trong bài viết này mình chỉ áp dụng thay đổi cho nền của main-wrapper và màu chữ trong phần này nên mình sẽ có đoạn CSS như sau


.theme1 #main-wrapper {
    background: #4c4a52;color: #eee;}
  
.theme2 #main-wrapper {
    background: #cb1d1e;color: #eee;}

.theme3 #main-wrapper {
    background: #0d9d58;color: #eee;}

Như vậy là trong bài viết này, chúng ta đã khám phá một thủ thuật thú vị trên nền tảng Blogspot, cho phép chúng ta tạo ra nhiều giao diện khác nhau và lưu trạng thái giao diện sử dụng cookie. Điều này mang lại sự linh hoạt và tùy chỉnh tuyệt vời cho trang web của chúng ta, cho phép người dùng trải nghiệm các giao diện độc đáo và giữ lại giao diện yêu thích của họ mỗi khi truy cập lại.
Hãy bắt đầu thực hiện thủ thuật này ngay bây giờ và chứng kiến cách nó nâng cao trải nghiệm người dùng trên Blogspot của bạn.