Bạn đã xem qua các mục 1,2 của bài cùng chủ đề Cách chuyển giao diện blogspot thành giao diện web. Ở bước 1,2 chúng ta đã thao tác với template trong phần EDIT HTML.Trong bài này tôi xin hướng dẫn cách bước còn lại để hoàn tất một template kiểu web. Thao tác chủ yếu trong Template ->Page Elements.
3. Tạo banner và thanh menu ngang
- Tạo banner và Logo
Bấm vào nút Add A Page Element nằm trên cùng để tạo 1 HTML/Javascript widget với tiêu đều rỗng. Nội dung của widget đó là:
Code 1: Click xem Code 1
Thay đổi các dòng chữ màu đỏ sao cho phù hợp với blog của bạn. Sau đó bấm Save.
- Tạo thanh menu ngang
Cũng làm tương tự như trên, nhưng bạn hãy chú ý kéo widget của menu ngang nằm dưới của cái banner lúc nãy. Nội dung của widget thanh menu ngang:
Code 2: Click xem Code 2
Nhớ bấm nút Save màu vàng phía trên sau các thao tác sắp xêp widget.
4. Tạo Menu dọc bên trái:
- Chọn Add a Page Element ở sidebar bên trái.
- Tạo một HTML/JAVASCRIPT widget không chủ đề, nội dung là:
Code 3: Click xem Code 3
Hãy thay dòng chữ màu đỏ thành link và tên của Label mà bạn cần. Từ nay, mỗi khi thêm 1 label mới, bạn hãy tạo thêm 1 menu mới bằng cách chỉ cần copy toàn bộ đoạn code <!-- 1 --> và <!-- 2 --> rồi thay các link và tên sao cho phù hợp.
5. Tạo widget trái và phải:
- Để tạo widget trái hoặc phải, bạn hãy click vào nút Add A Page Element tương ứng.
- Tạo một HTML/JAVASCRIPT widget không chủ đề, nội dung là: Click xem Code 4
Bạn hãy để ý các chữ màu đỏ: right (hoặc left) nếu widget này nằm bên phải (hoặc trái). 100% đó là bề rộng của widget. Thay tiêu đề và nội dung widget sao cho phù hợp.
*** Để tùy biến các widget có sẵn của blogger, như Label, Archive, bạn tham khảo bài viết này: Trang trí cho Label và Archive
6. Tạo footer ở phía dưới cùng:
- Chọn Add a Page Element ở dưới cùng.
- Tạo một HTML/JAVASCRIPT widget không chủ đề, nội dung là: Click xem Code 5
*** Để làm cho blog có vẻ pro, bạn nên tắt các widget mặc định như Label, Archive, About, ... Nói chung là không nên để lại các widget có sẵn. Bạn hãy tự tạo tất cả các widget theo cách trên để được các widget đồng dạng và như vậy blog nhìn sẽ không bị mất cân đối. Hãy tìm đọc cũng trong trang này những bài hướng dẫn cách tạo Recent Comment, Recent Post, Cách tạo Read More, ... Hy vọng với những thủ thuật nho nhỏ này, có thể giúp được bạn có một blog đẹp và pro hơn.
3. Tạo banner và thanh menu ngang
- Tạo banner và Logo
Bấm vào nút Add A Page Element nằm trên cùng để tạo 1 HTML/Javascript widget với tiêu đều rỗng. Nội dung của widget đó là:
Code 1: Click xem Code 1
Thay đổi các dòng chữ màu đỏ sao cho phù hợp với blog của bạn. Sau đó bấm Save.
- Tạo thanh menu ngang
Cũng làm tương tự như trên, nhưng bạn hãy chú ý kéo widget của menu ngang nằm dưới của cái banner lúc nãy. Nội dung của widget thanh menu ngang:
Code 2: Click xem Code 2
Nhớ bấm nút Save màu vàng phía trên sau các thao tác sắp xêp widget.
4. Tạo Menu dọc bên trái:
- Chọn Add a Page Element ở sidebar bên trái.
- Tạo một HTML/JAVASCRIPT widget không chủ đề, nội dung là:
Code 3: Click xem Code 3
Hãy thay dòng chữ màu đỏ thành link và tên của Label mà bạn cần. Từ nay, mỗi khi thêm 1 label mới, bạn hãy tạo thêm 1 menu mới bằng cách chỉ cần copy toàn bộ đoạn code <!-- 1 --> và <!-- 2 --> rồi thay các link và tên sao cho phù hợp.
5. Tạo widget trái và phải:
- Để tạo widget trái hoặc phải, bạn hãy click vào nút Add A Page Element tương ứng.
- Tạo một HTML/JAVASCRIPT widget không chủ đề, nội dung là: Click xem Code 4
Bạn hãy để ý các chữ màu đỏ: right (hoặc left) nếu widget này nằm bên phải (hoặc trái). 100% đó là bề rộng của widget. Thay tiêu đề và nội dung widget sao cho phù hợp.
*** Để tùy biến các widget có sẵn của blogger, như Label, Archive, bạn tham khảo bài viết này: Trang trí cho Label và Archive
6. Tạo footer ở phía dưới cùng:
- Chọn Add a Page Element ở dưới cùng.
- Tạo một HTML/JAVASCRIPT widget không chủ đề, nội dung là: Click xem Code 5
*** Để làm cho blog có vẻ pro, bạn nên tắt các widget mặc định như Label, Archive, About, ... Nói chung là không nên để lại các widget có sẵn. Bạn hãy tự tạo tất cả các widget theo cách trên để được các widget đồng dạng và như vậy blog nhìn sẽ không bị mất cân đối. Hãy tìm đọc cũng trong trang này những bài hướng dẫn cách tạo Recent Comment, Recent Post, Cách tạo Read More, ... Hy vọng với những thủ thuật nho nhỏ này, có thể giúp được bạn có một blog đẹp và pro hơn.
Anh Võ
Đầu Trang
Xem bài trong ngày
Bài mới nhất
Cho mình hỏi bạn dùng nhiều java script vậy có làm chậm khi vào blog không?
Hi Tuan!
Dùng nhiều javascript thì tất nhiên sẽ làm chậm đi trang web của bạn. Nhưng cũng đừng vì thế mà quá lo lắng, vì thực ra tốc độ có chậm hơn cũng ko bao nhiêu, nhưng bù lại trang của ta có nhiều hiệu ứng. Tuy nhiên cũng ko nên dùng nhiều quá các script.
Không chỉ kể javascript, nói chung chung thì trang bạn càng nhiều code, càng nhiều hình ảnh, âm thanh... thì tất nhiên nó sẽ chậm đi thôi.
Chào AV
Hôm trước cảm ơn AV đã hướng dẫn kéo dài khoảng cách giữa các list link.
Mình vẫn còn 1 thắc mắc nữa mong AV giúp.
Trước tiên vào site labnol.blogspot.com đã nhé..
AV thấy ko, bên cột trái và phải chứa các table, tuy nhiên màu của các table rất khác nhau, màu các khung ghi tiêu đề của table khác nhau, cũng như màu các link cũng khác nhau..
Vậy mình có thể sửa tem sao cho mỗi widget có thể có các màu khác nhau khi mình thêm ko, mà ko cần ADD HTML widget rồi chèn mã html vào (vì site kia chạy tem là classic nên có thể chèn html ngay trong tem)
@iphone support.
Võ đã xem mã nguồn của trang http://labnol.blogspot.com và nhận thấy cách làm của họ như sau:
- Trong css, họ định nghĩa một loạt các class có tên là sbxx, trong đó xx là con số 51,52,53..., với mỗi sbxx họ cho các tham số như màu viền, màu link, font,... khác nhau như bạn đã nói. CSS của trang này nằm ở đây: http://www.labnol.org/assets/css/labnol.css
- Trong templates, mỗi widget họ thêm sẽ có dang div class="sbxx" /div, và mỗi widget họ lấy một tên sbxx riêng khác nhau vì vậy như bạn nói, các màu, link... đề khác nhau.
*Nếu bạn muốn mỗi lần add widget HTML thì tự nó cho màu khác nhau mà ko cần phải viết code cho từng cái, thì bạn làm cách sau:
- Mỗi widget HTML sẽ có id riêng của nó, bắt đầu bằng HTML1 chạy đến vô cực, bạn có thể thiết đặt màu, link, font... trước cho hàng loạt các widget HTML sắp được add, sẽ có dạng như
#HTML1 { font:12; color: red ...}
#HTML2 {font:13; color:black...}
...
- Nếu bạn thiết lập xong mã css trong templates rồi thì có thể add widget và nó sẽ tự kế thừa style mà bạn đã định nghĩa.
*Tuy nhiên theo Võ thì không nên làm như thế làm gì, vì rất bất tiện, code vừa dài, và càng nhiều widget blog của bạn càng chậm. Nếu có thể, có thể sử dụng chung 1 style (ko cần màu khác nhau) và hãy gộp tất cả các widget HTML lại thành 1.
Chào AV
Mình cần giúp đây
Đây là tem của bác Quốc Khánh share
http://taolaga.googlepages.com/di4vn.txt
là tem classic
Mình muốn AV giúp mình vài điểm sau nhé, chắc AV edit mất vài phút nhưng mình mất nhìu time quá mà vẫn chưa xong..
1. Dịch các title trong các sdiebar ra giữa một chút.
2. Các sidebar trái và phải dịch gần về 2 phía ngoài của khung.
3. Màu nền của khung ngoài là màu vàng nhạt (ví dụ thế), còn màu nền trong khung blog (giới hạn là 920px đó) vẫn giữ nguyên màu trắng.
Đó, mình nghĩ nếu thạo css thì một tí là xong, nhưng mình ko thạo nên lục tung lên vẫn chẳng được
Mong QK giúp nhé
à
ý quên
Mong AV giúp chứ, hì hì
Và share cho anh em cùng sài
Mình khoái classic vì load nhanh hơn layout rất nhìu.
thanks hen !!!
Hi Tiamo!
Rất xin lỗi vì sự hồi âm muộn màng của Võ do thời gian vừa rồi cũng có chút bận.
Anhvo sẽ cố gắng làm theo yêu cầu của bạn, nhưng không thể hoàn thành sớm mà chắc phải vài ngày mới xong, vì Võ không thể làm liên tục được.
Sau khi xong Anhvo sẽ post reply tại đây. Bạn hãy chịu khó theo dõi nhé.
@Tiamor: Tớ đã hoàn thành sớm dơn dự định. Link ở đây:
http://vietwebguide.googlepages.com/di4vn2.xml
Chúc bạn có một blog thật pro!
Hí hí.
Cám ơn AV hen,
Mình làm đc roài, thêm vài cái chức năng nữa.
Demo: labnol.blogspot.com
Cũng cool phết nhỉ, mình edit giống bác AMIT bên labnol.
Công nhận load cái classic này nhanh hơn hẳn layout...
Mình muốn có header như của bạn (Menu sổ xuống ở "Blogger", "Học làm web",...0) và footer có liên hệ, FAQ,... bạn có thể cho mình code?
quyndc@gmail.com
@quy: cách làm menu như vietwebguide đã có bài hướng dẫn rồi bạn à, bạn cứ làm theo hướng dẫn.
Code của phần "Tạo thanh menu ngang" (Code 2) bị lỗi gì đó??? Anhvo xem lại dùm. Thanks!
ok anhvo đã sửa. Cám ơn bạn đã chỉ lỗi.
Chào Anhvo. Em đang làm menu ngang nhưng không biết tìm đâu ra những hình nhỏ giống như hình này: http://vo1984.googlepages.com/topmen01.gif để làm menu ngang. Mong Anhvo chỉ em chỗ nào để tìm. Cảm ơn AV.
Quá tuyệt vời, kim tìm kiếm cách làm Banner để quay về trang chính (Home) này đã lâu. Bạn chỉ dẩn rất rỏ ràng nên mình đã làm được ngay.
Cảm ơn bạn thật là nhiều!
Mong rằng bạn luôn tiếp tục chỉ dẩn tiếp.
Bạn ơi cho mình hỏi cái này với.
Sau khi mình tạo được cái template 3 cột rồi, mình vào page elements thì không thể nhìn thấy hết các widget (các widget ở cột bên phải bị mất) như thế này:
http://img10.imageshack.us/img10/1536/errorzal.jpg
Có cách gì để khắc phục không
Trang web của bro rất nhiều thông tin hay, minh đã học hỏi được rất nhiều, cám ơn bro rất nhiều và chúc sức khỏe!
@Khánh Trắng
Cám ơn bạn quá khen, Anhvo sẽ cố gắng viết thêm nhiều thủ thuật khác nữa để cho blogspot ngày càng thêm ngon ngẻ. Đã vô blog của bạn xem rồi, rất đẹp!
Chào anh Võ.em nhờ anh coi dùm em cái này.em đang dùng blogger và muốn thay đổi giống giao diện của một trang wed.lên mạng em down mấy cái mẫu trang wed và tải lên blog nhưng nó không chấp nhận,nguyên nhân là sao nhỉ anh.em nhờ anh chỉ dùm
Chào bạn TranTheDat, nếu bạn chèn bị lỗi thì hãy nói lỗi là gì hoặc gởi template để Anhvo chèn thử xem nhé, để phát hiện coi lỗi gì.
Chao Anhvo, thanks anh ve bai viet chuyen giao dien blog trong blogspot sang giao dien web nhung ma code cua mau em khong down duoc tu trang web cua anh dua ra va den phan tao banner va thanh menu ngang thi cac code 1 va code 2 khong hien ra khi click vao"click xem code 1" va "click xem code 2". Xin anh gui gium em lai cac code. Thanks
MẤY CÁI CODE HƯ HẾT RỒI ANH VÕ ƠI
lick code của anh ngũm củ tỏi hết rồi
tiếc quá