Chủ Nhật, 14 tháng 2, 2016

Cách Tạo Blog, Chỉnh Sửa Thanh Menu Tạo Blog Đẹp

Cách Tạo Blog  Tạo Web Bán Hàng Miễn Phí thay đổi giao diện Template cho blog mình đẫ chia sẻ ở những bài trước, phần tiếp theo mình sẽ hướng dẫn các bạn chỉnh sửa thanh Menu có nhiều danh mục được sổ ra rất đẹp. Nếu như bạn chưa học về mã nguồn HTML để thay đổi hay tạo thêm menu theo ý muốn và nó phải phù hợp với nội dung của blog chắc chắn bạn sẽ gặp khó khăn thậm trí không tự đổi được nhưng không sao bây giờ các bạn cứ làm theo hướng dẫn của mình từng bước là ok .

Cách Chỉnh Sửa Thanh Menu Trong Blog

Chỉnh sủa thanh menu trong blog (1)
Chỉnh sủa thanh menu trong blog (1)
- Các bạn truy cập vào Blog của mình rồi xem lại mẫu (giao diện) gốc sẽ có hình như trên toàn bộ thanh menu đều là tiếng anh vậy làm sao để thay nó thành tiếng việt theo ý bạn , các bạn làm như sau
- Vào trang quản lý của blog như hình dưới ==> chọn mẫu ==> chọn chỉnh sửa html

tạo blog cá nhân chuẩn seo
Chỉnh sủa thanh menu trong blog (2)

** Lưu ý : trước khi tiến hành chỉnh sửa HTML các bạn cần thận trọng từng bước không lên thay đổi chỉnh sửa các ký tự trong mã nguồn html nếu bạn không được hướng dẫn hãy làm từng bước một sau mỗi bước ta phải lưu mẫu lại để kiểm tra ( tránh tình trạng bị nỗi mã nguồn)

Tiếp theo các bạn làm như sau ;


Hướng dẫn chỉnh sửa thanh menu có sẵn trong Teamplate


- Bạn nhấp chuột vào ô chứa mã nguồn code 
- Nhấn tổ hợp phím Ctrl + f  sau đó thanh tìm kiếm ( Search) hiện ra trên góc phải ô mã nguồn ( xem hình bên dưới)
Gõ chữ home rồi nhấn Enter kết quả sẽ hiện thị đoạn code có chứa từ các bạn cần tìm là home, tiếp theo các bạn chỉ cần điền những từ theo ý muốn của mình vào những dòng chữ màu đen sẽ hiển thị trên thanh menu là được.
CÁCH CHỈNH SỦA THANH MENU BLOG (3)
CÁCH CHỈNH SỦA THANH MENU BLOG (3)



Ví dụ :
 lúc đầu thanh menu sẽ có những menu  là:
 ( HOME       DOWNLOADS         PARELT CATEGORY         FEATURED          HEALTH )

Mình sẽ thay bằng những cái tên cho menu và danh mục con sổ ra theo nội dung bài viết hay sản phẩm dịch vụ của mình cần giới thiệu để người đọc rễ tìm kiếm những bài viết khác sẽ giúp cho người đọc ở lại blog của chúng ta nâu hơn đem lại nhiều thông tin cho khách hàng như vậy tỷ lệ chuyển đổi mua hàng cao hơn nếu bạn là người bán hàng , mình sẽ thay thành
( TRANG CHỦ       GIỚI THIỆU       TIN TỨC       LIÊN HỆ        GIÁ VÉ  )

Hướng dẫn chỉnh sửa menu  blog
Hướng dẫn chỉnh sửa menu  blog 




- Khi tải mẫu Teamplate có rất nhiều mẫu khác nhau để các bạn lựa chọn tuy nhiên các bạn cần lưu ý những tính năng và thanh menu được tích hợp sẵn trong từng mẫu là hoàn toàn khác nhau có thể có hoặc không,các bạn lên chọn những Teamplate có sẵn menu thì chúng ta chỉ việc thay vào đó bằng tiếng việt là được còn nếu bạn nỡ tải mẫu không có thanh menu hoặc có ít menu con thì bạn có thể tiến hành các bước như sau để tạo thêm menu .

Hướng dẫn  tạo thêm menu hàng dọc ở phía trên cùng 

Bước 1 ; bạn vào chỉnh sủa html  rồi dán đoạn code sau vào bên dưới cặp thẻ <body>
           
                       <li><a href='#'>tên MENU</a></li>
                       <li><a href='#'>tên MENU</a></li> 


