Thủy Hiền

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

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

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![/i]

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 »

Khánh Quangkhanhquang # Tuesday, March 13, 2007 6:44:22 PM

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ì

Cò&Sẻconcobebe # Wednesday, March 14, 2007 4:14:28 AM

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)

Khánh Quangkhanhquang # Wednesday, March 14, 2007 10:38:23 AM

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é.

Sói Béodiudangnay # Thursday, March 15, 2007 7:25:56 AM

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)

Unregistered user # Friday, March 16, 2007 3:59:57 AM

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

Thủy Hiềndanquynh # Friday, March 16, 2007 2:03:30 PM

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

Sói Béodiudangnay # Saturday, March 17, 2007 4:13:41 AM

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é

Thủy Hiềndanquynh # Saturday, March 17, 2007 6:27:55 AM

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?

PhạmĐức Anhducanhducanh # Tuesday, March 20, 2007 7:12:36 AM

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/

PhạmĐức Anhducanhducanh # Tuesday, March 20, 2007 7:15:30 AM

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

Thủy Hiềndanquynh # Tuesday, March 20, 2007 12:09:44 PM

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 # Thursday, March 22, 2007 3:47:51 AM

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

Thủy Hiềndanquynh # Thursday, March 22, 2007 4:10:00 AM

Đâ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é

iamzindhquan8x # Tuesday, March 27, 2007 9:02:09 AM

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 # Tuesday, March 27, 2007 9:10:49 PM

làm gium em 1 skin đc. ko

Thủy Hiềndanquynh # Friday, March 30, 2007 4:41:29 AM

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

Unregistered user # Sunday, April 8, 2007 10:12:03 AM

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

xuanhau88 # Sunday, April 8, 2007 11:46:50 AM

ui , chi xaif skin moi' rui` !

ABC4eyesboy # Tuesday, April 10, 2007 9:46:14 AM

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

Thủy Hiềndanquynh # Tuesday, April 10, 2007 11:49:35 AM

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

ABC4eyesboy # Thursday, April 12, 2007 12:57:51 AM

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ì ?

Thủy Hiềndanquynh # Thursday, April 12, 2007 1:13:35 AM

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;
}

ABC4eyesboy # Friday, April 13, 2007 1:41:11 AM

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

Thủy Hiềndanquynh # Friday, April 13, 2007 2:39:21 AM

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

Unregistered user # Friday, April 20, 2007 12:51:39 PM

linh writes: vi` mot ngay` mai tuoi sang'

Trang Xìmonyoyokitty # Saturday, May 5, 2007 11:16:17 AM

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.

Unregistered user # Sunday, May 13, 2007 2:42:33 PM

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

Phan Vĩnh Thiệnthienhien610 # Monday, May 14, 2007 2:06:29 PM

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.

*/ }

vicanhdungnet # Wednesday, May 16, 2007 7:50:50 AM

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

Unregistered user # Saturday, May 19, 2007 2:01:59 PM

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

QuangHuycunhankinhte # Saturday, May 19, 2007 10:21:01 PM

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!

QuangHuycunhankinhte # Saturday, May 19, 2007 10:22:21 PM

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

Unregistered user # Thursday, May 24, 2007 6:09:04 AM

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ủ đã.

TrungispaceTrungiSpace # Tuesday, May 29, 2007 5:38:33 AM

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:)

Medusa♥Queenmionguyen # Wednesday, May 30, 2007 9:34:30 AM

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 ^^

ForeverALOMAMA # Thursday, June 7, 2007 9:00:31 AM

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

Unregistered user # Saturday, June 9, 2007 3:16:15 AM

Anonymous writes: sac,bit chet lien

Unregistered user # Sunday, June 10, 2007 8:03:41 AM

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

Minh Linh - C3K26 - Hoàng Lệ Kha 10c3k26 # Tuesday, June 19, 2007 9:21:23 AM

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`

NguyenThanhTamlonely86dn # Friday, June 22, 2007 2:43:43 AM

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

SeroporkHải Ly # Tuesday, June 26, 2007 4:25:50 AM

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®hct_tv # Sunday, July 1, 2007 5:04:57 AM

Thanks!

thuytienhuynh # Monday, July 9, 2007 11:20:46 AM

chi oi kich thuoc cua botton la bao nhieu

SWEETvnjphk # Tuesday, July 24, 2007 2:52:16 AM

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

oc_aristocratocquytoc # Monday, August 27, 2007 4:19:17 PM

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ị ạ!

Thủy Hiềndanquynh # Monday, August 27, 2007 10:29:28 PM

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".

Linh & CATOurHappiness # Friday, August 31, 2007 7:44:51 PM

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

Thủy Hiềndanquynh # Friday, August 31, 2007 10:22:21 PM

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

Linh & CATOurHappiness # Friday, August 31, 2007 10:39:49 PM

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

Thủy Hiềndanquynh # Friday, August 31, 2007 11:01:29 PM

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