[Toturial] Tạo Fixed Tiny Navbar Cho Blogger - Blogspot

Thanh điều hướng là một phần ko thể thiếu - nói đúng hơn là rất quan trọng trong một Blog, bởi nó sẻ chứa những Thể lại hay những loại mục khác nhau, giúp người xem biết bài nào nằm ở đâu trong blog. Một hôm dạo quanh ở ThemeForest thì thấy có mấy cái theme có cái Navbar nhỏ nhỏ bên phài khi nhấn vào thì menu hiện ra rất đẹp. Vậy nên hôm nay mình sẽ hướng dẫn các bạn làm các thanh navbar đó

Mục lục:

Mở Đầu

Mục Đích

Thực Hiện

Nâng Cao

Lời Kết

Mục Đích

Chia các bài viết thành các mục
Giúp người xem tìm bài viết dể dàng hơn
Cái navbar này rất nhỏ gọn, không chiếm không gian cho blog
Ko chỉ nhỏ gọn mà rất đẹp nên thu hút người xem

Thực Hiện

1. Các bạn vào Blogger -> Mẫu -> Chỉnh sửa HTML, sau đó dán đoạn javascript sau vào trước thẻ đóng </head>

JS<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Nếu trong blog các bạn thấy đã có dòng đó thì bỏ qua bước này nha

2. Sau đó các bạn chèn đoạn CSS của nó trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

CSS/* 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}

3. Sau đó các bạn chép đoạn javascript sau và trước thẻ đóng </body>

JS(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);

4. Bước cuối cùng, các bạn chép đoạn HTML sau vào nơi bạn muốn đặt Navbar

HTML<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='#'>Giới Thiệu</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Sitemap</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Liên Hệ</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Thông Báo</a>
    </li>
  </ul>
</nav>

5. Lưu mẫu (Save Template) lại.
6. Thưởng thức thành quả

Demo
click to view

Nâng Cao

Để thay đổi màu cái viền màu xanh

- Các bạn tìm dòng nav-item:first-child .nav-item-link { trong đoạn CSS các bạn sẽ thấy dòng border-top: 3px solid #f56954 , các bạn thay đổi cái mã màu từ #f56954 thành mã màu bạn muốn. Các bạn có thể vào đây để tìm mã màu bạn thích.

Để thay đổi cái màu khi rê chuột vào chữ

- Các bạn tìm dòng a.nav-item-link:hover {color: #1497ec;} rồi các bạn thay đổi cái mã màu #1497ec thành mảu bạn muốn

Để thay đổi cái màu rê chuột vào ô chứa chữ (ở đây mình để màu giống màu trắng nên các bạn ko thấy)

- Các bạn tìm dòng .nav-item-link:hover {background-color: #fcfcfc;}, rồi thay đổi #fcfcfc thành mã màu bạn thích

Để thay đổi màu khi rê chuột vào nút

- Các bạn tìm dòng .menu-btn:hover {background-color: #f56954;color: #fff;}, rồi đổi cái #f56954 thành màu bạn muốn

Để thay đổi màu nền của cái khung khi có dấu X (khi nhấn vào dấu 3 gạch sẽ hiện màu cái trên mình nói, khi đến dấu X nó sẽ ra màu khác, d mình dặt hai màu khác nhau nên các bạn ko nhìn ra)

- Tìm dòng .nav.active .fa-times {opacity: 1;color: #fff;background: #f56954;}, thay đồi cái #f56954 thành màu bạn muốn

Đê đổi màu cái tam giác

- Các bạn tìm border-bottom-color: #f56954; (dòng này chỉ có 1 cái thôi) sau đó đổi cái #f56954 thành màu bạn muốn.

Để có mả màu các bạn vào đây

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Fixed Tiny Navbar Cho Blogger - Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.