Hướng dẫn tạo website chuyên nghiệp từ BLOG gồm: PHẦN I: Hướng dẫn thiết kế website – Cơ bản Bước 1: Tạo Blog Bước 2: Đăng bài viết PHẦN II: Hướng dẫn thiết kế website – Nâng cao PHẦN III: Code hỗ trợ thiết kế website
Trang 1
Chào bạn hôm nay chúng tôi tạo ra tài liệu này để chia sẻ với bạn một giải pháp tuyệt với giúp cho bạn tạo ra một hệ thống website chuyên nghiệp, điều đáng nói là giải pháp mà ngay sau đây chúng tôi chia sẻ với bạn nó này hoàn toàn miễn phí, vì giải pháp mà chúng tôi đưa ra hoàn toàn
sử dụng các tài nguyên sẵn có của Google nên chất lượng dịch vụ đảm bảo rất tốt cụ thể là: website chạy rất nhanh, bảo mật cao, không phải mất phí hosting, khả năng SEO tốt, khả năng cập nhật bài nhanh, khả năng xây dựng website linh hoạt, tùy chỉnh tên miền nhanh chóng… và đặc biệt là rất dễ sử dụng
Tuy nhiên có một lưu ý đối với bạn là bạn tuyệt đối không nên dùng các giải pháp Spam để tiếp thị website được thiết kế từ giải pháp này vì nếu như vậy bạn sẽ dễ bị xóa tài khoản Google của bạn Qua các chương trình đào tạo của chúng tôi đã có rất nhiều các doanh nghiệp sử dụng giải pháp này để xây dựng website
Trước khi đi vào giải pháp này thì bạn cần làm tốt 3 việc: Một là nghiên cứu từ khóa và tìm ra tên miền phù hợp (Phần này được chúng tôi chia sẻ ở phần trước) Hai là bạn phải mua tên miền như đã được chọn Ba là bạn phải tạo tài khoản Gmail
Tài liệu này chúng tôi thiết kế gồm 3 phần:
PHẦN I: Hướng dẫn thiết kế website – Cơ bản
Bước 1: Tạo Blog
Bước 2: Đăng bài viết
PHẦN II: Hướng dẫn thiết kế website – Nâng cao
PHẦN III: Code hỗ trợ thiết kế website
Trang 2PHẦN I: Hướng dẫn thiết kế website – Cơ bản Bước 1: Tạo Blog
Đầu tiên bạn truy cập vào Blogger.com và đăng nhập bằng tài khoản Gmail đã được lập từ trước (lưu ý: mật khẩu Gmail này bạn giữ gìn mật khẩu cho tốt và tuyệt đối bạn không nên dùng tài khoản này để gửi Email Spam nếu không tài khoản Gmail của bạn sẽ bị xóa và blog của bạn cũng bị xóa theo)
Bạn click vào phần “Blog mới” bên trái màn hình, sẽ xuất hiện giao diện màn hình như sau:
Trang 3Đầu tiên bạn nhập tên tiêu đề hiển thị cho blog (lưu ý: Tên hiển thị nên trùng với tên từ khóa mà bạn muốn đưa lên top 10 google Ví dụ: tiêu đề: Học Kiếm Tiền Online | Học Kiếm Tiền Trên Mạng | Học Kiếm Tiền Trực Tuyến) Thứ 2 bạn nhập địa chỉ cho blog, nếu địa chỉ bạn mong muốn đã có người khác sử dụng thì bạn chọn tên khác cho phù hợp Sau đó bạn một mẫu bất kỳ
và click nút “Tạo blog”
Bước 2: Đăng bài viết:
Việc đăng blog lên blog là rất dễ dàng, bạn có thể đưa vào bài viết của mình như: Hình ảnh, video hay các đoạn văn bản Bạn click vào “tạo bài đăng mới” – biểu tượng cây bút
Giao diện tạo bài đăng như sau:
Trang 4Khi đưa video vào bài viết bạn có thể tải từ máy tính của bạn hay lấy từ trang Youtube hoặc từ kênh video của bạn trên Youtube, việc được hình ảnh vào bài viết cũng làm tương tự, bạn có thể tải từ máy tính của mình hoặc tài khoản Picasa của bạn Bạn có thể tùy chỉnh kích thước của ảnh (nhỏ, trung bình, lớn, rất lớn, ban đầu) Bên canh đó bạn có thể ghi chú vào mỗi tấm hình của mình ở phần “thêm chú thích”
Lưu ý:
Nếu bạn sao chép bài viết từ website khách thì bạn nên copy bài đăng đó vào “Notepad” sau đó bạn mới đưa vào bài đăng để nhằm mục đích loại bỏ tất cả các link liên kết từ website cũ
Phần “thêm chú thích” bạn nên mô tả đến nội dung hình ảnh và chứa từ khóa cần SEO
Phần “thuộc tính” bạn nên để các từ khóa cần SEO Ví dụ: Học Kiếm Tiền Online | Học KInh Doanh Online Mục đích dùng thuộc tính là vì nếu không hiển thị được hình ảnh thì sẽ hiện thị các dòng chữ đó
Với mỗi bài đăng bạn nên tạo cho nó một cái Nhãn để nhằm mục đích: Tiện cho việc tìm kiếm sau này, phân loại bài đăng theo từng mục, Chứa các từ khóa SEO bài viết đó Khi chỉnh sửa xong bạn tạo xuất bản
PHẦN II: Hướng dẫn thiết kế website – Nâng cao
Bước 1: Thay đổi giao diện cho blog
1 Tìm mẫu website phù hợp với lĩnh vực bạn chọn:
Trên thực tế blogger đã cung cấp sẵn một số giao diện để bạn lựa chọn tuy nhiên những mẫu này vẫn chưa chuyên nghiệp và mang tính chiến lược Bạn có thể truy cập vào một số trang web sau
để tải về mẫu phù hợp với lĩnh vực mà bạn đang theo đuổi (tại đây có rất nhiều mẫu website đẹp mang tính chiến lược cho bạn lựa chọn)
Trang website cung cấp mẫu:
Trang 5Lưu ý: Có những mẫu có 2 file “.xml” một file có chứa slider một file không có slider, bạn nên chọn file có slider giao diện sẽ them phần chuyên nghiệp hơn
2 Đưa mẫu tải về lên blog của bạn
Giả sử ở phần trên tôi đã chọn được mẫu giao diện như sau
Đầu tiên bạn trở lại giao diện chính của blog:
Sau đó bạn click vào phần :
Trang 6Bạn click vào “choose file” và chọn file có đuôi “.xml” và nhấn nút “tải lên” Sau đó bạn xem blog giao diện có dạng như sau:
Bước 2: Tạo trang
Trong blog ngoài bài đăng chúng ta còn được phép tạo thêm các trang Bài đăng thì chúng ta có thể tạo bao nhiêu bài đăng cũng được nhưng trang thì chúng ta chỉ được phép tạo tối đa là 20 trang, việc tạo trang sẽ giúp chúng ta bố cục trang web sẽ giúp cho website của chúng ta đẹp hơn
và tiện lợi hơn khi khách hàng ghé thăm vào website của chúng ta Có 2 cách tạo trang, một là tạo trang trống, hai là tạo trang liên kết để khi nhấp vào sẽ dẫn đến một website khác như hình dưới:
Trang 7Lưu ý: Bạn không nên tạo quá nhiều trang sẽ gây rối cho website Trên thực tế website càng đơn giản lại càng thu hút được khách hàng
Bước 3: Tạo menu cho website
Như bạn đã biết một trang web chuyên nghiệp là một trang web phải có bố cục tốt, chính vì vậy
mà menu chính sẽ giúp chúng ta bố cục sao cho tiện lợi nhất nhằm thỏa mãn nhu cầu tìm kiếm của khách hàng, đồng thời nhằm mục đích giúp cho SEO dễ dàng hơn Trên menu bạn lưu ý là nên chứa các từ khóa liên quan đến mục đích SEO của website
Hình ảnh giao diện menu:
Mục tiêu trong bước 3 này là chúng tat hay đổi menu tiếng anh thành menu tiếng việt và theo các mục mà chúng t among muốn
Trang 8Khi bạn muốn chỉnh sửa mục nào thì đầu tiên bạn vào trong code HTML thì bạn bấm đồng thời
Ctrl + F sau đó bạn nhập từ vào và tìm kiếm và chỉnh sửa những từ cần thiết Bạn có thể xem hình bên dưới
Trang 9
Lưu ý: Trong quá trình chỉnh sửa code, nếu bạn chưa quen bạn nên lưu ý một số điểm
Bạn nên lưu lại toàn bộ code bằng cách tải về hoặc copy sang file Notepad trước khi bắt tay vào chỉnh sửa
Trang 10 Bạn nên cân nhắc thật kỹ trước khi chỉnh sửa
Khi làm xong thao tác bạn nên bấm xem trước nếu được thì mới lưu lại, nếu không được bạn quay lại và bấm đồng thời Ctrl + Z để phục hồi lại và xem xét sửa tiếp
Bạn có thể xem qua giao diện sau khi chỉnh sửa:
Bước 4: Thay đổi ảnh nền và phông chữ:
Thay đổi ảnh nền: Việc đầu tiên bạn cần làm là bạn cài đặt phần mềm firebug (lưu ý bạn dùng
trình duyệt nào thì bạn cài firebug cho trình duyệt đó, có firebug cho firefox và có firebug cho google chrome) Khi xuất hiện hình ảnh “con bọ” bên phải phía trên trình duyệt là được
Sau đó bạn truy cập vào website của bạn, và click vào nhấn phím F12 (hay bạn click trực tiếp vào biểu tượng “con bọ” đó Hình ảnh như dưới đây
Trang 11Thay đổi font chữ:
Bước 5 : Tạo tiện ích
Bạn nhìn vào bên phải của hình dưới các tiện ích đã được tạo ra Mục đích của các tiện ích là giúp cho website tương tác tốt hơn và hiệu quả hơn
Bạn vào quản trị của blog, bạn chọn “bố cục” sau đó bạn chọn “thêm tiện ích”
Đầu tiên chúng ta tạo ra tiện ích “nhãn”: Nhãn là tiện ích lọc các bài đăng cùng một chủ đề
nhằm giúp khách hàng ghé thăm website dễ tìm kiếm các bài viết hơn, chúng ta muốn xuất hiện tất cả các nhãn cũng được hay chỉ cho xuất hiện những nhãn mà chúng ta đã chọn (từ menu)
Trang 12Tạo tiện ích thống kê lượng người truy cập website: Tiện ích này cho chúng ta biết đã có bao
nhiêu người ghé thăm website của chúng ta kể từ khi được xuất bản Để tạo được tiện ích này bạn vào chỉnh sửa “bố cục”, bạn vào thêm tiện ích ở menu bên phải sau đó bạn chọn “tiện ích thống kê”, trong này bạn có thể tùy chọn các hình dạng hiển thị khác nhau, sau đó bạn click
“lưu” là ok
Hình ảnh tiện ích “thống kê” đã được tạo ra:
Biến tiện ích liên kết mạng xã hội thành của bạn: Mục tiêu của phần này nhằm để tạo ra các
liên kết giữa các hệ thống website và hệ thống mạng xã hội với nhau nhằm hỗ trợ nhau phát triển, đồng thời giúp cho khách hàng dễ dàng tìm hiểu về các sản phẩm và dịch vụ của bạn một cách nhanh nhất, tăng mức độ tương tác giữa doanh nghiệp của bạn và khách hàng
Bạn có thể nhìn thấy hình ảnh bên dưới:
Để thay đổi tên: bạn chỉ cần vào phần “mẫu” chỉnh sửa html và nhấn Ctrl + F tìm từ cần thay
đổi và bạn có thể đổi thành tên bạn mong muốn, ví dụ trong phần này tôi đổi thành “LIÊN KẾT MẠNG XÃ HỘI”
Trang 13Để thay đổi link các mạng xã hội cũng tương tự như trên bạn vào phần “mẫu” chỉnh sửa html và nhấn Ctrl + F, bạn tìm từ twitter hoặc facebook sẽ có dạng như hình dưới
Tạo tiện ích hỗ trợ trực tuyến: Cũng tương tự như trên để tạo được tiện ích này bạn vào chỉnh
sửa “bố cục”, bạn vào thêm tiện ích ở menu bên phải sau đó bạn chọn thêm phần
“HTML/Javascript” , sau đó bạn paste mã dưới đây và lưu lại
Yahoo: bạn thay nick yahoo và tên của bạn bởi ỗ chữ tô màu vàng
<p style="text-align: center"><span style="font-size: large"><span style="font-family: Verdana"><span style="color: rgb(0,0,255)"><span style="color: rgb(0,0,128)"><span class="style5"><span style="color: rgb(0,128,128)"> AdamThiên </span> <a
src="http://opi.yahoo.com/online?u= adamthien &m=g&t=2"
/></a></span></span></span></span></span></p>
Skype: bạn thay nick skype của bạn bởi chữ màu vàng
<p style="text-align: center"><script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script><a
href="skype:adamthien?call"><img
src="http://download.skype.com/share/skypebuttons/buttons/call_blue_white_124x52.png" style="border: none;" width="124" height="52" alt="Skype Me™!" /></a></p>
Hình ảnh sẽ có dạng như sau:
Trang 14Tạo tiện ích mẫu lịch:
Cũng tương tự như trên để tạo được tiện ích này bạn vào chỉnh sửa “bố cục”, bạn vào thêm tiện
ích ở menu bên phải sau đó bạn chọn thêm phần “HTML/Javascript” , sau đó bạn paste mã dưới
đây và lưu lại
<embed download.swf?link=http://img11.imageshack.us/img11/1925/farmroostermyspacecalen.swf" width=210 height=290 type=application/x-shockwave-flash wmode="transparent"
Trang 15Tạo tiện ích form đăng ký: Thông thường theo thống kê thì một khách hàng trước khi mua
hàng của bạn thì họ phải quay lại website của bạn trung bình là 7 lần Chính vì vậy mà chúng ta cần kiểm soát và tìm cách thu thập thông tin của khách hàng đã ghé thăm website của chúng ta, chúng ta sẽ dùng các biện pháp chăm sóc sau đó để thúc đẩy khách hàng mua hàng của mình Tiện ích này chính là giải pháp cho vấn đề đó
Để làm được việc này chúng ta cần làm 2 bước:
Bước 1: Tạo ra form đăng ký: Hiện nay có rất nhiều website nổi tiếng cho phép chúng ta tạo ra
những template đăng ký rất đẹp điển hình như: madmimi.com; getresponse.com…Trong bài này tôi sẽ hướng dẫn bạn tạo template với getresponse.com Bạn đăng ký tài khoản miễn phí tại getresponse.com, bạn đăng nhập tài khoản, sau đó bạn vào phần “web forms” bạn tạo web form mới Tại đây có rất nhiều mẫu cho bạn lựa chọn và tùy biến, sau khi tạo xong bạn click “next step” 2 lần và lấy mã JavaScript
Bước 2: Đưa form vừa tạo vào website của bạn: Cũng tương tự như trên để tạo được tiện ích
này bạn vào chỉnh sửa “bố cục”, bạn vào thêm tiện ích ở menu bên phải sau đó bạn chọn thêm phần “HTML/Javascript” , sau đó bạn paste mã vừa tạo ở bước 1 và lưu lại
Hình ảnh tiện ích sau khi đã được tạo ra:
Tạo tiện ích like box của facebook: Mục đích của like box là làm tăng số lượng người like trên
fanpage của bạn trên facebook, đây cũng là một giải pháp thu thập thông tin khách hàng của bạn, qua đó bạn có thể dễ dàng tiếp cận với khách hàng mục tiêu đồng thời bạn có thể truyền tải những thông điệp rõ ràng đến khách hàng mục tiêu của mình, hay giới thiệu những sản phẩm mới của doanh nghiệp của bạn
Bạn làm theo các bước sau: Điều kiện bạn có tài khoản fanpage trên facebook
Bước 1: Bạn truy cập vào: http://developers.facebook.com/docs/reference/plugins/like-box/
Trang 16Bạn chọn vào like box trong danh sách plugin bên trái mà hình Tiếp theo, bạn vào trang Facebook riêng copy đường dẫn - URL của trang và thay thế vào Sau đó bạn click “get code” và nhận mã
Bước 2: Cũng tương tự như trên để tạo được tiện ích này bạn vào chỉnh sửa “bố cục”, bạn vào
thêm tiện ích ở menu bên phải sau đó bạn chọn thêm phần “HTML/Javascript” , sau đó bạn paste
mã vừa tạo ở bước 1 và lưu lại
Hình ảnh đã được tạo:
Tạo tiện ích video: Tiện ích video là một tiện ích rất thú vị vì nó giúp cho chúng ta truyền tải
thông điệp một cách đầy đủ nhất Video này bạn có thể lấy trên youtube của người khác hoặc bạn lấy từ trang youtube của bạn Nó có thể là một video giới thiệu sản phẩm hay một video gì
đó nói về những giá trị website của bạn Để làm được điều này bạn làm theo các bước sau:
Bước 1: Bạn truy cập vào youtube.com và tìm video mà bạn cần gắn Dưới phần video bạn click
vào nút “chia sẻ - share” bạn vào “nhúng - embed”, bạn chọn “sử dụng mã nhúng cũ - Use old embed code” bạn có thể gõ chiều rộng – width và chiều cao – height (kích thước phụ thuộc vào kích thước mà bạn muốn đặt vào website của bạn) Sau đó bạn copy mã vừa tạo
Bước 2: Cũng tương tự như trên để tạo được tiện ích này bạn vào chỉnh sửa “bố cục”, bạn vào
thêm tiện ích ở menu bên phải sau đó bạn chọn thêm phần “HTML/Javascript” , sau đó bạn paste
mã vừa tạo ở bước 1 và lưu lại
Hình ảnh tiện ích sau khi đã được tạo ra:
Trang 17Tạo tiện ích Holine: Tiện ích hotline giúp cho website tương tác với khách hàng rất tốt vì vậy
bạn không thể thiếu tiện ích này Để tạo được tiện ích này bạn làm theo các bước sau:
Bước 1: Việc đầu tiên là bạn đưa hình ảnh (được thiết kế từ trước hay lấy từ google images) vào
bài đăng nháp sau đó bạn bổ sung thêm số điện thoại, địa chỉ email, địa chỉ công ty Rồi chuyển
từ chế độ “viết” sang chế độ “html” sau đó lấy mã code của bài đăng
Bước 2: Cũng tương tự như trên để tạo được tiện ích này bạn vào chỉnh sửa “bố cục”, bạn vào
“thêm tiện ích” sau đó bạn chọn thêm phần “HTML/Javascript”, sau đó bạn paste mã vừa tạo ở bước 1 và lưu lại
Hình ảnh tiện ích sau khi đã được tạo ra:
Trang 18Lưu ý: Khi tạo xong các tiện ích bạn có thể thay đổi các vị trí cho nó phù hợp bằng cách bạn rê chuột đến tiện ích đó và kéo thả lên xuống sau đó bạn “lưu sắp xếp”
Bước 6: Gắn link vào website:
Khi chúng ta xuất bản các bài đăng thì các bài đăng đều tìm thấy ở trang chủ, nhưng nếu chúng
ta muốn để bài đăng trên hệ thống menu nhằm giúp khách hàng tìm kiếm nhanh hơn chính là mục đích của bước hướng dẫn này Để làm tốt bước này bạn cần làm theo lần lượt các bước sau
1 Khi bạn viết một bài đăng, tại phần “nhãn” ngoài việc bạn đặt các từ khóa ra bạn cần đặt thêm từ mà phần menu bạn muốn đưa vào Ví dụ tôi muốn đưa một bài đăng vào phần giới thiệu trên menu, tôi chỉ cần thêm từ menu vào “nhãn” của bài đăng sau đó xuất bản
2 Bạn xem bài đăng và click vào nhãn có chứa từ đó, nó có dạng gần giống như:
http://kinhdoanhonline.internetmarketing.vn/search/label/Gi%E1%BB%9Bi%20thi%E1
%BB%87u#.UDHlFallSvc (bạn lưu ý link có từ label)
3 Bạn copy đường dẫn này, sau đó bạn vào chỉnh sửa html bạn dùng đồng thời Ctrl + F để tìm mục cần gắn bài đăng nó sẽ có dạng giống hình vẽ