Tự học Blogspot - Bài trước chúng ta đã xong phần đầu trang cho blogspot. Kế ngay sau phần đầu trang sẽ là menu và chúng ta cùng thiết kế menu cho blogspot nhé. Menu này khá đơn giản thôi, nếu các bạn muốn menu đẹp hơn thì tìm code khác rồi thay vào là ok nhé.

 

Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:

1.     Tự thiết kế giao diện cho blogspot (dành cho người không biết code)

2.     Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout

3.     Thiết kế phần header cho blogspot (phần đầu trang)

4.     Thiết kế menu cho blogspot

5.     Tùy chỉnh phần hiển thị nội dung của blogspot

6.     Tùy chỉnh sidebar cho blogspot

7.     Tùy chỉnh footer cho blogspot

8. Tối ưu giao diện để blogspot chuẩn SEO




Trong phần thiết kế menu, chúng ta sẽ đi thiết kế một menu đơn giản nhé. Nhiều bạn thích hiệu ứng rồi thích đẹp bla bla bla. Mình thích đơn giản, nhanh, vậy thôi. Nói trước luôn là menu này tích hợp cả giao diện trên mobile đấy. Tuy nhiên các bạn không rành code thì chẳng cần quan tâm nhiều làm gì, cứ copy paste đúng chỗ là ok.

Đàu tiên, các bạn vào Bố cục --> Layout Menu --> Thêm tiện ích --> HTML/Javascript

Tiêu đề: bỏ trống

Nội dung: thêm vào đoạn code sau:

<style>
.topnav {
  overflow: hidden;
  background-color: red;
  margin-left:7%;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: black;
  color: white;
}
.topnav .icon {
  display: none;
}
@media only screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
     display: none;
   }
  .topnav {
     margin-left:10px;
  }
  .topnav a.icon {
    float: right;
    display: block;
    margin-right: 20px;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
<div class="topnav" id="myTopnav">
  <a href="/">Home</a>
  <a href="/search/label/Blogspot">Blogspot</a>
  <a href="/search/label/SEO">SEO</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

Nhấn vào Lưu rồi ra ngoài web xem Menu nó sẽ như nào nhé, kaka.


Chú ý phần chữ đỏ trong code trên nhé:

<a href="/">Home</a>
<a href="/search/label/Blogspot">Blogspot</a>
<a href="/search/label/SEO">SEO</a>

Phần chữ màu đen (Home, Blogspot, SEO) các bạn có thể sửa thành tên chuyên mục (label) hoặc text bất kỳ mà bạn thích.
Phần chữ màu xanh các bạn thay bằng link mà các bạn muốn chuyển trang khi click vào menu.
Như ở trên khi click vào Blogspot nó sẽ nhảy về trang  https://aydzaa.blogspot.com/
Nếu muốn thêm nhãn mới trong menu ví dụ bạn muốn thêm Tin tức vào menu thì thêm dòng này dưới dòng <a href="/search/label/SEO">SEO</a> là được:

<a href="#">Tin tức</a>

Sửa # thành link các bạn muốn Tin tức link tới nhé.
Phần menu này thực ra chẳng có gì phức tạp quan trọng là các bạn copy paste rồi sửa đúng chỗ thôi. Nói thêm là trên internet có rất nhiều đoạn menu được chia sẻ miễn phí, nếu không thích menu mà mình làm các bạn có thể tìm menu khác trên mạng.
Nói luôn là nguồn của menu này mình lấy ở trang w3schools nhé. Link em nó đây:

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Chúc các bạn thành công!