Cùng tạo phong cách cho blog (bài 3)
Saturday, 10. June 2006, 16:59:39
[+] Nếu bạn muốn tạo hẳn 1 skin bên ngoài khác hoàn toàn với các skin sẵn có của Opera và mọi người khác thì các bạn ít nhất cần phải có kiến thức về CSS (1 chuẩn ngôn ngữ dùng để dàn trang của tổ chức internet quốc tế), kiến thức về các trình chỉnh sửa ảnh (tôi hay dùng Photoshop), không cần kiến thức về lập trình. Các bạn cần và nên tìm các tài liệu về các vấn đề trên để tham khảo trước.
----> Về CSS hiện tại trên Internet có rất nhiều trang web dạy và lưu trữ tài liệu online nhưng không có trang web tiếng Việt, các bạn cần phải biết tiếng Anh để hỗ trợ học tập. Một số trang tham khảo như sau.
-
http://www.w3.org/Style/CSS/
-
http://css.maxdesign.com.au/
-
Cssweb standards
-
http://www.dezwozhere.com/links.html
-
http://www.cssbeauty.com/
-
http://www.csszengarden.com/
----> Về Photohop thì cũng không thiếu các tài liệu cho các bạn học nhưng chủ yếu vấn là tiếng anh. Tuy nhiên cũng có 1 số trang tiếng Việt giúp các bạn tham khảo dễ hơn.
[+] Nếu bạn chỉ muốn chỉnh sửa chút xíu về banner hay font chữ màu chữ cỡ chữ...Thì bạn chỉ cần đọc các bài học của tui là đủ...Trước khi vào bài 3 các bạn cũng nên đọc bài 1 và bài 2
Sau mấy ngày bắt các bạn, những người quan tâm tới việc tạo phong cách riêng cho blog của mình đợi dài cổ thì hôm nay cũng cố gắng vừa xem bóng đã vừa hoàn thành bài 3 trong sê ri các bài tạo phong cách cho blog. Trong bài 3 này tôi sẽ hướng dẫn tổng quan về cấu trúc của blog cách thay đổi banner, màu nền hoặc background của blog, background của bài viết
Nói lại một chút để các bạn tiện theo dõi nếu không đọc bài 1 và bài 2.
Cùng bắt đầu nào
1. Bạn vào phần Preferences (http://my.opera.com/tênđăngnhập/account/)
2. Nhấn tiếp vào Web page layout (http://my.opera.com/tênđăngnhập/account/layout.dml)
3. Chọn tiếp custom style sheet (http://my.opera.com/tênđăngnhập/account/usercss.dml)
* tênđăngnhập: Tên đăng nhập của bạn vào blog ở Opera. Như của tôi là phamlam
4. Tại ô Enter CSS các bạn có thể gõ code hoặc copy paste code CSS vào sau đó đánh dấu chọn vào ô Use my custom style sheet together with the current theme và nhấn Save để kết thúc. (xem hình minh họa, xem hình rồi bạn đừng nói là ko biết nó ở đâu nhé)

Có rất nhiều bạn hỏi tôi file main.css ở đâu. Thường là nó ở _http://my.opera.com/community/css/users/1/main.css. Không nhất thiết là số 1 mà có thể là số 2, 3 hay 13. Bạn hãy vào Web page layout và đếm các skin từ trái qua phải, từ trên xuống dưới như hình vẽ này. Xem skin mà bạn đang dùng là cái thứ mấy thì thay số đó vào link trên để xem file main.css.
Tổng quát về cấu trúc của blog opera.
Cái này viết sau vì nói ra dài dòng lắm.
Thay đổi banner của blog.
Để thay đổi banner mặc định của opera thì trước hết bạn phải biết kích thước của banner sau đó tạo một bức ảnh có kích thước như vậy để sẵn sàng thay thế. Opera cũng có trang tạo sẵn một số các bức ảnh có kích cỡ đã định để các bạn thay thế. Các bạn có thể vào các địa chỉ sau để lấy ảnh.
- 12/02/2005 - 10 Headers - Farm - dark colors - Link
- 12/02/2005 - 10 Headers - Natural - dark colors - Link
- 12/02/2005 - 10 Headers - Sport - dark colors - Link
- 12/01/2005 - 10 Headers - Children - dark colors - Link
- 12/01/2005 - 10 Headers - Exotic nature - dark colors - Link
- 12/01/2005 - 10 Headers - Oceans and seas - dark colors - Link
- 12/01/2005 - 10 Headers - Mixed elements - Dark colors [2] - Link
- 11/30/2005 - 10 Headers - Mixed elements - Dark colors - Link
- 11/30/2005 - 6 Headers - Rabbit related - Light colors - Link
- 11/30/2005 - 10 Headers - Winter related - Light colors - Link
- 11/30/2005 - 10 Headers - Sunset related - Dark colors - Link
- 11/30/2005 - 10 Headers - Food related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Cat related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Dog related - Mixed colors - Link
- 11/29/2005 - 10 Headers - 10 Dark Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - 10 Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - mixed collection - check it out - Link
- 11/29/2005 - 5 Headers for those who love wildlife - dark headers - Link
- 11/29/2005 - 5 Headers for those who love babies - light headers - Link
- 11/29/2005 - 5 Headers for those who like birds - dark headers - Link
- 11/28/2005 - 6 Headers for those who like dark styles - Link
- 11/28/2005 - 6 Headers for those who like light - natural styles - Link
Riêng tôi thì tôi tự tạo ra một banner và upload vào trong phần my file của Opera. Để thay đổi banner các bạn hãy mở file main.css của mình ra tìm tới đoạn code có chữ #top2 (cách đơn giản để tìm là mở file css ra bằng Notepad nhấn Ctrl+F để mở ô tìm kiếm sau đó gõ vào từ #top2 để tìm)
Ví dụ:
#top2 {
height:116px;
padding-left:15px;
background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x;
border-bottom:1px solid #fff;
}
* height:116px: Chiều cao của banner, các bạn có thể chỉnh thông số này bằng với chiều cao của bức ảnh
* #2f569b : Màu của banner nếu ảnh nền banner không hiện trong đó #2f569b là mã của màu.
* /community/graphics/users/1/top.gif: Đường dẫn đến file ảnh banner
* top left repeat-x: Lặp lại bức ảnh từ phía trên cùng bên trái theo trục x tức là xếp liên tục bức ảnh đó từ trái qua phải
Để thay đổi các bạn có thể làm như sau.
Ví dụ
#top2 {
height:116px;
padding-left:15px;
background:#000000 url(http://my.opera.com/phamlam/homes/files/banner.jpg) top left repeat-x;
border-bottom:1px solid #fff;
}
* http://my.opera.com/phamlam/homes/files/banner.jpg: Đoạn này chính là phần quan trọng để thay đổi banner. Bạn chỉ cần trỏ tới file ảnh của bạn là banner của bạn sẽ được thay đổi. Nếu bạn chỉ muốn banner là màu thôi thì đoạn background sẽ được thay thay thế thành background:#000000; (hãy thay thế #000000 thành mã màu mà bạn muốn.)
Thay đổi màu nền và ảnh nền của blog thì mai viết tiếp. Vừa xem bóng đá vừa viết chẳng tập trung được gì cả.








Anonymous # 11. June 2006, 07:28
Rất là cảm ơn bạn về những bài viết hướng dẫn qua bài 1 và bài 2 tôi cũng như những người bạn khác mong sẽ có nghững bài tới hay bổ ích . rất cảm ơn
Anonymous # 11. June 2006, 07:30
Rất cảm ơn bạn đã cho ra lò bài 1 và bài 2 chờ mong tin bạn trong bài 3 rất, rất cảm ơn
tuanpm # 12. June 2006, 11:35
có lẽ em cả anh cùng dịch tiếp ở Opera để cho ra lò bài 3 đi.
Em thấy có vẻ mọi người đang rất chờ bài 3 ra đời, và em cũng
muốn tự mình viết hoặc dịch ra cái gì đó chứ ko phải lúc nào cũng chỉ copy và paste.
Anh hỉu ko!
Nếu anh đồng ý thì mail cho em nha.
Còn nếu ông bạn nào có khả năng dịch tiếng anh được thì có thể vô đây để học tiếp bài 3,4 và 5.
~~~~~~~~> http://my.opera.com/WhyOpera/
big_daddy # 13. June 2006, 06:21
hoan.kiss # 13. June 2006, 10:41
hongcuong # 13. June 2006, 12:39
tuanpm # 13. June 2006, 15:12
Anh Lâm ơi! dạo này anh lười viết Blog thế
suốt ngày chat chít, em đã bảo cùng dịch thế mà chẳng trả lời gì cả
hix, có lẽ em phải tự dịch thui
đến lúc em post sang Blog của em thì đó là bản quyền của em
anh đừng có post lại đó nha.
http://my.opera.com/tuanpm
tuanpm # 13. June 2006, 15:15
Em đang dịch tài liệu CSS bên w3schools
anh có định dịch cùng em ko?
sotruotqua # 14. June 2006, 07:27
phamlam # 14. June 2006, 08:20
@everybody: Thanks to all. Tui sẽ cố gắng viết bài sớm để các bạn đọc. Bài 3 này sẽ có hình ảnh minh họa sống động... cố gắng chờ tí nữa
tuanpm # 14. June 2006, 13:58
em mới dịch được mỗi mấy trang CSS bên w3shools mà giờ lại thấy ngại dịch quá, có rất nhiều việc cần làm vậy mà em chẳng biết sắp xếp thời gian như thế nào để có thể làm được tất cả mọi việc mà em mong muốn cả, chán quá.! Nghỉ hè được có 1 tuần thì làm ăn được gì chứ chán thật, có bao nhiêu dự định dành cho mùa hè này vậy mà hôm nay em mới biết chỉ được nghỉ hè có 1 tuần. chán, chẹp chẹp...!
sotruotqua # 14. June 2006, 15:41
Ông xem cố vấn cho tôi trận nào ngày mai đi, cho tui gỡ tí vốn còm, chứ hum nay trận Đức với Balan chắc ko dám cá tiếp rùi. Dù biết chắc thằng Đức sẽ thắng. Nếu thích bàn luận nhắn msg nhé, ko bà con tưởng tui là dân cá độ thì chít, oan Thị Mầu
sotruotqua # 14. June 2006, 15:43
phamlam # 15. June 2006, 01:26
tuanpm # 15. June 2006, 01:49
Anonymous # 15. June 2006, 02:14
Cám ơn Anh,Nhờ anh mà em có thêm một chút hiểu biết về thứ mà em vô cùng muốn học nhưng chẳng có ai dạy+ điều kiện không cho phép?[IMG]http://music.geocities.jp/nhatky_nguyenchi/avatar/data/dangquang_6.gif[/IMG]
namkhanh # 15. June 2006, 04:11
quanvn136 # 15. June 2006, 05:44
Anonymous # 15. June 2006, 07:46
Lâm soạn bài này chuẩn quá :yes:!
Anonymous # 15. June 2006, 09:07
Cảm ơn bạn về những bài viết. Tiếp tục giúp anh em nha.
Cho tớ hỏi chút, tại sao cái banner của tớ cứ vị chia ra làm 4 cái thế nhỉ. Làm sao khắc phục nó nhỉ? Chỉ giúp nhé. Để thấy rõ vấn đề của tớ, cậu chịu khó xem blog: http://my.opera.com/trungluat/
Cảm ơn nhiều!
namkhanh # 15. June 2006, 09:33
tuanpm # 15. June 2006, 10:14
cái benner đó của ông quá nhỏ so với khung benner trong style sheets. Cỡ khung Benner chuẩn trong style sheets là 778*140 . ông có thể thay đổi cho nhỏ hơn hoặc to hơn ở chỗ Top{
} trong style sheets, xem thử blog của tôi nè : http://my.opera.com/tuanpm . Tuy` vào benner to nhỏ như thế nào thì mình có thể thay đổi được.
hoặc là ông resize lại cái benner thanh 778px*140px đi
thế nhe'! chúc thành công .
sotruotqua # 15. June 2006, 15:34
Nói cho cùng xem bóng đá ngoài màu cờ sắc áo, ngoài tình yêu thể thao thì còn một chút hơn thua. Đơn giản chỉ là đố vui xem đội nào thắng cũng đã đưa lại khí thế nhiều hơn cho người xem rồi. Vì thế nếu một ngày nào đó, nước ta có luật cá độ bóng đá và cho phép kinh doanh cái sản phẩm vô hình này thì chắc chắn sẽ có nhiều công ty tham gia đấu thầu để được kinh doanh "mặt hàng" này và thuế nộp cho nhà nước sẽ cao hơn hẳn các sản phẩm khác.
Nếu ai có cùng ý kiến hay muốn phản bác xin nhắn tin lại cho tôi. Lý luận thì vô kể, cái chính là tìm ra giải pháp cho tình trạng cá độ chui ở nhà mình. Tất nhiên tôi chẳng có tham vọng được nhà nước biết đến những ý kiến này, nhưng nhìn chung lớp trẻ cần có cái nhìn thoáng hơn và đa diện hơn về một số vấn đề trong cuộc sống.
Tôi chờ đợi ý kiến của "Kêu lầm" và các bạn ở đây!
Tôi ko muốn topic này của PL bị bóng đá chen ngang. Xin lỗi PL nhé! Nhưng căn bản PL tỉa tót tôi nên hứng lên nói lại mà thôi
tuanpm # 16. June 2006, 00:45
giờ đang là mùa world cup, biết làm sao được World Cup gây ảnh hưởng tới tất cả các khía cạnh trong cuộc sống, đâu đâu cũng thấy người ta nhắc đến world cup,
vậy tại sao chúng ta lại ko thể?
Anonymous # 16. June 2006, 03:28
Cảm ơn tuanpm đã chỉ giáo. Nhưng ông Tuấn ơi, tôi đã resize hình lên đến 1826px x 310px rồi mã vẫn không được.
Đây là đoạn CSS của tui, cậu xem giúp đỡ thêm nhé. Cảm ơn nhiều.
"#top {
FONT-SIZE: 11px; MARGIN: 0px -10px; COLOR: #fff; TEXT-ALIGN: left; min-width: 739px; max-width: 872px
}
#top2 {
BORDER-TOP: #555 1px solid; PADDING-LEFT: 15px; BACKGROUND: url(http://my.opera.com/trungluat/homes/blog/top.jpg) #527fbf left top no repeat; HEIGHT: 146px
}"
phamlam # 16. June 2006, 07:21
Có 2 vấn đề ở đây.
Thứ nhất: bạn đã có 1 cái ảnh nhưng kích cỡ của nó 550x93px. Quá nhỏ so với kích cỡ thật của cái banner. Bạn không thể thay đổi kích cỡ của nó qua thuộc tính width và height khi bạn fill nó làm background mà bạn phải dùng một trình sửa ảnh để edit size.
Thứ hai: Câu lệnh của bạn đã viết sai. Bạn viết là
Do cái ảnh của bạn nhỏ hơn kích thước thật nên bạn đặt chết độ repeat là no nhưng không đúng, bên cạnh đó màu nền phải viết trước url. Nếu đúng phải là như sau:
Bạn hãy sửa lại kích thước ảnh sau đó thử lại code xem nhé.
sotruotqua # 16. June 2006, 08:10
Khi gõ code, bạn nên chú ý viết cho chính xác, ví dụ "no-repeat" chứ ko phải "no repeat" hoặc phải là "repeat-y" và "repeat-x" bởi như đã nói ở trên, nếu tách các ký tự bằng 1 cách trống (space) thì máy sẽ hiểu là 2 lệnh khác nhau trong một dòng code.
Về background bạn có thể tham khảo ở CSS Toturial. Trang này sẽ chỉ dẫn cho bạn nhiều điều bổ ích với những ví dụ minh hoạ rất dễ hiểu.
Chúc bạn thành công.
tuanpm # 16. June 2006, 08:44
#top {
background:#fff url(http://my.opera.com/tuanpm/homes/Picture/top_resize.jpg
) bottom left no-repeat;
font-size:11px;
width:778px !important;
/*min-width:739px;*/
margin:0 -10px;
text-align:left;
color:#fff;
}
#top2 {
height:140px;
padding-left:15px;
/*background:#527fbf url(http://my.opera.com/tuanpm/homes/Picture/top_resize.jpg)
top left no-repeat;*/
border-top:1px solid #555;
}
Ông copy nguyên cả đoạn này vào CSS của ông, chỗ chữ màu đỏ là kick cỡ chuẩn của style sheets là 778*140.
Còn chỗ chữ màu xanh là link cái benner của ông, tôi đã Resize lại rồi.
Giờ việc còn lại của ông chỉ là copy nguyên cái đoạn code đó vào style sheets của ông thế là ok!
chúc thành công.
tuanpm # 16. June 2006, 10:13
sao anh lại Del mấy bài kia của em, chán anh quá.
Để em quảng cáo chút ko được ah!
phamlam # 16. June 2006, 10:13
@Tuấn. Em đã không biết rõ mục đích, cấu trúc của từng câu lệnh thì đừng hướng dẫn người khác. Em có hiểu width:778px !important; là để làm gì không? Em định fix width vào 778px nhưng người sử dụng có muốn vậy đâu. Có phải ai cũng thích fix width vào như anh.
@Trungluat: Blog có mấy cái ảnh rất ấn tượng. Riêng về code bạn chỉ cần kiếm một cái ảnh banner có kích thước 852px x 146px (với giao diện hiện tại của bạn) sau đó upload lên mạng và thay link vào đoạn code
Bức ảnh của bạn có thể có độ cao không phải là 146px nhưng nhất thiết độ dài phải là 852px. Nếu độ cao của bức ảnh là một số nào đó thì hãy thay số đó vào chỗ height trong #top2.
Giả dụ bạn có một bức ảnh ở http://www.burek.co.yu/opera/header/Natural10.jpg và kich thước của nó là 852px x 130 px vậy code bạn cần paste là
Không cần paste #top vào như ku tuấn nói chỉ cần #top2 thôi. Chúc thành công.
namkhanh # 16. June 2006, 10:28
tuanpm # 16. June 2006, 11:23
Ý em là em code săn cho trung luat rồi,
và ông ý nếu muốn paste vào của ông ý thì paste
còn nếu ông ý ko muốn paste thì có thể sửa lại
cái đó chẳng có vấn đề gì cả
width( là chiều rộng )
Height( là chiều cao )
ai cũng hiểu là như vậy
tuy trong Blog này ko cần dùng đến Width
nhưng cũng phải nói ra để cho ông ý hiểu
lần sau còn biết mà sửa
ko chỉ ở Blog trong opera mà còn ở cả chỗ khác nữa
Anh lâm nói thế ko đúng
em phản đối.!
sotruotqua # 16. June 2006, 11:24
sotruotqua # 16. June 2006, 11:35
namkhanh # 16. June 2006, 12:51
À, có câu này dành cho chú Tuấn này: trong thiết kế web thì người ta chỉ quan tâm đến rộng của cột và chiều cao của hàng. Chú hiểu ý anh ko? Blog là dùng thuần CSS ko nên chú bảo là chú hớ rùi đó
sotruotqua # 16. June 2006, 13:00
tuanpm # 16. June 2006, 14:38
Sao mọi người soi kĩ thế.
lần sau tui phải rút kinh nghiệm mới được
chứ cứ thế này thì ...chẹp chẹp...!
tuanpm # 16. June 2006, 14:41
chuyển sang topic khác
không các topic khác ế hàng đó!
phamlam # 17. June 2006, 01:10
quanvn136 # 18. June 2006, 06:30
tuanpm # 18. June 2006, 06:52
Nếu mà ông copy nguyên phần main.css thì chỗ dưới khung style sheets có 3 lựa chọn, ông chọn vào "Only user my Style Sheets"
song rồi save vào, sau đó ấn F5 để xem xem Blog đã thay đổi chưa
ok!
phamlam # 19. June 2006, 02:44
Anonymous # 19. June 2006, 06:55
Xin chân thành cảm ơn tất cả các đồng chí đã tận tình chỉ giáo, tui đây lấy làm cảm kích vô cùng. Rất mong chúng ta tiếp tục duy trì tình hữu nghị, giúp đỡ lần nhau để design cho blog của mỗi người ngày càng cool hơn, OK? :D
pnghi # 8. July 2006, 07:40
phamlam # 8. July 2006, 09:37
sotruotqua # 9. July 2006, 22:31
@ pnghi: tốt nhất bạn xem lại bài mới của PL, đọc kỹ sẽ thấy. Hoặc đơn giản hơn, nhìn trên thanh công cụ của màn hình, vào File\Save as rồi chọn nơi mà bạn muốn cất giữ, desktop là nơi lý tưởng để bạn mở xem hàng ngày và chỉnh sửa. Rồi nhấn ok. Bạn có thể thử nghiệm với tất cả các blog mà bạn đã dạo qua.
longnguyen2212 # 1. August 2006, 10:20
cunbe # 2. August 2006, 16:35
Em đã mạn phép bác săm soi vào cái Source code và Css của bác, rồi mày mò tự chế ra 1 cái skin cho blog của nhà em, trông cũng tàm tạm , nhưng mà cái vụ đảo menu bar từ phải sang trái, rồi màu mè trong cái nhà em cũng nhái từ blog của bác hơi bị nhiều, mong bác bỏ quá cho em.
Tiện đây bác cho em hỏi muốn đổi cái màu của các bar mà bây giừ như trang của bác màu xanh đánh bóng, thành màu cam đánh bóng thì lấy mã ở đâu ạ
Thanks bác
Anonymous # 9. August 2006, 19:04
Chào em Lâm
Đây là lần đầu tiên chị quan tâm đến blog trong 1 đêm mất ngủ.Chị muốn tự làm 1 blog để tưởng nhớ đến người chồng quá cố của mình mói qua đời nhưng chị không biết gì về máy tính. Mong e giúp đỡ cho. Chị cũng sinh ra và lớn lên ở HP cho tới hết cấp 3.
Hiện tại chị không còn ỏ Việt Nam và rất muốn sớm hoàn thành blog của mình.Mong em chỉ giáo cho.
Cảm ơn em nhiều.
Vui lòng llạc với chị qua địa chỉ email: binhanchovietnam@yahoo.com
Chị hầu như online cả ngày nhưng để invi.Em có thể hướng dẫn chị qua YM được không?
Chúc em 1 ngày mói bình an
Chị Châu Bình
blogcuahan # 14. August 2006, 06:10
em xin được tự giới thiệu em là Nam là đệ tử của anh Nam khánh
Hôm nay được A.khánh giới thiệu cho em về 1 cao thủ photoshop chuyên chỉnh sủa hinh`,và còn nữă em cũng là 1 trong số các newbie của opera nên cung đang mong được sự giúp đỡ của các bậc tiền bối đi trước
chả là em có 1 cái anh từ thủa baby nhưng nó bị hư mất rùi nên bây giờ muốn được nhờ anh sửa lại giùm cho :http://my.opera.com/blogcuahan/blog/show.dml/402048#comments
rất mong đựơc sự chỉ giáo của anh