Thủy Hiền

Tạo Skin cho Blog Opera từ theme Yahoo 360

Tuesday, 13. March 2007, 11:20:58

Nhiều người nói với tôi là rất thích skin Color of Life mà tôi edit lại từ theme Yahoo 360^o của Antoniblue. Một số người nói rằng nhìn rất pro, một số người khác bảo giống theme Yahoo

Ờ, nhìn cũng giống theme Yahoo thật

Bạn so sánh thử nhé

Yahoo 360^o Bloggers có hẳn một kho themes tại http://360themes.com

Tại sao Opera Bloggers không take advantage of nguồn tài nguyên đó nhỉ?

Tôi sẽ giúp bạn một mẹo nhỏ để biến theme Yahoo thành Skin Opera

Trước tiên, bạn download file user.css và hình nền của Yahoo 360^o (thường có hai files: top và bottom). Bạn cũng cần tạo thêm một số hình ảnh để làm nền cho sidebox. Tôi thường dùng Gradient Tool trong photoshop để tạo. Bạn cũng có thể sử dụng Brush để làm cho đẹp hơn. Bạn nên lấy mã màu trong link download hình nền Yahoo để tạo hình ảnh cho cùng tone. Bạn hãy upload tất cả hình ảnh này vào host của bạn (My Account/ Files).

Kế tiếp, bạn mở file user.css bằng notepad, và tìm đoạn mã sau:

body {
background:transparent url(http://files.myopera.com/danquynh/color/bg.jpg) top center repeat-x;
margin:0;
padding:0;
font-family: arial,'trebuchet ms',helvetica,sans-serif;
font-size:13px;
line-height:145%;
text-align:center;
color:#111;
}

#wrap1 {
padding-top: 20px;
BACKGROUND: url(http://files.myopera.com/danquynh/color/wrap1a.jpg) top center no-repeat;
}

#wrap2 {
BACKGROUND: url(http://files.myopera.com/danquynh/color/wrap2.jpg) bottom center no-repeat;
}

#wrap3 {
background:transparent;
border:#0089fd double;
margin:0 auto;
width:758px !important;
padding-left:10px;
padding-right:10px;
padding-bottom:100px;
}

#topbar1 {
background:#c0e6ff url(http://files.myopera.com/danquynh/color/topbar.jpg) top center no-repeat;
color:#0089fd;
height:32px;
overflow:hidden;
line-height:24px;
}

Bạn hãy nhìn vào ảnh minh họa cho Skin Opera:

- Body là nền chính của trang blog. Tôi dùng Gradient Tool để tạo một ảnh nền có màu xanh nhạt dần đến trắng.

- Wrap1 là phần hiển thị banner.

- Wrap2 là phần hiển thị footer.

- Wrap3 là phần hiển thị toàn bộ nội dung của trang blog (trong khung).

- Topbar1 là phần hiển thị menu log in (Opera Powered).

Bạn hãy thay đường dẫn cho các hình ảnh (phần in đậm) trong đoạn mã trên lần lượt wrap1 là top và wrap2 là bottom của theme Yahoo mà bạn có. Nếu bạn không thích hình ảnh tràn ra ngoài khung thì trước khi upload, bạn resize sao cho chiều ngang (width) của ảnh là 778px. Hình nền của body và topbar1 thì bạn có thể tự tạo, hoặc chỉ cần lấy mã màu của theme Yahoo và điều chỉnh mã background, ví dụ:

body {
background:#ffffff;
margin:0;
padding:0;
font-family: arial,'trebuchet ms',helvetica,sans-serif;
font-size:13px;
line-height:145%;
text-align:center;
color:#111;
}

Trong đoạn mã trên tôi dùng màu nền là màu trắng. Bạn thay bằng màu phù hợp với hình nền của theme Yahoo. Bạn có thể dùng tên màu bằng tiếng Anh hoặc mã màu.

Nếu bạn không thích đường viền bao quanh trang blog, bạn có thể bỏ đoạn mã border (in đậm) trong wrap3.

Sau đó, bạn thay hình ảnh cho các sidebox, hình nền cho tiêu đề bài viết,... bằng những hình ảnh mà bạn tạo cho phù hợp với theme Yahoo. Bạn vui lòng xem post Thay đổi background Blog Opera và Trang trí lại sidewrap của Blog Opera để tìm những đoạn mã thích hợp để chỉnh sửa, kể cả màu chữ, màu link,... Cuối cùng, bạn paste toàn bộ nội dung đã chỉnh sửa vào ô Enter CSS (xem thêm post Thay đổi giao diện Blog Opera trong 10 phút) và save với option "only use my custom style sheet".