sau đó bạn thay tên menu của mình muốn tạo vào chữ được bôi màu đỏ >tên MENU<  cuối cùng các bạn chọn lưu mẫu và  chọn xem blog để kiểm tra kết quả như hình bên dưới .

Hướng dẫn  tạo thêm menu hàng dọc ở phía trên cùng
Hướng dẫn  tạo thêm menu hàng dọc ở phía trên cùng 


Hướng dẫn tạo thêm menu, chỉnh sửa menu ngang

 Giao diện các bạn mới tạo hoặc sử dung nâu rồi nhưng bây giờ bạn muốn thêm nội dung mới danh mục mới vào blog thì các bạn có thể thêm menu để khách hàng rễ dàng phân loại hay tìm kiếm nội dung cần xem . Để tạo thêm menu mới trong thanh menu ngang các bạn làm như sau

- các bạn vào lại mẫu chon chỉnh sửa html ==> nhấp chuột trái vào ô mã nguồn ==> nhấn tổ hợp các phím Ctrl + f  ==> nhập từ trang chủ vào ô Search kéo xuống đoạn code mà ta muốn thêm menu mới vào 
Vídụ tôi muốn thêm menu mới vào bên cạnh Trang Chủ thì các bạn dán đoạn code sau vào bên cạnh code menu trang chủ


<li><a href='#'>MENU mới</a>

code menu đơn không có menu con sổ xuống


<li><a href='#'>MENU mới </a>
<ul class='children'>
<li><a href='#'>Menu con</a></li>
<li><a href='#'>menu con</a></li>
<li><a href='#'>menu con</a></li>
<li><a href='#'>menu con</a></li>
</ul>

</li>

code menu có menu con sổ xuống


Hướng dẫn chỉnh sửa menu  blog
Hướng dẫn chỉnh sửa menu  blog


Tương tự các bạn muốn tạo thêm menu mới bên cạnh menu nào thì các bạn dán đoạn code bên trên vào nhé
- trong trường hợp các bạn chưa có bài viết chèn vào menu con thì các bạn có thể không cho menu con đó hiển thị khi ta nhấp chuột vào bằng cách xóa đi dòng chữ Menu con
- Còn muốn  thêm menu con sổ ra dài hơn thì bạn copy đoạn code bên dưới

   <li><a href='#'>thêm menu con</a></li>

dán vào bên trên cặp thẻ   </ul>
                                          </li>
                                  
Ví dụ :  tôi dán thêm vào đoạn code menu trên 3 menu con thì tôi dán thêm vào đoạn code màu đỏ

<li><a href='#'>MENU mới </a>
<ul class='children'>
<li><a href='#'>Menu con</a></li>
<li><a href='#'>menu con</a></li>
<li><a href='#'>menu con</a></li>
<li><a href='#'>menu con</a></li>
<li><a href='#'>thêm menu con</a></li>
<li><a href='#'>thêm menu con</a></li>
<li><a href='#'>thêm menu con</a></li>
</ul>
</li>
ngược lại bạn muốn xóa bớt menu con đi thì bạn xóa đoạn code đó đi sau đó chọn lưu mẫu và kiểm tra là được

Như vậy ở bài viết này mình đã chia sẻ với các bạn cách chỉnh sửa thanh menu và thêm mới menu có thể còn thiếu sót vì mình không phải là người lập trình web hay IT mà đơn giản tất cả những thứ mình chia sẻ chỉ là do mình tự mày mò ở trên mạng sau đó tự học tự làm rồi rút ra kinh nghiệm để chia sẻ cho các bạn, với những kiến thức này mình có thể tự tạo cho mình những blog cá nhân như blog các bạn đang xem blog Việt nguyễn. hy vọng với những kiến thức cơ bản này sẽ có ích cho các bạn chúc các bạn thành công

Xem thêm :

- Cách đổi giao diện blog, chon mẫu teamplate đẹp

- Cách tạo blog, tạo web bán hàng miễn phí

6 nhận xét:

Bài viết rất hay cảm ơn nhé

Sửa xong rồi bị lỗi vào blog là nó chuyển qua website của template b

Bạn hướng dẫn luôn code dropmenu cấp hai, ba, bón luôn. Cảm ơn bạn.

http://nvfoodcoop.blogspot.com/

Đăng nhận xét