Hướng dẫn tạo menu trong blogspot và giao diện cơ bản

26/08/2017 518 lượt xem 1 bình luận

Trong bài trước bạn đã biết cách tạo một blogger chuyên nghiệp. Hôm nay chúng tôi sẽ hướng dẫn tạo menu trong blogspot và giao diện cơ bản chuyên nghiệp.

Hướng dẫn tạo menu trong blogspot và giao diện cơ bản

Hướng dẫn cài đặt giao diện blog

Bạn có thể tìm nhiều theme miễn phí đẹp cho blogger ở trên mạng. Chỉ cần lên Google gõ từ khóa ” theme blogger free” hay theme blogger đẹp miễn phí”. Bạn có thể tải theme ở link sau: Link tải : https://goo.gl/NukgSE

Sau khi tải về xong bạn click chuột  phải chọn Open with -> Chọn Notepad như hình bên dưới.

Bạn click chuột vào giao diện hiện lên nhấn Ctrl +A  để chọn tất cả và Ctrl + C để copy toàn bộ như hình bên dưới.

Tiếp theo bạn vào quản trị blogger chọn “Theme” -> rồi chọn “Edit HTML” như hình bên dưới.

Hình trên là giao diện code theme lúc bạn lập blogger để thay thế code theme mới bạn click chuột vào và nhấn Ctrl + A để bôi đen toàn bộ. Sau đó nhấn Ctrl + V pase code theme mới vào.

Sau đó chọn “Save theme”.

Bạn hãy thử vào tên miền blog nếu có giao diện như hình bên dưới là thành công còn nếu không bạn hãy xem lại các bước đã thực hiện. 

Ví dụ như link sau : https://makemoneyonyoutubevip.blogspot.com/

Hướng dẫn tạo menu trong blogspot và phân loại bài viết theo thư mục

Khi bạn cài đặt blogger thì giao diện mặc định menu:  bao gồm Menu chính lớn nằm thanh chính và Menu nhỏ phía dưới menu chính như hình bên dưới

Để tạo Menu trước hết bạn phải liệt kê những menu chính và những menu nhỏ tương ứng. Khi bạn đã chuẩn bị đầy đủ những menu chính và menu con mong muốn rồi chúng ta tiến hành lập menu như sau.

Ví dụ giao diện website sẽ bao gồm các menu chính và con bắt đầu sau.

<a class=’slide-menu’ href=’#’><i class=’fa fa-list’/> Menu</a>

<ul class=’nav vienna-menulite’>

<li><a class=’active’ href=’/’><span itemprop=’name’><i class=’fa fa-th-list fa-lg’/></span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Niềng răng</span></a>

<ul>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Niềng răng móm</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Niềng răng hô</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Trồng răng Implant</span></a></li>

</ul>

</li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Kiến thức</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Mẹo vặt</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Cuộc sống</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Tư vấn</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Hỏi đáp</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Liên hệ</span></a></li>

</ul>

Như vậy có 7 menu chính bao gồm :

+ Niềng răng

+ Kiến thức

+ Mẹo vặt

+ Cuộc sống

+ Tư vấn

+ Hỏi đáp

+ Liên hệ

Và những Menu con trong mục Niềng Năng như :

+  Niềng năng món

+ Niềng răng hô

+ Niềng răng Implant

Nếu bạn không muốn 7 menu chính mặc định thì xóa bớt đi 1 hay 2 hay 3 tùy bạn bằng cách xóa dòng <li><a href=’#’ itemprop=’url’><span itemprop=’name’>Kiến thức</span></a></li>. Bạn cảm thấy cần 8 hay 9 menu chính thì copy dòng trên pass ngay xuống dưới.

Muốn đổi tên menu chính là gì hãy sửa chữ trên lại.

Ví dụ: Trong 7 menu chính trên bạn có thể sửa lại thành 6 menu chính bao gồm :

+ Bán hàng online

+ Bán hàng trên Zalo

+ Học Seo

+ Email Marketing

+ Thiết kế website

+ Bán hàng trên Youtube

Và bạn sẽ bỏ đi dòng cuối cùng  là dòng “ <li><a href=’#’ itemprop=’url’><span itemprop=’name’>Liên hệ</span></a></li>”  và 6 menu chính thay bằng 6 mục trên  và click “Save theme” sẽ có giao diện như bên dưới.

Menu con sẽ bắt đầu như sau :

<ul>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Niềng răng móm</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Niềng răng hô</span></a></li>

<li><a href=’#’ itemprop=’url’><span itemprop=’name’>Trồng răng Implant</span></a></li>

</ul>

Bạn muốn ở menu chính có mục con nào thì copy nguyên đoạn trên bỏ vào ngay bên dưới mục chính đó, bạn nhớ copy đúng cấu trúc ” <Ul>……….. </ul>. Nếu không muốn có menu con nào thì bỏ đi. Và Save lại.

Như vậy chúng tôi đã hướng dẫn tạo menu trong blogspot và giao diện cơ bản rất chi tiết. Hi vọng các bạn sẽ thực hiện thành công. 

<meta name=”google-site-verification” content=”RNUc7UHshSuV5orpsOOVziuG8ARJTnM-uMbi4w8-eDY” />