Thiết kế Blog - Sửa chữa và Bổ xung lần 1
1- Chọn Chủ đề / Giao Diện: ( Hình thức bên ngoài của Blog)
Mầu 4 : Mầu Modul bài viết khi mở ra đọc
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:Mã Mầu4;}
</style>
Các bước thực hiện để thiết kế ban đầu cho Blog.Lời mở đầu: Tôi viết bài này để giúp cho một số bạn mới bắt đầu thiết kế còn lúng túng có thể tham khảo để nhanh chóng tạo cho mình một Blog đơn giản dùng được. Các thí dụ trong bài đều đã dùng các bạn có thể yên tâm sử dụng để thực hành và sau đó thay đổi theo ý mình.
Vì một số bạn hỏi mà không thể giải thích qua điện thoại được nên tôi phải viết ra. Viết vội chỉ trong 1 đêm nên chắc có nhiều sai sót, có gì các bạn cứ hỏi và góp ý. Tôi sẽ sửa dần và sẽ viết tiếp dần dần những điều tìm hiểu được để các bạn đỡ mất thời gian.
Vì một số bạn hỏi mà không thể giải thích qua điện thoại được nên tôi phải viết ra. Viết vội chỉ trong 1 đêm nên chắc có nhiều sai sót, có gì các bạn cứ hỏi và góp ý. Tôi sẽ sửa dần và sẽ viết tiếp dần dần những điều tìm hiểu được để các bạn đỡ mất thời gian.
1- Chọn Chủ đề / Giao Diện: ( Hình thức bên ngoài của Blog)
- Bạn nhấn vào “ Bảng điều kiển “ trên thanh Menu >> Bên ngoài >> Chủ Đề / Giao Diện.
Bảng chọn hình nền sẽ hiện lên, bạn sẽ chọn một trong những kiểu ở đây. Bạn có thể tham khảo nhưng gợi ý sau đây để quyết định lựa chọn :
o Số cột, có các kiểu 1,2 hay 3 cột. 3 cột là giống Blog cũ nhưng cột giữa để viết bài lại hẹp hơn nhiều nên các bài chuyển từ Blog cũ sang có thể bị méo hình, theo tôi nên chọn 2 cột.
o Ảnh Avatar ở bên trái hay bên phải, tùy bạn thích.
o Chọn kiểu đã có nền hoàn chỉnh, bạn có thể dùng luôn không phải thêm thắt gì nhiều. Ví dụ theo mẫu “Hoàng hôn trên cánh đồng”. Đây là mẫu mà Blog Trac dung ( bạn vào xem Blog Trác).
o Bạn muốn Blog của bạn có nền mầu cho Modul bài viết và Modul phụ, thì không nên chọn các mẫu có nền. Vì khi áp các ảnh mầu lên vì các ảnh mầu là trong suốt nó sẽ in hình nền lên rất xấu. Trong trường hợp này bạn chọn một trong 3 loại nền Mặc định ở hàng đầu : Nền mặc định (hai cột phải), Nền mặc định (hai cột trái), Nền mặc định (một cột ).
Đây là kiểu Blog Nguyệt Ánh hiện dùng, mầu đen cho cột trái và mầu hồng cho Modul bài viết
Đây là kiểu Blog Nguyệt Ánh hiện dùng, mầu đen cho cột trái và mầu hồng cho Modul bài viết
o Blog của bạn có mầu trắng toàn bộ hai cột thì dùng được ảnh nền đẹp phía dưới. Bạn có thể chọn nền ảnh có sẵn nào bạn thấy thích. Sau này Bạn có thể thay nền bằng ảnh khác đẹp hơn. Vì vậy với kiểu này bạn chọn mẫu nào cũng được. Bạn xem Blog Thanh Mai hiện đang dùng loại này.
2- Tải ảnh Avater của bạn :
- Bạn phải chuẩn bị ảnh và cất vào một chỗ nào đó trên máy tính.
- Đưa chuột vào vị trí để Avatar, có chữ Sửa hiện lên, bạn nhấn vào đó. Tiếp theo bạn cứ thực hiện theo hướng dẫn, đơn giản thôi. Ảnh sẽ hiện ra đúng vị trí.
3- Tải ảnh lên đầu Blog và ảnh nền Blog.
Không nhất thiết phải làm việc này nhưng nếu muốn Blog của mình có đặc biệt thì nên làm.
- Trước tiên bạn chuẩn bị một cái ảnh để đưa vào đầu Blog, có kích thước chính xác là rộng = 970px; cao từ 90- 500px. Bạn phải đưa ảnh vào PhotoShop để chỉnh lại kích cỡ.
- Ảnh nền càng lớn càng tốt vì nếu nhỏ sẽ phải lặp đi lăp lại nhiều, không đẹp. Cả 2 ảnh đều có thể là ảnh động hoặc ảnh tĩnh.
- Để tải ảnh :
· Nhấn vào “ Bảng điều khiển” >> CHỦ ĐỀ/GIAO ĐIỆN >> Màn hình chọn hình nền lại hiện lên nhưng lần này bạn đi xuống dưới tới chỗ “ Tùy chọn khác”. Đó là Tùy chỉnh ảnh đầu trang và tùy chỉnh ảnh nền.
· Tại bảng "Tùy chọn ảnh đầu trang", nhấn vào "duyệt tìm", tìm đến chỗ cất ảnh để lấy, rồi nhấn "Tải lên", Khi ảnh đã tải xong. Nhấn vào “xem trước” để xem. Nếu thấy ưng ý thì nhấn vào “ Áp dụng” để lưu kết quả vừa làm. Việc này rất dễ quên, nếu quên là mất công đấy nhé.
· Chuyển sang bảng "Tùy chỉnh ảnh nền " bạn cũng làm như vậy, chỉ có một điều khác là sau khi tải ảnh lên nếu chương trình thấy ảnh quá nhỏ thì bạn được yêu cầu bạn chọn vị trí căn ảnh ( trái, phải, hay giữ) và kích chọn cho ảnh “lặp lại ".
4 - Sử dụng các Mã CSS để thiết kế từng bộ phận.
Hầu hết mọi thiết kế trong Yahoo ! Blog đều phải sữ dụng mã CSS đưa vào các Bảng nguồn bên ngoài.
- Để chèn mã CSS vào blog các bạn làm theo ướng dẫn của bài này : Cách chèn mã CSS vào Yahoo.com . (Bài trong Blog Nguyệt Quý )
5- Một số mã CSS thường dùng
1- Tạo hình nền cho Blog
<style>
body {background-image:url(link hình nền );background-attachment:fixed;background-no:repeat;}
body {background-image:url(link hình nền );background-attachment:fixed;background-no:repeat;}
</style>
Ví dụ 1 :
<style>
body {background-image:url(http://i664.photobucket.com/albums/vv3/hsiaoke/Love%20note%20book/1.jpg
body {background-image:url(http://i664.photobucket.com/albums/vv3/hsiaoke/Love%20note%20book/1.jpg
);background-attachment:fixed;background-no:repeat;}
</style>
2- Mã chèn hình vào cuối mỗi bài viết
<style>
#article-single .article-ft{background:url(Link hình) no-repeat center; height:Xpx;}
</style>
Ví dụ 2: <style>{}
#article-single .article-ft{background:url(http://img1.imagehousing.com/1/8815c3bf80cefe80dbd06f35e525bfdb.gif) no-repeat center;height:70px;}
</style>
3- Xóa cập nhật ngày cho Modul bình luận
<style>
#widget-recentComment li time{font-size:0px;}
</style>
4- Xóa cập nhật ngày cho Modul bài viết mới đăng
<style>
#widget-recentPost li time{font-size:0px;}
</style>
5- Thay đổi kích thước và mầu chữ tiêu đề bài viết và nội dung Modul phụ
<style>
a {font-family:Kiểu chữ;font-size:Xpx;color:#MÃ MẦU;}
</style>
Ví dụ 5 :
<style>
a {font-family:Tahoma;font-size:16px;color:#FF0000;}
</style>
Kiểu chữ : Tahoma, verdana ,times,comic sans,courier ......
Muốn có chữ nghiêng thì thêm font-style:italic;
6- Thay đổi Kiểu chữ, Mầu và Kích thước chữ cho bài viết và tiêu đề Modul phụ.
<style>
body{font-family:Kiểu chữ;font-size:Xpx;color:#Mã Mầu;Font-Weight:bold;}
</style>
Bold là chữ đậm, Có thể thay bằng italicize : chữ nghiêng, underline : gạch dưới.
Ví dụ 6 :
<style>
body{font-family:verdana;font-size:16px;color:#306EFF;Font-Weight:bold;}
</style>7- Mầu nền cho ô trả lời comment
<style>
#comment-list .comment-reply {
background-color:#Mã Mầu;}
</style>
Ví dụ 7 :
<style>
#comment-list .comment-reply {
background-color:#3BB9FF;}
</style>
8- Mầu chữ cho lời bình và trả lời
<style>
#article-supplement{color:#Mã Mầu;}
</style>
Ví dụ 8 :
<style>
#article-supplement{color:#8D38C9;}
</style>
9- Chèn hình cuối màn hình
<style>body
#ft{background:transparent url(Link hình ) repeat bottom center;height:Xpx;}
</style>
Ví dụ 9 :
<style>body
#ft{background:transparent url(http://www.candiecoded.com/Cute/singing-daisies.gif
) repeat bottom center;height:15px;}</style>
10 – Mầu cho trang bài viết
Mầu1: Ô chứa thông tin Modul phụ
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:MÃ MẦU1;}
</style>
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:MÃ MẦU1;}
</style>
Ví dụ 10.1 :
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:#F5ECCE;}
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:#F5ECCE;}
</style>
Mầu2: Modul chính tóm tắt nội dung các bài
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-list, pagination-bottom, #emotion-carousel {background-color:Mã Mã Mầu2;}
</style>
Mầu2: Modul chính tóm tắt nội dung các bài
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-list, pagination-bottom, #emotion-carousel {background-color:Mã Mã Mầu2;}
</style>
Ví dụ 10.2:
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-list, pagination-bottom, #emotion-carousel {background-color:#A9F5F2;}
</style>
Mầu 3 : Mầu nền Modul phụ
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-list, pagination-bottom, #emotion-carousel {background-color:#A9F5F2;}
</style>
Mầu 3 : Mầu nền Modul phụ
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
.yui-b .sidebar{background-color:MÃ MẦU3;}
</style>
</style>
Ví dụ 10.3:
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,.yui-b .sidebar{background-color:#F3E2A9;}
</style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,.yui-b .sidebar{background-color:#F3E2A9;}
</style>
Mầu 4 : Mầu Modul bài viết khi mở ra đọc
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:Mã Mầu4;}
</style>
Ví dụ 10.4:
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:#E0FFFF;}
</style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd,
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:#E0FFFF;}
</style>
Mã mầu trang bài viết có thể viết chung trong một mã như sau :
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:Mã Mầu1;}
#article-list, pagination-bottom, #emotion-carousel {background-color:Mã Mầu2;}
.yui-b .sidebar{background-color:Mã Mầu3;}
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:Mã Mầu4;}
</style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:Mã Mầu1;}
#article-list, pagination-bottom, #emotion-carousel {background-color:Mã Mầu2;}
.yui-b .sidebar{background-color:Mã Mầu3;}
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:Mã Mầu4;}
</style>
Ví dụ:
<style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:#F5ECCE;}
#article-list, pagination-bottom, #emotion-carousel {background-color:#A9F5F2;}
.yui-b .sidebar{background-color:#F3E2A9;}
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:#E0FFFF;}
</style>
#w-profile-card .bd, #widget-recentPost .bd, #widget-recentComment .bd, #widget-externalSource .bd, #widget-category .bd, #widget-statistic .bd, #widget-followingList .bd, #widget-recentVisitor .bd{background-color:#F5ECCE;}
#article-list, pagination-bottom, #emotion-carousel {background-color:#A9F5F2;}
.yui-b .sidebar{background-color:#F3E2A9;}
#article-single.bd, #article-listing, pagination-bottom, #article-supplement, #article-top-nav, #article-bottom-nav, #emotion-carousel {background-color:#E0FFFF;}
</style>
11- Mã cho ô trạng thái ( Status )
<style> { Mầu đường viền và kích thức chữ ô Status }
#w-profile-card .status{border-color:#FF0000;font-size:16px;}
</style>
<style> { Mầu chữ và chiều cao ô Status}
#w-profile-card .status .text{color:#FF0000;height:50px;}
</style>
<style> { Mầu đường viền và kích thức chữ ô Status }
#w-profile-card .status{border-color:#FF0000;font-size:16px;}
</style>
<style> { Mầu chữ và chiều cao ô Status}
#w-profile-card .status .text{color:#FF0000;height:50px;}
</style>
12- Thay nền cho module tâm trạng
<style>
#emotion-carousel {background:url(Link hình ) no-repeat;height:XXpx;}
</style>
Ví dụ :
<style>
#emotion-carousel {background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/00aPurpleRoesWelcome.gif
) repeat;height:200px;}
</style>
<style>
#emotion-carousel {background:url(Link hình ) no-repeat;height:XXpx;}
</style>
Ví dụ :
<style>
#emotion-carousel {background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/00aPurpleRoesWelcome.gif
) repeat;height:200px;}
</style>
13- Thay đổi mầu và giảm kích cỡ chữ ở dòng menu trên nóc nhà để khỏi bị díu
:<style>
#asb-nav li.nav-item a.nav-link{color:#FFFFFF;font-size:10px;}
</style>
Đây là chữ trắng, có thể thay mầu khác. Kích thước giảm để khỏi díu ( chồng lên nhau ). Nếu vẫn díu thì giảm nữa.
:<style>
#asb-nav li.nav-item a.nav-link{color:#FFFFFF;font-size:10px;}
</style>
Đây là chữ trắng, có thể thay mầu khác. Kích thước giảm để khỏi díu ( chồng lên nhau ). Nếu vẫn díu thì giảm nữa.
14- Mã đưa Banner động lên đàu Blog
<style>
#hd{border-bottom:0;}
#asb-uh{border:none;height:500px;}
#asb-uh, #asb-nav {background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/banner.gif
) no-repeat center;}
</style>
<style>
#hd{border-bottom:0;}
#asb-uh{border:none;height:500px;}
#asb-uh, #asb-nav {background:url(http://i1118.photobucket.com/albums/k615/anhnguyet43/banner.gif
) no-repeat center;}
</style>
<style>
#article-listing .article-listing-hd {background:url(http://i1248.photobucket.com/albums/..
#hd{border-bottom:0px;}/* Khoang đầu đề (header) của blog từng người, khoang này bắt đầu từ mép trên cùng màn hình của ..
http://blog.yahoo.com/_DM7QLOPLUDPO3WSIXJ3NEEUTJI/articles/page/1
Có thể cho các mã vào chung một nguồn bên ngoài cho gọn.
Khi làm thì nhập từng mã một, mỗi mà cách nhau một Enter.