Cách làm menu icon blogspot trên mobile bằng CSS

[blog]
Sau đây mình hướng dẫn các bạn cách tạo biểu tượng menu icon bằng CSS cho blogspot, nếu bạn không sử dụng thư viện biểu tượng, bạn có thể tạo biểu tượng menu cơ bản bằng CSS như hình:

Giúp các bạn có thể thiết kế tùy chỉnh mẫu blogspot bán hàng hoặc mẫu blogspot bất động sản của bạn đang dùng, giúp blog của bạn chuyên nghiệp hơn và nhẹ hơn và tăng tốc độ tải trang khi không dùng thư viện icon ở bên ngoài, đây cũng là một thủ thuật blogspot cơ bản nhất.

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

Thêm CSS trước thẻ </head>

<style>
.containers {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3
{
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
</style>

Đặt code sau chỗ cần đặt trên web của bạn, nó chính là nơi icon menu xuất hiện trên điện thoại và ipad.

<div class="containers" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<script>
function myFunction(x) {
  x.classList.toggle("change");
}
</script>

Admin trang giaodienblog.net chúc bạn thành công!
[/blog]