Hãy cùng tạo ra nhiều skins đẹp và chia sẻ cho mọi người nhé!

Chúc bạn thành công!

Test offline cho Skin của Blog OperaÔ số Sudoku - niềm đam mê mới của tôi

Comments

1 2 3 Next »

khanhquang # 13. March 2007, 18:44

Hìhì..chị ơi. Vào The Opera Off-topic Lounge forum để chuẩn bị chào đón forum tiếng Việt trên Opera chị nhé.

Vui quá nên mượn tạm latest entry của chị để báo tin chị hén..hìhì

concobebe # 14. March 2007, 04:14

Chúc mừng đầy tháng em của DanQuynh, con của Lullaby và Sandman nhé

(trộm vía). Chúc con hay ăn, chóng nhớn, luôn khỏe mạnh.
Yêu thương

(Chả biết chúc vào đâu, thôi thì vào bài mới nhất vaỵa)

khanhquang # 14. March 2007, 10:38

Chúc mừng đầy tháng bé Thùy Lam. Chúc con ăn khỏe, chóng lớn và xinh đẹp như chị hai DanQuynh nhé.

diudangnay # 15. March 2007, 07:25

Bài blog này rất có ích với em, khai sáng ra rất nhiều về opera. Cám ơn chị nhiều lắm. Chúc gia đình chị luôn rộn tiếng cười với Đan Quỳnh và Thuỳ Lam nha (nhà chị đặt tên con gái nghe hay thật)

Anonymous # 16. March 2007, 03:59

thanh binh writes:

chị ơi,em muốn thay đổi toàn bộ dao diện blog của mình em đã làm theo hướng dẫn của chi rồi mà vẫn không được chị giúp em với

danquynh # 16. March 2007, 14:03

Em Vịt và bố Cò spam trong forum chưa đã hả?

Bạn 3mobisoft, cám ơn bạn đã có lời khen

Em Ngọc, cái skin này không đẹp bằng games

nhưng có sáng tạo

Em Sói, em canh lề lại cho phần banner nha

Và làm thêm nhiều skin share cho mọi người nữa hén

Em thanh binh, em không làm được phần nào thì nói cụ thể, nói chung chung vậy sao chị giúp được

diudangnay # 17. March 2007, 04:13

không biết reply cho chị ở đâu, thôi vào đây reply đại ^^
em thấy màu xanh của chị trên nền cũng đẹp nên giữ đó chứ, nhưng để xem lại cho đồng bộ ^^
mà chị cần rbush thể loại gì để em biết
chị vào trang http://devianart.com đi, rất nhiều. Dùng từ khóa là brushes chị nhé

danquynh # 17. March 2007, 06:27

Em ơi, chị không download được

Thấy rõ ràng link là file zip mà khi click "start download" thì nó báo là file.html

Em có cái gì thì gửi cho chị nha

Mà chị khoái mấy cái brush Chinese nữa, em có cái đó không?

ducanhducanh # 20. March 2007, 07:12

chi oi sao em ko lam dc
em da dung y chang cai theme cua chi post len ma sao ko dc ha chi
chu vao thu roi noi cho em biet voi nha ,em moi tap lam blog ma
http://my.opera.com/ducanhducanh/blog/

ducanhducanh # 20. March 2007, 07:15

ah chi oi lam the nao de chinh cai khung cua cac bai viet cho no ro^.ng hon mot chut dc ko a
thong cam may cua em ko ho tro viet tieng viet

danquynh # 20. March 2007, 12:09

