Cùng tạo phong cách cho blog (bài 3)
Saturday, June 10, 2006 4:59:39 PM
[+] 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ả.








1 2 3 Next »
Anonymous # Sunday, June 11, 2006 7:28:03 AM
Anonymous # Sunday, June 11, 2006 7:30:10 AM
Phạm Minh Tuấntuanpm # Monday, June 12, 2006 11:35:12 AM
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/
Trần Nguyễn Thanh Hàbig_daddy # Tuesday, June 13, 2006 6:21:23 AM
Hoan`hoan.kiss # Tuesday, June 13, 2006 10:41:39 AM
Nguyễn Hồng Cườnghongcuong # Tuesday, June 13, 2006 12:39:39 PM
Phạm Minh Tuấntuanpm # Tuesday, June 13, 2006 3:12:00 PM
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
Phạm Minh Tuấntuanpm # Tuesday, June 13, 2006 3:15:01 PM
Em đang dịch tài liệu CSS bên w3schools
anh có định dịch cùng em ko?
Nguyễn Hươngsotruotqua # Wednesday, June 14, 2006 7:27:08 AM
Phạm Lâmphamlam # Wednesday, June 14, 2006 8:20:00 AM
@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
Phạm Minh Tuấntuanpm # Wednesday, June 14, 2006 1:58:36 PM
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...!
Nguyễn Hươngsotruotqua # Wednesday, June 14, 2006 3:41:03 PM
Ô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
Nguyễn Hươngsotruotqua # Wednesday, June 14, 2006 3:43:21 PM
Phạm Lâmphamlam # Thursday, June 15, 2006 1:26:03 AM
Phạm Minh Tuấntuanpm # Thursday, June 15, 2006 1:49:12 AM
Anonymous # Thursday, June 15, 2006 2:14:21 AM
Đỗ Nam Khánhnamkhanh # Thursday, June 15, 2006 4:11:54 AM
Dương Anh Quânquanvn136 # Thursday, June 15, 2006 5:44:51 AM
Anonymous # Thursday, June 15, 2006 7:46:39 AM
Anonymous # Thursday, June 15, 2006 9:07:32 AM
Đỗ Nam Khánhnamkhanh # Thursday, June 15, 2006 9:33:12 AM
Phạm Minh Tuấntuanpm # Thursday, June 15, 2006 10:14:24 AM
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 .
Nguyễn Hươngsotruotqua # Thursday, June 15, 2006 3:34:58 PM
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
Phạm Minh Tuấntuanpm # Friday, June 16, 2006 12:45:57 AM
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 # Friday, June 16, 2006 3:28:48 AM
Phạm Lâmphamlam # Friday, June 16, 2006 7:21:55 AM
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é.
Nguyễn Hươngsotruotqua # Friday, June 16, 2006 8:10:02 AM
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.
Phạm Minh Tuấntuanpm # Friday, June 16, 2006 8:44:06 AM
Ô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.#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; }
Phạm Minh Tuấntuanpm # Friday, June 16, 2006 10:13:26 AM
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!
Phạm Lâmphamlam # Friday, June 16, 2006 10:13:36 AM
@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.
Đỗ Nam Khánhnamkhanh # Friday, June 16, 2006 10:28:39 AM
Phạm Minh Tuấntuanpm # Friday, June 16, 2006 11:23:21 AM
Ý 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.!
Nguyễn Hươngsotruotqua # Friday, June 16, 2006 11:24:29 AM
Nguyễn Hươngsotruotqua # Friday, June 16, 2006 11:35:36 AM
Đỗ Nam Khánhnamkhanh # Friday, June 16, 2006 12:51:29 PM
À, 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 đó
Nguyễn Hươngsotruotqua # Friday, June 16, 2006 1:00:11 PM
Phạm Minh Tuấntuanpm # Friday, June 16, 2006 2:38:27 PM
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...!
Phạm Minh Tuấntuanpm # Friday, June 16, 2006 2:41:36 PM
chuyển sang topic khác
không các topic khác ế hàng đó!
Phạm Lâmphamlam # Saturday, June 17, 2006 1:10:13 AM
Dương Anh Quânquanvn136 # Sunday, June 18, 2006 6:30:28 AM
Phạm Minh Tuấntuanpm # Sunday, June 18, 2006 6:52:57 AM
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!
Phạm Lâmphamlam # Monday, June 19, 2006 2:44:13 AM
Anonymous # Monday, June 19, 2006 6:55:11 AM
pnghi # Saturday, July 8, 2006 7:40:21 AM
Phạm Lâmphamlam # Saturday, July 8, 2006 9:37:43 AM
Nguyễn Hươngsotruotqua # Sunday, July 9, 2006 10:31:00 PM
@ 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.
Long Nguyenlongnguyen2212 # Tuesday, August 1, 2006 10:20:37 AM
cunbe # Wednesday, August 2, 2006 4:35:28 PM
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 # Wednesday, August 9, 2006 7:04:39 PM
blackseaandrockblogcuahan # Monday, August 14, 2006 6:10:56 AM
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