Thiết kế website với vài click chuột
Trang 1Copyright by BILLQUY.com Page 0
Trang 2Copyright by BILLQUY.com Page 1
MỤC LỤC
Lời nói đầu
Giới Thiệu
Phần 1: BẮT ĐẦU LÀM QUEN VỚI BLOGGER
Chương 1: Ưu và Nhược điểm của blogger
Chương 2: Tham khảo một số sản phẩm làm từ Blogger
Chương 3: Hướng dẫn đăng nhập blogger và thiết kế website cơ bản
Phần 2: HƯỚNG DẪN ĐĂNG BÀI CƠ BẢN VÀ NÂNG CAO
Chương 1: Hướng dẫn đăng bài lên website bằng cách COPY và PASTE
Chương 2: Hướng dẫn đăng bài nâng cao bằng cách Copywriting
Phần 3: THAY ĐỔI GIAO DIỆN, TẠO THANH MENU, THAY ĐỔI HÌNH GIAO DIỆN
Chương 1: Thay đổi giao diện cho website
Chương 2: Tạo thanh MENU theo ý của bạn
Chương 3: Thay đổi hình giao diện trong Slide ảnh
Phần 4: HƯỚNG DẪN ĐIỀU CHỈNH BỐ CỤC VÀ TIỆN ÍCH CHO WEBSITE
Chương 1: Hướng dẫn sử dụng tiện ích HTML thêm Video vào website
Chương 2: Hướng dẫn sử dụng tiện ích Hình Ảnh tạo Banner Quảng cáo
Chương 3: Hướng dẫn sử dụng tiện ích Văn Bản tạo Thông Tin Liên Hệ
Chương 4: Giới thiệu sơ lược về một số tiện ích khác
Hướng dẫn chọn và mua tên miền
Một số lời khuyên dành cho các bạn mới lập website bán hàng (Minishop) bằng
Trang 3Copyright by BILLQUY.com Page 2
LỜI NÓI ĐẦU
Chúng ta đang sống trong một cuộc cách mạng mang tên Internet Marketing!
Đó là cuộc cách mạng về cách thức liên hệ giữa mọi người với nhau Làm thế nào mà một thượng nghị sĩ nhiệm kỳ đầu tiên, một người da màu, trẻ tuổi, không mấy tiếng tăm với đôi tai trông thật khôi hài và một cái tên thậm chí còn khôi hài hơn, lại được bầu làm Tổng Thống của Hợp chủng quốc Hoa Kỳ?
Và cuộc cách mạng sẽ chắp cánh cho tự do! Vậy bạn còn chờ đợi điều gì nữa?
Tôi là một sinh viên dầu khí, mới bắt đầu bước trên con đường Internet Marketing gần được 4 tháng cách đây (12/2012 – 4/2013)
Đầu năm 2012 tôi không biết gì về Internet Marketing, tôi đã được học một lớp về thiết kế website bằng Blogger và từ đó tôi đã lập được website www.aodongphucdn.com Tôi kinh doanh đầu tiên chỉ yếu là Offline tìm kiếm đơn hàng từ bạn bè, CTV, phát tờ rơi… Tôi gặp khách hàng trực tiếp và giới thiệu về công ty của mình, show website để họ thấy mẫu Tôi hoàn toàn không ý thức về việc lên top của google Đối với tôi website chỉ để cho khách hàng lên xem mẫu
Và cuối năm 2012 tôi cất công từ Đà Nẵng vào HCM để học khóa học của anh Richdadloc
(INTERNET BOOTCAP 2012 và SOCIAL MEDIA 101) Tôi đã biết thế nào là Internet
Marketing, và tôi chuyển hầu như 80% công việc của mình tại ONLINE, và hiện giờ khách hàng của tôi đến từ online Tôi cùng hai bạn ở Đà Nẵng chạy một hệ thống website:
Và một số trang Landing page khác
Doanh thu của công ty tăng lên đáng kể, hiện giờ tôi chuyển giao toàn bộ hệ thống này cho hai bạn ở Đà Nẵng làm tôi tập trung 100% thời gian của mình để cùng Onnet phát triển hiện tại và trong tương lai
Hi vọng những kiến thức của tôi làm được và chia sẻ trong cuốn Ebook này sẽ giúp các bạn học và làm được một điều gì đó cho riêng bạn
Chúc các bạn SỨC KHỎE – HẠNH PHÚC – BÌNH AN
Trang 4Copyright by BILLQUY.com Page 3
GIỚI THIỆU
1 Blogspot là gì?
Blogspot (còn gọi là Blogger) giúp bạn tạo ra website hoàn chỉnh cho chính mình chỉ trong vài giây Tất cả được máy tính thực hiện tự động từ A đến Z, bạn không cần phải lập trình, thiết kế
hay phải bỏ ra chút công sức nào Hơn nữa, tất cả đều miễn phí bạn à
Từ ngày có Blogspot, các website được sinh tự động ra đời ngày càng nhiều, và được gọi chung là Blog Những người viết bài trên blog gọi là Blogger, công việc viết bài trên blog gọi là Blogging Các khái niệm này ban đầu cơ bản là vậy
2 Blogspot mạnh, nhanh, an toàn và miễn phí vĩnh viễn
Chắc bạn đã từng nghe đến cái tên Google nhỉ? Vâng, Blogspot chính là con ruột của tập đoàn đang thống trị thế giới internet này Chỉ nhiêu đó thôi đủ bạn hiểu được chất lượng của Blogspot cao như thế nào rồi
Những điểm nổi bật của Blogspot là tốc độ tải web nhanh, an toàn và gần nhƣ không thể bị
hack cũng nhƣ bị tấn công Các blog do Blogspot sinh ra có những chức năng và vẻ đẹp mà
những website hàng đầu đều ao uớc
Đẹp và chuyên nghiệp
Trang 5Copyright by BILLQUY.com Page 4
Ngoài ra, sử dụng Blogspot, bạn đã không phải bỏ công sức mà tất cả còn được miễn phí vĩnh
viễn Không những thế, Blogspot còn tạo cơ hội cho bạn kiếm được tiền và có thể là rất nhiều
cơ đấy
3 Và nhiều hơn thế nữa
Đến với Blogspot, bạn có quyền chọn tên miền riêng cho blog của mình Tên miền do Blogspot cung cấp ngắn, đẹp và có định dạng "TênDoBạnĐặt blogspot.com"
Đặt tên blog theo ý bạn
Không như nhiều dịch vụ khác, chỉ cho bạn tạo ra 1 blog, Blogspot cho phép mỗi người tạo ra bao nhiêu blog tùy thích
Đặc biệt nhất, bạn có thể nói chuyện, trao đổi với những người xem blog của mình thông qua chức năng nhận xét Hơn nữa, bạn còn có thể kết nối với các bạn bè cũng dùng Blogspot giống mình
Kết bạn tự do
Và còn hàng tấn tấn những cái độc, hay, đỉnh mà Blogspot đang chờ bạn khám phá Now, Let's Blogspot!
Trang 6Copyright by BILLQUY.com Page 5
Phần 1:
BẮT ĐẦU LÀM QUEN VỚI BLOGGER
“Không phải những thứ chúng ta không biết khiến ta gặp rắc rối
mà người lại”
Mark Twain
Trang 7Copyright by BILLQUY.com Page 6
Chương 1: ƯU và NHƯỢC ĐIỂM CỦA BLOGGER
Mình sử dụng blogger, mình thấy nó rất tốt để xây dựng hệ thống vệ tinh trong hệ thống web của bạn Bạn dùng nó để làm Langding page, trang cá nhân, trong quảng cáo sản phẩm và nhiều mục đích khác Trong quá trình làm mình thấy một số ưu và nhược điểm của Blogger như sau:
1 Ưu điểm:
- Blogspot là một phần của google nên khi search google nó hiện thị kết quả rất tốt
- Giao diện của nó khá là thân thiện và dễ sử dụng
- Với blogspot thì việc lựa chọn phần thân cho blog cũng hết sức dễ dàng
- Việc thay đổi và chỉnh sửa trên blogspot cũng khá là đơn giản và dễ dàng
- Còn khi bạn muốn thay đổi toàn bộ thiết kế cũ bằng một thiết kế mới, bạn chỉ cần lưu lại một bản sao của mẫu trước khi bạn tiến hành những thay đổi mới ở phần chỉnh sửa html
- Blogspot cho phép bạn upload ảnh để trang trí ở thanh bên ngay từ trên máy tính của bạn, cũng như bạn có thể dẫn link ảnh từ trang khác
- Trang trí cho blog của mình những tiện ích như (đồng hồ, bướm bay, ….) chỉ bằng việc copy những đoạn code sẵn có và paste vào tiện ích html
- Với blogspot bạn cũng có thể chình màu chữ tùy theo ý thích của mình ở tất cả các phần của blog (như màu chữ ở header, ở thanh bên…)
2 Nhược điểm:
- Cập nhật các comment ở mỗi bài viết chậm Không liên kết trực tiếp được với trang web của người để lại comment
- Không tạo được liên kết trang kiểu tập con giống như Wordpress
- Chỉ có thể cập nhật những bài viết mới với những blogger có trong blogroll
- Không có chức năng cài đặt password cho bài viết mà mình muốn bảo mật
Trang 8Copyright by BILLQUY.com Page 7
Chương 2: THAM KHẢO MỘT SỐ SẢN PHẨM LÀM TỪ BLOGGER
1 Những website của BillQuy tự tạo ra:
Trong quá trình làm blogger mình đã tạo ra những trang web sau, đa phần chúng dùng để bán hàng:
1 www.amalink.vn Trang chính của hệ thống đồng phục đà nẵng
2 www.aodongphucdn.com Chuyên cung cấp đồng phục doanh nghiệp
3 www.aolopdanang.com Chuyên cung cấp áo lớp cho sinh viên
4 www.aodongphucdanang.com Chuyên cung cấp đồng phục cho học sinh
5 www.aodoidanang.com Chuyên cung cấp áo đôi cho cặp tình nhân
6 www.billquy.com Website cá nhân của Bill Quy
2 Những website hữu ích cho bạn trong quá trình làm Blog
1 www.namkna.blogspot.com/ Trang này cung cấp đầy đủ các tiện ích và thủ thuật
nâng cao để tạo ra 1 blog cực kì chuyên nghiệp
2 www.billquy.com Mình sẽ gởi một vài thông tin về blogger và thủ
thuật nâng cao mà mình đã thực hành được trên web này
3 Website tham khảo
Trang 9Copyright by BILLQUY.com Page 8
Chương 3: HƯỚNG DẪN ĐĂNG NHẬP BLOGGER VÀ THIẾT KẾ
WEBSITE CƠ BẢN
1 Hướng dẫn đăng nhập Blogger
B1: Bạn phải có một tài khoản google (Gmail)
Vd: billquy@gmail.com
B2: Vào blogger và đăng nhập như đăng nhập Gmail
B3: Nếu bạn là người đầu tiên vào blogger thì xem
6./ Vào lại blogger.com thì giao diện sẽ như thế này
Trang 10Copyright by BILLQUY.com Page 9
2 Thiết kế website cơ bản
Click vào “BLOG MỚI”
Tiến hành điền đầy đủ thông tin, có hai trường hợp xảy ra
1 Blog bạn định làm đã có người khác tạo, trường hợp này bạn tiến hành nhập lại cho đến khi được thì thô
2 Blog bạn định làm chưa ai tạo, thế là Ok – chúc mừng bạn -> Click vào “TẠO BLOG”
Trang 11Copyright by BILLQUY.com Page 10
Giao diện sẽ xuất hiện như thế này:
Để vào trang điều khiển của Blogger bạn làm tương tự như hình bên dưới
Đây là giao diện thiết kế, thông kê của Blog
Trang 12Copyright by BILLQUY.com Page 11
Trang 13Copyright by BILLQUY.com Page 12
Chương 1: HƯỚNG DẪN ĐĂNG BÀI LÊN WEBSITE BẰNG CÁCH COPY và PASTE
Bước vào mấy phần này hơi kỹ thuật một tí, các bạn kiên trì để tiếp tục con đường các bạn chọn nhé
1 Hướng dẫn sơ lược về giao diện bài đăng
Click vào nút “Bài Đăng Mới”
Nó sẽ hiển thị ra bảng sau, bạn đăng bài như bạn soạn thảo văn bản
Phần này gồm các phần chủ yếu sau:
- Font chữ: Giúp bạn định dạng Font chữ, ở đây mình khuyến khích các bạn dùng
Font “ARIAL”, font này rất tốt cho người đọc lẫn SEO
Font chữ
Cỡ chữ
Tạo liên kết
Upload video Upload hình ảnh
Thẻ HTML
Trang 14Copyright by BILLQUY.com Page 13
- Cỡ chữ: Bạn nên chọn cỡ chữ “CHUẨN” là hợp lý nhất
- Tạo liên kết: giúp bạn tạo những liên kết mà khi click vào đoạn text đó nó sẽ ra một
web, hoặc một bài viết nào đó
Vd: Sứ mệnh của ONNET là tạo ra các chương trình đào tạo, sản phẩm và giải pháp hỗ trợ cho hàng triệu người Việt Nam ONNET không ngừng đa dạng hóa các sản phẩm, đưa ra các giải pháp tốt và toàn diện nhất để đáp ứng được đa số yêu cầu của khách hàng cũng như tạo ra các giá trị to lớn khác mà có thể bản thân khách hàng còn chưa nghĩ tới
Ở đây mình sẽ tạo một liên kết cho chữ ONNET, và khi click vào đó thì nó sẽ nhảy sang trang www.onnet.com.vn
- Upload hình ảnh: cho phép bạn upload hình ảnh từ máy tính của bạn lên website Khi
bạn upload thì toàn bộ hình ảnh này được lưu tại Google +
- Upload video: cho phép bạn upload video lên website của bạn, tốt nhất bạn nên Upload
sang một trang youtube, rồi dùng thẻ HTML để chèn vào bài viết
- Thẻ HTML: ở đây có hai thể đó là Viết và HTML Khi bạn viết bài thì bạn chọn thẻ Viết,
còn khi bạn chèn một đoạn Code nào đó vài bài đăng thì chọn HTML
2 Hướng dẫn đăng bài đăng bằng COPY và PASTE
Vào một website để copy bài bạn muốn tương tự như hình vẽ Ở đây mình vào
www.onnet.com.vn
Trang 15Copyright by BILLQUY.com Page 14
Vào phần bài đăng và PASTE đoạn mới COPY vừa rồi tương tự như hình bên dưới
Click vào nút XUẤT BẢN nó sẽ hiện ra khung SHARE lên GOOGLE +, nếu bài viết của bạn
chất lượng, bạn bè của bạn trên GOOGLE + nhiều thì bài viết của bạn sẽ được tương tác rất tốt Sẽ giúp bạn tăng lương lượng view vào website của bạn
Trang 16Copyright by BILLQUY.com Page 15
Bám nút SHARE hoắc CANCEL để xem bài viết Click vào xem website bên trên của vùng điều
khiển
bạn sẽ thấy giao diện như sau:
Tương tự với cách làm này bạn đăng khoản 3 đến 5 bài đăng để khi chỉnh sửa mẫu và hoàn thiện website của bạn được đẹp hơn
Lưu ý: bài đăng của bạn có thể xóa hoặc chỉnh sửa tùy theo ý thích của bạn
Trang 17Copyright by BILLQUY.com Page 16
Chương 2: HƯỚNG DẪN ĐĂNG BÀI NÂNG CAO BẰNG CÁCH
COPYWRITING
1 Giới thiệu sơ lược về Copywriting
Copywriting có thể bao gồm bài viết, slogan (khẩu hiệu), tiêu đề, thư, tagline, lời hát quảng cáo
Trên các website, copywriting thể hiện ở phương pháp viết và sử dụng từ ngữ có khả năng tăng thứ hạng của website trên các công cụ tìm kiếm
Đó là thuật ngữ về Copywriting, nói chung nó rất lý thuyết, mình đã được học cách của anh Richdadloc (chuyên gia internet marketing hàng đầu tại Việt Nam) trong khóa học
Internet Bootcamp - Social media 101 – internet marketing coaching
Phần này mình chỉ cho các bạn loại bỏ Back link và chỉnh sửa một vài chỗ Phần chuyên sau thì bạn nên chọn cho mình các khóa học để được nâng cao kiến thức
2 Hướng dẫn cách đăng bài bằng copywriting
Ban đầu bạn cũng làm tương tự như bước trên Vào một trang web nào đó copy bài,
nhưng bạn không paste vào phần Bài đăng mà paste vào Notepad
Cách lấy Notepad trong Win: Bạn làm theo hướng dẫn bên dưới
Trang 18Copyright by BILLQUY.com Page 17
Phần Notepad sẽ hiện ra và bạn Paste đoạn văn bản mới copy vào Notepad:
Khi paste vào Notepad thì toàn bộ Backlink và Ảnh của bài đăng bị loại bỏ, chỉ còn lại đoạn
text
Bạn copy đoạn văn bản trong Notepad và Dán vào Bài Đăng bên Blogger:
Mất hết ảnh và Backlink thì bạn làm thế nào để có một bài đăng giống bài đăng cũ, đầu tiên bạn vào bài bạn muốn copy lưu ảnh về máy tính và đặt tên ảnh bằng Từ Khóa bạn muốn
SEO
Trang 19Copyright by BILLQUY.com Page 18
Và sau đó Upload lên bài đăng của Blogger
Upload ảnh lên:
Chỉnh sửa ảnh sau khi upload:
Click vào Upload Ảnh
Đặt dấu nháy vào vị trí cần đặt ảnh
Khi bạn click vào phần chỉnh sửa ảnh hiện ra một khung chỉnh sửa ảnh như trên, bạn chỉnh sửa sao cho phù hợp nhất theo ý kiến của bạn Làm tương tự để có một bài đăng đẹp và chất lượng
Trang 20Copyright by BILLQUY.com Page 19
Phần 3:
THAY ĐỔI GIAO DIỆN, TẠO THANH MENU, THAY ĐỔI HÌNH GIAO DIỆN
“Đừng so sánh bản thân bạn với bất cứ ai khác trên thế giới này
Nếu làm như vậy, bạn đang xúc phạm chính mình.”
Bill Gates
Trang 21Copyright by BILLQUY.com Page 20
Chương 1: THAY ĐỔI GIAO DIỆN CHO WEBSITE
Phần này Bill Quy sẽ làm trên giao diện đã được áp dụng để xây dựng trang web bán hàng của mình Đây là giao diện của Templates
Vào website www.billquy.com , vào phần mục “Cho Đi”, có mục templates mẫu cho ebook
“Thiết kế website chỉ bằng vài click chuột” Load mẫu về máy tính
Anh chị có thể tìm một số giao diện khác trên trang www.btemplates.com Nếu anh chị là người làm Blogger lần đầu thì Bill Quy khuyên anh chị làm theo templates mà BillQuy gợi ý để quá trình học và làm hiệu quả hơn
Sau khi học xong anh chị có thể làm theo Template của anh chị ưng ý
Vào lại www.blogger.com , vào mục điều khiển chọn mẫu theo hình như sau:
2/ Sao lưu/khôi phục
Trang 22Copyright by BILLQUY.com Page 21
Upload Templates lên
Vào blogger và Click vào “Xem Blog” thì bạn sẽ có một website như thế này, chỉ cần 3 click chuột bạn sở hữu cho mình một website với giao diện vô cùng đẹp, giúp bạn kinh doanh và mang về lợi nhuận cho công việc của mình
Như Bill Quy đã nói ở trên, bạn có thể tìm thêm những mẫu đẹp trên Google hoặc tại trang
www.btemplates.com sẽ có rất nhiều mẫu đẹp Giờ thì chúng ta tiếp tục bài học bằng cách tạo
thanh MENU
Trang 23Copyright by BILLQUY.com Page 22
Chương 2: TẠO THANH MENU THEO Ý CỦA BẠN
1 Thay đổi tiêu đề thanh Menu cho web
Thanh Menu cũ co mẫu như sau, giờ chúng ta sửa thành
Thanh menu cũ Thanh Menu mới
Hướng Dẫn Giới Thiệu Bản Thân
- Cách Chọn Màu Áo - Sứ Mệnh
- Cách Chọn Size Áo - Mục Tiêu
- Tư Vấn Thiết Kế - Sứ Mệnh
Để làm được việc này, bạn vào lại mục điều khiển blogger, chọn “mẫu” -> “Chỉnh sửa mẫu”
thì sẽ hiện ra bảng sau Rê chuột vào khung mẫu và bấm “Ctrl +F” và đánh từ “Hướng Dẫn” vào ô tìm kiếm