Em save với option "only use my custom style sheet" thì sẽ không phải chỉnh gì nữa hết (lần sau đọc kỹ hướng dẫn trước khi dùng nhé

o0AmI0o # 22. March 2007, 03:47

Chi oi, sao em lam nhu chi. chi? ma ko dc vay T_T, em save lai thi cang thay cai bottom dau hit a' chi thu wa coi gium em nha
my.opera.com/o0AmI0o/blog

danquynh # 22. March 2007, 04:10

Đây là hình ảnh làm wrap2 (bottom) của em: http://files.myopera.com/o0AmI0o/Theme/236FE9FF.jpg, và file not found. Chắc em chưa upload, hoặc ghi tên ảnh không đúng, hoặc đường dẫn không đúng. Em xem lại nhé

dhquan8x # 27. March 2007, 09:02

a` ha'! Minh hay dung yahoo blog thui!

Opera it dung lam ^^

Thanks ban vi entry nay nhe ^^

Neu ranh ghe tham blog yahoo cua minh nha ^^: http://360.yahoo.com/dhquan8x

xuanhau88 # 27. March 2007, 21:10

làm gium em 1 skin đc. ko

danquynh # 30. March 2007, 04:41

Bạn dhquan8x, dùng Opera sẽ có 300MB webspace đó

Em xuanhau88, chị có vài skin cho download, em thích cái nào thì lấy về xài nha

Anonymous # 8. April 2007, 10:12

king7621129 writes:

tôi rất muốn có một cái blog để tâm sự với bạn bè

xuanhau88 # 8. April 2007, 11:46

ui , chi xaif skin moi' rui` !

4eyesboy # 10. April 2007, 09:46

Em muốn chỉnh sưa ảnh (resize voi chieu rong=778px ) thì làm thế nào?

danquynh # 10. April 2007, 11:49

King7621129, bạn tạo một cái nhé, đơn giản thôi mà

Xuanhau88, làm cho xong chứ để dang dở hoài

4eyesboy, chị resize bằng photoshop

4eyesboy # 12. April 2007, 00:57

Chị à sau khi em lam skin từ yahoo,ở giữa blog có một khoảng trắng vậy em phải làm gì ?

danquynh # 12. April 2007, 01:13

Em cho mã màu (blog của em là màu xanh) vào phần background của body nhé:

body {
background:#mã màu;
}

4eyesboy # 13. April 2007, 01:41

chị vào blog xem chỗ nào chưa được chị chỉ cho em nhé!!
Em cảm ơn trước:D

danquynh # 13. April 2007, 02:39

Em set blog là private nên chị đâu có xem được

Anonymous # 20. April 2007, 12:51

linh writes:

vi` mot ngay` mai tuoi sang'

yoyokitty # 5. May 2007, 11:16

cái này hay quá! em phải ngâm cứu làm mới được. Em cũng có một vài cái theme 360 độ nhưng chưa biết thay vào opera.

Anonymous # 13. May 2007, 14:42

Rubi172109 writes:

Chi oi, chi lam giup em 1 skin an tuong 1 chut dc ko chi

thienhien610 # 14. May 2007, 14:06

chi a` , em da upload hinh anh vao files nhu chi da noi roi ma`>.< ...sao ma van chua dc chi oi. ko biet sai cho nao nua ... hinh nhu doan ma CSS thieu mat Wrap2 hay sao ay..???
chi xem lai doan ma ne : la doan ma cua em da sua roi do chi
/*
Copyright Opera Software. Design by Fred.
Skin edited by Pham Lam - http://phamlam.info;
Modified by Thuy Hien - http://www.duyhien.com;
Perfected by Khanh Quang - http://my.opera.com/khanhquang
Graphics by http://360themes.com
Date: 01/02/2007
Note: Nếu bạn sử dụng skin này xin vui lòng ghi rõ nguồn gốc tác giả của skin trên blog của bạn.

*/}

anhdungnet # 16. May 2007, 07:50

cho mượn bài chỉ dãn này nha chị thuỷ

Anonymous # 19. May 2007, 14:01

Anonymous writes:

