Trang chủ >

Hướng dẫn làm website tin tức, giới thiệu ( phiên bản 2017 )

Phiên bản 2017 có thể làm các website tin tức, dịch vụ khá tùy biến, sau đây mình xin giới thiệu cách làm website dịch vụ luật bằng các chức năng bài viết, dựa vào đây các bạn có thể tự mình làm các web tin tức, dịch vụ khác.

Link Demo http://luatsudemo1.mov.mn/

 1. Nâng cấp lên bản 2017

Các bạn vào Hệ thống > tùy chọn khác > chọn tab hệ thống > nâng cấp bản 2017

nangcap_2017

sau khi nhấn nâng cấp thì các menu của admin sẽ thay đổi, website sẽ trắng xóa

2. Vào giao diện, bố cục chức năng để bố cục cơ bản

2.1 vào tab Nền PC để đặt độ rộng cho khung web

rong_nen

2.2.Vẫn ở bố cục chức năng, vào tab PC để kéo thả chức năng ảnh & slide ảnh, ở đây mình sẽ dùng chức năng này để làm banner

them_banner

2.3. Click vào hình bút chì ở mục Ảnh vào slide ảnh vừa thêm vào để upload ảnh 

sua_banner_luat

ở phần tên chức năng đặt tên là banner cho dễ quản lý, ở phần nhập url ảnh các bạn gõ link vào hoặc ấn vào biểu tượng ảnh để chèn, upload. Bạn nên chuẩn bị sẵn 1 banner đã thiết kế để đưa lên, kích thươc rộng tầm 1000px 

Reload lại website để xem kết quả, chúng ta đã có website với banner ảnh

ket_qua_luat_1

3. Làm menu ngang cho website

3.1. Chọn mầu chủ đạo để làm nền menu cho website, phần này ở mục Giao diện > bố cục chức năng > nền PC, mình chọn mầu nâu , đen, cam để làm mầu nền cho menu và 1 số chức năng khác, khi các bạn chọn mầu chủ đạo thì thay mầu cho website chỉ việc vào đây để thay đổi, thay vì phải vào từng chức năng sửa.

luat_mau_chu_dao

Các bạn đặt mầu chữ cho website là mầu đen nữa

luat_mau_chu

3.2. Kéo thả chức năng menu ngang vào dưới banner chính

luat_keo_tha_menu

3.3.Sau khi kéo thả nhấn vào hình bút chì để sửa menu ngang, mầu chữ vào kiểu nền đều chọn mầu chủ đạo như hình

luat_cau_hinh_box_menu_ngang

3.4. Cấu hình menu cấp 1, mình cài đặt một số chức năng như sau

luat_cau_hinh_menu_ngang_cap1

 

Kết quả

luat_ket_qua2 

4. Chuẩn bị nội dung nếu web bạn chưa có

4.1.Tạo danh mục bài viết 

tao_danh_muc_bai_viet

4.2 Thêm bài viết , ảnh , mô tả ...

them_bai_viet_luat

 

5. Chia website làm 2 cột, cột phải chứa tìm kiếm, hỗ trợ, 1 vài mục tin nóng, cột trái chứa nội dung trang chủ và các trang con

5.1. Vào bố cục chức năng kéo 2 chức năng ô chứa vào dưới menu ngang, một chức năng dành cho nội dung giữa và 1 chức năng dành cho cột phải, o giữa mình sẽ để ở trên và ô phải ở dưới

luat_bocuc_noidung

 

5.2. Click vào hình bút chì để sửa 2 chức năng này, đầu tiên  là ô giữa, đặt tên chức năng cho dễ quản lý, inline để ô giữa và cột phải nằm thành 2 cột, rộng 70%, phần đệm trong mình đặt là 0 10px 0 0 có nghĩa là nó sẽ đệm 1 khoảng Trên, phải , dưới trái ứng với các số đó, ở đây là đệm trên 0, phải 10px, dưới 0, trái 0. Mục đích của đệm là làm cho giữa nội dung và cột phải cách nhau 10px

 

luat_o_giua

5.3. Cấu hình tiếp cột phải

luat_cot_phai

Nếu cấu hình đúng thì khi vào lại trang cài đặt bốc cục PC thì phải giống hình sau

luat_cau_hinh_dung

6. Cài đặt chức năng trên cột phải

6.1. Chức năng tìm kiếm

luat_timkiem

click vào bút chì để sửa ô tìm kiếm

luat_cai_otimkiem

kết quả chúng ta được chức năng tìm kiếm như sau, chúng ta sẽ làm đẹp cho chức năng này sau

luat_timkiem_ketqua

 

6.2 Chức năng hỗ trợ

Ở bản mới mình sẽ dùng chức năng Box HTML để làm chức năng hỗ trợ

luat_box_html

Ấn vào hình bút chì để sửa box này

luat_box_hotro

Chèn bảng, ảnh, text vào để tạo thành box hỗ trợ phù hợp với các bạn

  • Với biểu tượng zalo hay điện thoại thì các bạn chèn link tel:12345678 ( thay 12345678 bằng số điện  thoại của bạn )
  • Với biểu tượng skype thì các bạn chèn link skype:nickskycuaban?chat
  • Với facebook page hoặc group thì dán thẳng link vào

Nếu các bạn muốn dùng chat facebook thì có thể dùng chức năng chat facebook

luat_facebook_chat

 

6.3. Thêm chức năng bài viết theo danh mục, vd mình muốn đưa 10 bài viết ở mục "Luật dân sự" vào 1 mục dưới phần hỗ trợ trực tuyến, kéo thả chức năng bài viết vào cột phải, dưới hỗ trợ trực tuyến

luat_baiviet_danh_muc

Cấu hình cho chức năng này

luat_cau_hinh_baiviet_danhmuc

 

Kết quả

luat_dansu

 Các bạn có thể thêm các mục tương tự mục "Dân sự" nhé, cấu hình ảnh , mô tả tùy các bạn sáng tạo

7. Cấu hình trang chủ

Chúng ta đã có website với banner, menu, cột phải, tuy nhiên trang chủ cũng như khi click vào các nội dung thì vẫn trắng trơn. Ở mục 7 chúng ta sẽ bố cục trang chủ chứa các chức năng bài viết

 

7.1. Kéo thả chức năng Nội dung giữa ( mầu đỏ ) vào phần bố cục, chức năng mầu đỏ này có tác dụng khi vào trang chủ hay các trang con thì nội dung sẽ hiện ở đấy

luat_noidunggiua

7.2. Vẫn ở phần bố cục chức năng,  click vào tab Trang chủ PC, kéo thả các chức năng bài viết như dưới đây

luat_baiviet_trangchu

7.3. Cấu hình bài viết trên cùng ( bài viết 26 )

luat_bai_moi

Reload lại trang chủ

luat_bai_moi_ketqua

 

 

 7.4. Quay lại phần bố cục trang chủ PC để sửa tiếp ô chứa 2 chức năng tin

luat_sua_ochuatin

Sửa chức năng này

luat_sua_ochuachitiet

7.5. Sửa chức năng bài viết ảnh lớn trong ô chứa ( Bài viết 29 )

luat_sua_tin_to

Sửa như sau

 

luat_tin_noi_nhat

Kết quả

luat_tin_noi_ketqua

 

7.6 Cấu hình 3 tin ở dưới tin nổi

luat_tin3

luat_tin3_chitiet

kết quả

luat_tin3_ketqua

 

 

 

7.7.  Chức năng tin tức theo danh mục

Tạo 1 ô chứa và cho 2 chức năng tin theo danh mục vào, sửa chức năng tin ở trên

luat_tin_danhmuc

luat_dat_dai_tinlon

Sửa chức năng bài viết ở dưới

luat_dat_dai_tin3

luat_datdai_tinnho

 

Sửa ô chứa 2 chức năng tin mới tạo

luat_sua_ochua_danhmuc

luat_ochua_datdai

 

Kết quả

luat_dat_dai_ketqua

Lưu ý là để có kết quả hiện ra thì trong các danh mục tin các bạn phải đứa sẵn bài viết & ảnh vào nếu không kết quả sẽ khác bài hướng dẫn

Các bạn làm tương tự mục 7.7 cho các mục khác như luật dân sự, thuế ...., tự tùy chỉnh sáng tạo theo ý các bạn

8. Chân website

Mục này các bạn quay lại bố cục PC, kéo thả 1 box html vào dưới cùng bố cục và nhập nội dung là ok

luat_chan

luat_chan_sua_chitiet

 

Chỉnh màu mè 1 chút

luat_style_chan

Đến đây chúng ta đã có 1 trang tin tức có bố cục rõ ràng rồi, các phần tiếp theo của bài viết chúng ta sẽ tin chỉnh kỹ hơn từng mục

luat_chan_ketqua

 

9. Nền, font website

9.1 Font chữ, các bạn vào Giao diện > bố cục chức năng và chọn font theo sở thích

luat_nen_1

 

Chọn nền website, ảnh nền website, mầu nền khung chính

luat_nen_2

 

 

kết quả

luat_nen3

 

9.2. CSS chức năng tìm kiếm

luat_css_timkiem

chúng ta sẽ dùng 1 số mã css ở phần này để làm box cho đẹp

* Thêm đối tượng header , nhập mã

border:1px solid #ddd; padding:10px; border-radius:4px 4px 0px 0px;

* Thêm đối tượng padding , nhập mã

border:1px solid #ddd; padding:10px; border-top:none; border-radius:0px 0px 4px 4px ;

* Thêm đối tượng box, nhập mã background:#fbfbfb;

Các đoạn mã css này bằng tiếng anh nên các bạn cũng có thể hiểu sơ sơ, vd border:1px solid #ddd; nghĩa là viền rộng 1px, kẻ liền , mã mầu #ddd

luat_otimkiem_css

9.3. CSS ô hỗ trợ trực tuyến

luat_css_hotro

ở phần css mình nhập gần như css của mục tìm kiếm, phần header mình nhapajf backgroud:{mau3} , hệ thống sẽ tự lấy màu chủ đạo 3 ( setup ở phần  bố cục >  nền PC)

 

 9.4. Ccss mục dân sự

luat_css_danhsu

 

luat_css_dansu2

 

9.5. CSS mục tin mới

luat_css_tin_moi

 

Phần tin mới này mình sẽ làm y hệt phần tìm kiếm, để đỡ mất công làm lại chúng ta sẽ làm như sau

Vào sửa mục tìm kiếm, đặt cho box này là box mẫu

luat_css_timkiem_boxmau

 

vào Giao diện > bố cục > Trang chủ PC để sửa mục tin mới

luat_sua_tinmoi

đặt lớp mẫu của box tin mới là "Tìm kiếm"

luat_dat_theo_lopmau

kết quả box tin mới giống hệt box tìm kiếm

luat_tinmoi

 

 

9.6. Css tin nổi nhất

luat_css_tin_noi_nhat

 

thêm đối tượng css box và nhập background:#fbfbfb;border:1px solid #ddd; padding:10px; border-radius:4px ;

luat_css_tin_noi_bat

 

kết quả

luat_css_tinnoi_ketqua

 

9.7. Css tin 3

mục này y hệt tin nổi nhất, các bạn có thể nhập y hệt tin nổi nhất hoặc đặt lớp ( class ) nếu muốn

css_tin3

9.8. CSS phần "Luật đất đai"

luat_css_datdai1

luat_css_dadai2


9.8. Tinh chỉnh một số chức năng nếu bạn muốn

mình cho nội dung giữa cách mép 10px

luat_css_tinhchinh1

cho cột phải cách mép phải 10px

luat_css_tinhchinh2



 10. Hoàn thiện menu ngang

Các bạn đưa hết tất cả sản phẩm dịch vụ vào menu ngang để khách hàng có thể truy cập đến mục mong muốn

Những mục chứa nhiều bài viết như Luật dân sự, đất đai ... thì các bạn liên kết vào danh mục bài viết

Những mục vào thẳng bài viết như Giới thiệu .. thì các bạn liên kết vào trực tiếp bài viết để giảm bớt số click của khách hàng

luat_menu_ngang




 

Chat hỗ trợ
Chat ngay