Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện và Menu blog

03/08/2017 456 lượt xem 2 bình luận

Chào bạn!

Tiếp theo loạt bài chia sẻ hướng dẫn cách tạo blogspot A-Z, bài 2 Trường chia sẻ với bạn cài đặt giao diện blog thế nào chuyên nghiệp. Ở bài Trước bạn đã học qua bài 1 hướng dẫn cách tạo bloger cơ bản. Ban đầu mới tạo  giao diện là mặc định của bloger nên không đẹp mắt cho lắm bây giờ để tạo ra giao diện đẹp mắt cho blog bạn cần theme cho blog thật đẹp

Xem thêm : Hướng dẫn thiết kế website bằng wordpress chuẩn SEO

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

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

Sẽ có rất nhiều theme miễn phí cho bloger đẹp trên mạng, bạn có thể lên tìm với từ khóa ” theme bloger free” hay theme bloger đẹp miễn phí”.. Trong bài này Trường sẽ hướng dẫn bạn cài đặt 1 theme khá chuẩn Trường đang sử dụng

Để tải theme bạn click vào link bên dưới tải về

Link tải : https://goo.gl/NukgSE

Khi bạn tải về click phải chuột chọn Open with -> Chọn Notepad

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

Một giao diện hiện lên bạn copy tất cả bằng cách click chuột  khung này vào chọn Ctrl +A  chọn tất cả và Ctrl + C để copy toàn bộ

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

Bạn vào giao diện quản trị bloger chọn Theme-> Chọn Edit HTML

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

Giao diện code theme như hình trên bạn click chuột vào chọn Ctrl + A,  và Ctrl + V tức bạn bôi đen code cũ bỏ đi và pass code theme copy hồi nảy vào

Sau đó chọn Save theme.

Bây giờ vào tên miền blog thì có giao diện như hình bên dưới. Nếu làm được như hình bên dưới đúng rồi còn không như bên dưới bạn xem lại làm sai chỗ nào

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

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

Hướng dẫn thay đổi Menu và phân bài viết theo từng mục

Như bạn thấy giao diện mặc định menu không như mong muốn, bây giờ làm sao sữa menu theo sở thích mình. Menu sẽ bao gồm Menu chính lớn nằm thanh chính và Menu con phía dưới menu chình như hình bên dưới

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

Để tạo Menu thì bạn phải liệt kê những menu chính nào và những menu nào sẽ là menu con, hãy chuẩn bị trước rồi làm tiếp. Có thể bạn có rất nhiều menu nhưng không thể nào bỏ hết trong 1 menu chính vì vậy cần có những menu con phía dưới

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é

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

Bạn xem lại giao diện website sẽ bao gồm các menu chính và con bắt đầu từ

<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>

Chúng ta 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 năng hô

+ Niềng nă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 thôi

Ví dụ

Trong 7 menu chính Trường 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à Trường 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 Trường thay bằng 6 mục trên  và click Save theme sẽ có giao diện như bên dưới

Cách tạo blogspot A-Z Bài 2 hướng dẫn cài đặt giao diện blog

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. Nhớ Save lại nhé

Kết luận

Như vậy trong bài này bạn hiểu qua Cách tạo blogspot A-Z  hướng dẫn cài đặt giao diện và Menu blog, nhìn blog co` menu cũng chuyên nghiệp hơn khá nhiều rồi đúng không nào?

Tiếp theo trong bài sau Trường sẽ giúp bạn hiểu cách nào để viết nhiều bài vào trong menu và một số tối ưu hoàn thiện blog

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

Tác Giả: Lê Văn Trường

 Chào mừng bạn đến blog Lê Văn Trường! Rất vui mang lại giá trị hữu ích cho bạn

Tôi là Trường, kẻ làm việc Full-Time trên online. Yêu thích thu nhập thụ động, xây dựng hệ thống tạo ra nhiều nguồn thu nhập thụ động từ internet

Yêu thích viết blog và trong blog này Trường chia sẻ với bạn về Marketing online và kiếm tiền online, thủ thuật blog, Website, mã giảm giá, Coupon hosting, tên miền, VPS mới nhất