kho the cha hieu ty nao`ca !
ai giup tui cai coi ???

cunhankinhte # 19. May 2007, 22:21

Trời ơi! Chị là con gái mà sao giỏi IT quá vậy trời ta! Em ham mê IT, biết design một tí. Nhưng mà ko hiểu mấy về cái mã CSS và HTML. Nói chung là ko biết gì về ngôn ngữ lập trình hết.

Thấy chị viết bài hướng dẫn thế này em phục quá trời luôn. Em đang tí toáy làm cho cái blog trong Opera của mình nó đẹp đẹp một chút. Nhưng mà khó quá chị ha. Em ko hiểu gì về mã các thứ. Chị giúp em nha!

cunhankinhte # 19. May 2007, 22:22

em trai: QuangHuy (SoS - Style of Stylish) http://360.yahoo.com/style_of_stylish

Anonymous # 24. May 2007, 06:09

Anonymous writes:

Hix! Mệt quá. Mò nguyên cả buổi trưa mà chẳng làm được gì cả. Opera hok đơn giản bằng Blog tuybut.com. Thay đổi giao diện cái rẹt đơn giản. Mò cả buổi, copy - paste mà banner vẫn là hình con mèo (chọn lần trước, cái banner của opera) tức 1 nỗi là tuybut.com hok HTML chứ hok dùng tuybut.com vẫn khoẻ nhất.
HEHE- Dù sao cũng cảm ơn chị đã chỉ dẫn dù chưa làm được cái gì cả. HE
Blog của em nè, thành của cả buổi trưa đó. He
http://my.opera.com/cuncon_0308/blog/
Bu`n => bu`n. Đi ngủ đã.

TrungiSpace # 29. May 2007, 05:38

Cám ơn chị Thủy Hiền nhiều lắm. Nhờ hướng dẫn của chị, mò mẫm cả buổi trời 28/5, cuối cùng cũng cho ra được cái Skin cho mình. Mệt, nhưng rất vui:)

mionguyen # 30. May 2007, 09:34

1.CHị ơi làm sao để nó đừng canh tất cả ở giữa nữa. Em mún nó canh bình thường như mấy Default theme của Opera thì làm sao hả chị ?
2.Chị cho em kích thước( pixel ) tối đa của 4 tấm hình để tạo themes nha chị. Chắc e copy đọan code của chị rồi bỏ hình của e vào cho nhanh.Cái này còn nhức đầu hơn theme của Yahoo!360 nữa. Híc ^^

ALOMAMA # 7. June 2007, 09:00

Chi oi, em rat thich mau xanh nay, nen cung rat thich cai skin nay cua chi ^_^

Anonymous # 9. June 2007, 03:16

Anonymous writes:

sac,bit chet lien

Anonymous # 10. June 2007, 08:03

Anonymous writes:

CHi co the cho em CSS cua SKIN nay dc ko?Em thay rat dep

10c3k26 # 19. June 2007, 09:21

chi oi.... chi giup em dow cai theme cua? antoniblue dc khong?
chi giup em tim` cai ma~code cua? theme do nha
cai theme do' nam` o? Trang thu 5 cua? theme
co' chu~ MLinh do' chi...
Minh Linh la` ten cua? em....huhu chi giup em voi'
em da ta chi rat nhieu`

lonely86dn # 22. June 2007, 02:43

chị có thể giúp em làm sao mình có thể chỉnh sữa màu chữ phần menu nằm phía trên

Hải Ly # 26. June 2007, 04:25

Cô ơi, các phần viết mã này có bắt buộc phải đúng thứ tự không ạ? Như là phải skin của phần top trước ròi mới tới cái phần nội dung blog và sau rồi mới là bot không ạ? Hay mình xếp sao thì xếp ạ?

hct_tv # 1. July 2007, 05:04

Thanks!

thuytienhuynh # 9. July 2007, 11:20

chi oi kich thuoc cua botton la bao nhieu

vnjphk # 24. July 2007, 02:52

hic, tớ muốn add nick của ấy mà không biết làm thế nào. HD giùm với

ocquytoc # 27. August 2007, 16:19

khó quá đi mất, em bê nguyên cái CSS của chị vào mà cũng chẳng ra được, nó cứ lung tung lên ý. giúp em với! chỗ đen chỗ xanh ko ra được như hình mẫu chị ạ!

danquynh # 27. August 2007, 22:29

Mionguyen, em hỏi canh giữa của phần nào? hic hic... Kích thước thì chị đã hướng dẫn rất kỹ ở phía trên rồi mà!

10c3k26, theme của Antoniblue chỉ sử dụng cho Yahoo 360, không có code. Muốn sử dụng cho Opera thì em xem hướng dẫn và chuyển đổi sang.

Lonely86dn, em xem "Thay đổi background của menu bar".

Hải Ly, không cần theo thứ tự, nhưng viết theo thứ tự thì khi cần chỉnh sửa sẽ dễ hơn phải không? hì hì...

Thuytienhuynh, kích thước bao nhiêu cũng được, hì hì... Dựa vào kích thước ảnh để chỉnh CSS mà

Vnjphk, sorry, tớ không support qua yahoo được

Ocquytoc, "đọc kỹ hướng dẫn trước khi sử dụng", hehehe... Em save với option "use my custom style sheet only".

OurHappiness # 31. August 2007, 19:44

chị Hiền cho em hỏi làm sao có thể..làm cho nguyên cái phần bài viết bên trong này...có thể Slide trên cái phần body vậy chị..Thanks chị nhìu ..em đang học hỏi làm skin..rất hy vọng chị sẽ chỉ dạy em

danquynh # 31. August 2007, 22:22

Hic, là sao? chị hổng hiểu câu hỏi của em

OurHappiness # 31. August 2007, 22:39

thí dụ như là cái blog của http://myopera.com/bach_betto/blog << phần bài viết nó chạy.khi mình kéo lên h8ạc xuống..còn phần hình của body thì nó đứng yên

danquynh # 31. August 2007, 23:01

Em thêm vào CSS, thuộc tính background của body là fixed nhé