Like Page để cập nhật tin mới ngay trên facebook nhé

Hướng dẫn tạo Menu cố định ẩn hiện cho blogspot

Menu là một thanh điều hướng không thể thiếu cho một website/blog, hôm nay mình sẽ hướng dẫn các bạn cách tạo Menu cố định ẩn hiện cho blogspot, menu này rất tiện và nhỏ gọn, khi hiển thị trên máy tính hoặc điện thoại sẽ không tốn về không gian cũng như thẩm mỹ 😝
Hướng dẫn tạo Menu cố định ẩn hiện cho blogspot

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogspot -> Chủ đề -> Chỉnh sửa -> Nhấn Ctrl + F và tìm kiếm ]]></b:skin sau đó dán đoạn CSS sau lên trên
/* CSS Simple Menu */
.unstyled-list {
    padding: 0;
}

.unstyled-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 140px;
    opacity: 0;
    backface-visibility: hidden;
    transform: translate3d(0,20px,0);
    visibility: hidden;
    box-shadow: 0 3px 8px -3px rgba(0,0,0,0.2);
    transition: all .2s ease, visibility 0s linear;
}

.nav {
    position: fixed;
    top: 5%;
    right: 2%;
    z-index: 102;
}

.nav.active .fa-bars {
    opacity: 0;
}

.nav.active .fa-times {
    opacity: 1;
    color: #fff;
    background: #f56954;
}

.nav.active .nav-menu {
    opacity: 1;
    transform: translate3d(0,50px,0);
    visibility: visible;
    transition-delay: 0s;
}

.menu-btn {
    display: block;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    transition: all .2s ease;
    text-align: center;
    position: relative;
    z-index: 1;
}

.menu-btn .fa {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    line-height: 40px;
    width: 40px;
    vertical-align: middle;
    transition: opacity .1s linear;
}

.menu-btn .fa-bars {
    opacity: 1;
    color: #fff;
}

.menu-btn .fa-times {
    opacity: 0;
}

.menu-btn:hover {
    background-color: #f56954;
    color: #fff;
}

.nav-item-link {
    display: block;
    font-size: 13px;
    color: #999;
    padding: 15px;
    background-color: #fff;
    transition: all .2s ease;
    border-bottom: 1px solid #e9e9e9;
}

.nav-item:last-child .nav-item-link {
    border-bottom: none;
}

.nav-item .nav-item-link i.fa.fa-home,.nav-item .nav-item-link i.fa.fa-paper-plane,.nav-item .nav-item-link i.fa.fa-list-alt,.nav-item .nav-item-link i.fa.fa-coffee {
    margin-right: 10px;
}

.nav-item-link:hover {
    background-color: #fcfcfc;
}

a.nav-item-link:hover {
    color: #1497ec;
}

.unstyled-list:before {
    bottom: 100%;
    right: 10%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255,255,255,0);
    border-bottom-color: #f56954;
    border-width: 8px;
    margin-left: -8px;
}

.nav-item:first-child .nav-item-link {
    border-top: 3px solid #f56954;
}

a.nav-item-link {
text-decoration: none;
font-family: inherit;
} 
Bước 2: Bạn dán đoạn HTML sau vào chỗ cần hiển thị hoặc dán dưới thẻ <body>
<nav class='nav' data-menu>
  <a class='menu-btn' href='#'>
    <i class='fa fa-bars'></i>
    <i class='fa fa-times'></i>
  </a>
  <ul class='unstyled-list nav-menu'>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>About</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Articles</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Work</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Contact</a>
    </li>
  </ul>
</nav> 
Bước 3: Để menu này hoạt động bạn sử dụng javascript sau và dán nó trên thẻ </body>
 <script type="text/javascript">
(function() {
  window.Menu = (function() {
    Menu.init = function() {
      return $('[data-menu]').each(function(idx, el) {
        return new Menu($(el));
      });
    };

    function Menu($el) {
      this.nav = $el;
      this.menubtn = $('.menu-btn', this.nav);
      this.menubtn.on('click', (function(_this) {
        return function(ev) {
          _this.nav.toggleClass('active');
          return false;
        };
      })(this));
    }

    return Menu;

  })();

  $(function() {
    if ($('[data-menu]').length) {
      return Menu.init();
    }
  });

}).call(this);
</script> 
Lưu mẫu lại và chỉnh sửa!
Hy vọng với thủ thuật nhỏ này sẽ giúp ích bạn trong quá trình sử dụng blogspot hoặc thiết kế.

5 nhận xét:

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói