HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN I

-----------

                                                                        

BÁO CÁO

THIẾT KẾ TRANG WEB BẰNG BLOGSPOT

Sinh viên: Hoàng Thị Thu Hằng

Mã sinh viên: B18DCN201
Nhóm: 05
Giảng viên: Nguyễn Quang Hưng
Chủ đề: Trang web bán máy tính, laptop và phụ kiện
Sản phẩm: https://hthcomputer.blogspot.com/
Template: https://btemplates.com/2011/blogger-template-shopstore/
1.Các bước tạo trang web
* Lựa chọn template trên trang web cung cấp template miễn phí của nước
ngoài : https://btemplates.com/
 Sau khi chọn xong template phù hợp, tiến hành tải template về máy, và
giải nén.
 Sau khi giải nén sẽ có 1 file .xml, file này sẽ dùng để thêm vào mục chủ
đề trên blogspot.
* Tạo trang:

 Truy cập :https://www.blogger.com/

 Tạo tiêu đề cho blog của bạn

 Tạo URL:
  Lưu Tạo được trang blog thành công
 Truy cập lại vào trang blogspot  Chủ đề  Click vào mũi tên đi xuống
cạnh chỉnh sửa Khôi phục Chọn file .xml và tải lên

2.Tạo bài đăng

- Chọn: + Bài đăng mới

- Viết bài: Thêm tiêu đề, nội dung, hình ảnh minh họa và nhãn cho sản phẩm

- Xuất bản  tạo được bài đăng mới, làm tương tự với các bài khác

3. Chỉnh sửa trang web

(*) Chỉnh sửa thanh menu

- Tại mục Chủ đề  chọn chỉnh sửa HTML

- Tìm đến phần Menu và thực hiện code HTML theo ý của mình
- Các đường link trong href là đường dẫn tới các thẻ tương ứng đã gắn vào các
bài đăng về sản phẩm.

Tạo thanh điều hướng, khi người hem trỏ chuột vào mục Laptop sẽ tụt xuống
các phần DELL, ASUS,…

(*) Chỉnh sửa slider

-Thêm các đường link hình ảnh trong thẻ img và link bài viết khi chọn vào hình
ảnh đó
(*) Sửa chân trang:

- Chọn mục “Chủ đề” “chỉnh sửa HTML”ctrl+f và tìm <div

id=’footer’>
- Chỉnh sửa lại theo ý muốn.

4. Thêm tiện ích cho trang web

- Chọn mục Bố cục, thêm các tiện ích

(*) Thêm Fanpage Faceook:

- Chọn thêm tiện ích ở phần sidebarright và chọn tiện ích HTML/JavaScript

- Điền tiêu đề :” Facebook” và nội dung:

- Phần nội dung được lấy như sau:

+ Lấy đường link của Fanpage
+Truy cập: https://developers.facebook.com/docs/plugins/page-plugin/
+ Dán đường link Fanpage vào mục URL Trang Facebook
+ Chọn “Lấy mã”
+ Copy đoạn mã ở bước 2 và bước 3 vào phần “nội dung” theo thứ tự lần lượt
+ Kết quả:

(*) Thêm video Youtube:

- Chọn thêm tiện ích ở phần sidebarright và chọn tiện ích

HTML/JavaScript
- Điền tiêu đề :” Video” và nội dung:
- Phần nội dung được lấy như sau:
+ Vào Youtube tìm video cần thêmchọn “Chia sẻ” “Nhúng””Sao
chép”
+ Paste vào “nội dung”

+ Kết quả:
(*) Thêm google map

- Chọn thêm tiện ích ở phần sidebarright và chọn tiện ích

HTML/JavaScript
- Điền tiêu đề và nội dung:
- Nội dung được lấy như sau:

+ Vào trang https://www.google.com/maps/

+ Tìm địa chỉ cần them
+ Chọn “Chia sẻ hoặc nhúng bản đồ” “ nhúng bản đồ”
+ “Sao chép HTML” và paste vào phần “Nội dung”
(*) Thêm plugin chat Facebook Messenger:
- Vào Fanpage  Cài đặt Trang
- Chọn mục “ Nhắn tin”
- Chọn “bắt đầu” ở mục thêm Messenger vào trang web

- Chọn “Thiết lập” Dán đường link của trang web vào bước “Thêm
miền” lưu và tiếp tục

- “Sao chép mã”  Dán đoạn mã trên vào trước thẻ </body> trong phần
sửa HTML của trang web
- Thiết lập thêm cho plugin chat của bạn như lời chào, vị trí của plugin
trong trang web:
(*) Thêm Plugin bình luận của Facebook:
- Truy cập trang: https://developers.facebook.com/products/social-
plugins/comments/?
utm_campaign=social_plugins&utm_medium=offsite_pages&utm_sourc
e=comments_plugin

- Chọn “Tải Plugin bình luận”

- Ở phần “Trình tạo mã plugin Bình luận” , dán đường link trang web vào
phần “URL để bình luận” “Lấy mã”

-Copy mã ở bước 2 và dán vào ngay trước thẻ </body> ở phần “chỉnh sửa
HTML” của trang web
- Tiếp theo tìm đoạn mã <b:includable id='comments' var='post'>rồi copy -
paste đoạn code ở Step 3 vào dưới đoạn mã <b:includable id='comments'
var='post'>

- Kết quả: