Thủy Hiền

Test offline cho Skin của Blog Opera

Sunday, March 11, 2007 6:55:55 AM

Hồi mới học HTML, tôi cứ tưởng phải upload tất cả hình ảnh vào host thì mới xem được trang HTML

Hậu quả là có một ngày bão tuyết, ở nhà thì wireless network không thể connect được, tôi đã phải lội bộ dưới trời tuyết dày đặc để đến trường. Cũng may tôi là Fulbright scholar

nên security guard mới mở cửa cho tôi vào văn phòng

Khi bắt đầu mò mẫm cách trang trí Blog Opera, tôi đã có kinh nghiệm test offline các trang HTML

Nhưng... sao không thể làm được

Hậu quả là tôi phải đăng ký thêm một tài khoản ở Opera dùng để test skin mới

hu hu... và tiền Internet tăng một cách chóng mặt (ba Đan Quỳnh cằn nhằn quá trời, nhưng nhờ vậy mà có lý do đổi package

).

Vừa rồi, Khánh Quang chỉ cho tôi biết lý do tôi không test offline cho skin Opera được

Hì hì... mắc cỡ thiệt

vì tôi đã từng edit một webset sử dụng CSS thành trang web của tôi mà

Anyway, từ đây về sau sẽ không mất thời gian ngồi chờ connect to my opera và không tốn thêm nhiều tiền Internet (mặc dù bây giờ xài ít thì cũng trả bấy nhiêu rồi

).

* * *

Trước tiên, bạn tạo một folder trong ổ cứng của bạn. Tất cả các hình ảnh để trang trí cho blog của bạn đều được lưu trong folder này. Sau đó bạn dùng menu save as, hoặc save page as để lưu các trang HTML hiển thị blog của bạn vào folder vừa tạo, ví dụ trang blog, trang lưu trữ bài viết - Archive, trang hình ảnh - Photos,... Bạn cũng cần lưu file main.css vào folder này.

Tiếp theo, bạn mở các file HTML và tìm đoạn mã sau (nằm trong phần head):

<link rel="stylesheet" href="http://files.myopera.com/username/user.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="/community/css/users/2/main.css" type="text/css" media="screen,projection,print" />

Lưu ý: username là tên của bạn, ví dụ của tôi là danquynh; số 2 tương ứng với theme mặc định mà bạn chọn để chỉnh sửa. Trường hợp bạn không sử dụng theme mặc định của Opera (có nghĩa là bạn lưu với option "only use my custom style sheet") thì bạn sẽ không thấy đoạn mã có chứa main.css trong các file HTML. Bạn cần chỉnh lại đoạn mã này như sau:

<link rel="stylesheet" href="user.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="main.css" type="text/css" media="screen,projection,print" />

Có nghĩa là bạn bỏ đường dẫn cho hai file main.css và user.css.

Bạn mở notepad và gõ vào những đoạn mã mà bạn muốn thay đổi so với theme mặc định, như hình nền, banner, footer,... và save với tên là user.css.

Lưu ý trong file user.css này bạn cũng không chỉ đường dẫn cho các file hình ảnh, mà chỉ ghi tên hình ảnh thôi. Ví dụ, trong theme dành cho Blog Opera của bé, đoạn mã dành cho banner là:

#top2 {
BORDER-TOP: #555 1px solid;
PADDING-LEFT: 15px;
BACKGROUND: url(banner.gif) right top;
HEIGHT: 183px;
}

Khi đã hoàn tất file user.css, bạn mở các trang HTML bằng trình duyệt web để xem kết quả. Nếu đã vừa ý, bạn sẽ upload hình ảnh vào host (My Account/ Files) và thay đường dẫn (url) cho các file hình ảnh trong file user.css. Cuối cùng bạn paste toàn bộ nội dung của file user.css vào ô Enter CSS trong My Account/ Design/ Change Design.

Chúc bạn thành công![/i]

Phá sảnTạo Skin cho Blog Opera từ theme Yahoo 360

Comments

1 2 Next »

xuanhau88 # Monday, March 12, 2007 10:47:29 AM

bóc tem cái đã hôm nào làm thử sau he he

Mr Silentforevermyweb # Monday, March 12, 2007 11:21:54 AM

Cách này hay thiệt lúc trước em cũng có làm thử nhưng không được . Kể từ nay đỡ tốn tiền net rồi

. À chị cho em hỏi bé mới sinh của chị tên gì nhỉ ... Nghe chị có em bé từ Tết mà chưa có dịp hỏi thăm..

snowmicky # Wednesday, March 14, 2007 10:57:35 AM

đẹp thế anh cho em cái flie css của blog này đi! Y!m em là:nghiangominh

xuanhau88 # Wednesday, March 14, 2007 11:07:29 AM

đẹp thế anh cho em cái flie css của blog này đi! Y!m em là:nghiangominh

sis Hien^` ma` kiu la` anh !?

Thủy Hiềndanquynh # Friday, March 16, 2007 1:53:22 PM

Em xuanhau88, lại bắt chước Yahoo rồi

Em forevermyweb, cám ơn em đã hỏi thăm, em bé sinh 14/2, nhưng bây giờ chưa đặt tên

Em snowmicky, chị có link download skin này mà

xuanhau88 # Tuesday, March 27, 2007 5:53:31 PM

chị ui , em nhờ chị làm giùm em 1 skin đc. ko
hom qua em lam` j` ko biết mà hỏng rồi

╦

Nguyen Thi Vũ HoàDark_1010 # Wednesday, March 28, 2007 3:15:15 AM

Chị Lu dễ thương thật đấy, hôm nào gặp chị Lu được ko, em năm nay mới học lớp 10 thôi, nhưng thik gọi Lu là chị hơn (cho nó trẻ ấy mà). Em là dân mới vào làng blog thôi. Mong được làm quen với chị Lu và tất cả những người bạn ở đây.

Thủy Hiềndanquynh # Friday, March 30, 2007 4:47:44 AM

Welcome em Dark_1010 nhé. Em ở đâu? Khi nào em bé lớn thì chị em mình đi uống café nhé

luckystars # Friday, March 30, 2007 6:37:10 PM

Xin thưa bà con, từ ngày Opera n6ang cấp giao diện blog lên... thì ko thể nào save as toàn bộ blog về để lấy các file .main.css.... nên khó lòng mà test skin hay chôm skin của thiên hạ đc nữa.
Vậy có cách nào save skin về ko....

Thủy Hiềndanquynh # Saturday, March 31, 2007 12:13:08 AM

View source

luckystars # Saturday, March 31, 2007 5:07:55 AM

Cũng View source rùi đấy chứ, nhưng mò ko ra cái file main.ccs.... use.ccs đâu cả .Nhìn khi sao thấy các ttin trong các file đó út wa'. ko biết skin, themes... đủ ko nữa...Nên ko dám xài thử

Thủy Hiềndanquynh # Saturday, March 31, 2007 6:32:57 AM

Bạn xem "FAQs về Blog Opera", câu hỏi số 20

Truong Xuansocnhonho # Saturday, March 31, 2007 7:14:05 AM

Trời, phải chi em đọc bài này sớm hơn nhỉ?Em đang thử Skin mới mà cuối cùng nó lộn tùng phèo hết trơn.Chán cái là liên tục bị tình trạng vô chưa được 3 phút đã down rồi. Em sẽ thử offline ở nhà. Cảm ơn chị nhiều.

Hoàng ViệtWhitejasmine # Sunday, April 1, 2007 1:57:33 AM

Phải chi em đọc được bài này sớm hơn thì có lẽ đã không phải vất vả trong việc làm skin cho blog đến thế. Cứ mỗi lần thay đổi 1 cái gì đó là mỗi lần phải F5 để refresh trình duyệt. Cảm ơn chị vì tuyệt chiêu này

12GchuyenTB # Sunday, April 8, 2007 4:21:44 PM

Trời ui, chị mới gia nhập hacker mũ đen hay sao mà giao diện tối tăm thế này. Cái test offline của em dùng fire fox thì không cần phức tạp như chị bảo, chỉ cần save as toàn bộ trang web vào 1 thư mục, thay đổi nội dung trong main.css rồi chạy lại file có biểu tượng của fire fox là được.

Thủy Hiềndanquynh # Sunday, April 8, 2007 4:50:47 PM

socnhonho và Whitejasmine đã làm thử chưa?

Em 12GchuyenTB, nếu em không thay đường dẫn trong các file HTML (là file có biểu tượng Fire Fox) thì làm sao offline được?

Bài viết của chị chỉ đề cập mỗi trick đó thôi: thay đường dẫn cho main.css (hoặc user.css) và hình ảnh để không cần phải load từ host

Btw, chị cũng sử dụng Fire Fox

Cái skin này chị làm dở từ trước khi sinh em bé

Tính không làm tiếp nhưng tại nhiều người thích quá, với lại chị cũng thấy nó đẹp

Nguyễn Anh Túechip # Sunday, April 15, 2007 5:19:33 AM

Skin đẹp dã man ha - ^_^

Hoàng ViệtWhitejasmine # Sunday, April 15, 2007 9:11:00 AM

Hì, em chưa có dịp thử. Dạo này em chả có thời gian làm skin nữa nên em để skin mặc định luôn. Khi nào có thời gian em sẽ thử ^_^.

dizzy.sinfirexsinfirex # Thursday, April 19, 2007 7:24:07 AM

Nếu bạn save để sửa offline như vậy, sẽ ko thể save được images làm background của trang O_o Vì bản thân khi sử dụng lệnh "Save as" trên menu của trình duyệt nó đã save thiếu file rồi, vì vậy ko thể render ra 1 trang web chuẩn như trên mạng với số file bị thiếu đó.

Thủy Hiềndanquynh # Thursday, April 19, 2007 8:41:10 AM

Echip, cám ơn em có lời khen

Whitejasmine, chị cũng tính hỏi em mấy lần vì vào blog của em toàn thấy skin mặc định

Tính comment cái post có "chị Hiền", nhưng mà mới gõ được vài từ thì công chúa oe oe

Sinfirex, thế nên tớ mới nói là phải save tất cả các hình ảnh để hiển thị trên skin

Nếu save as không được thì có thể view source để save mà

Tuy nhiên, cũng có những hình ảnh không save được, ví dụ photo slide shows, avatars, spotlight images... Nhưng những hình ảnh đó thì cũng không cần thiết lắm, có frame là canh được rồi. Nói chung là tớ test offline (không cần connect internet) cho cả skin sử dụng hoàn toàn my CSS, và combine với theme mặc định. And it works very well

dizzy.sinfirexsinfirex # Thursday, April 19, 2007 12:26:17 PM

Bạn làm thế với web đơn giản thì được, nhưng với các site phức tạp sẽ gặp rất rất nhiều khó khăn. Tin mình đi, vì thêm nữa là vấn đề tính tương thích với các trình duyệt sẽ xảy đến nếu như khi preview bạn không thể nhìn thấy đủ các element trên site như nó phải có.
Đơn giản như bạn thử save nội dung của trang blog của mình. Kết quả sẽ khá tồi tệ vì trong CSS chỉ ra nhiều file ảnh mà trình duyệt ko sờ đến. Việc đi save từng bức trong CSS chỉ ra sẽ mất rất nhiều thời gian và sức lực.

Mình đã từng làm như bạn - đó đã là cách mình nghĩ đến đầu tiên ^^" (mình ko nghĩ đến việc làm online luôn) - nhưng thấy nó có quá nhiều bất cập nên thôi.
Cách của mình phải sử dụng đến internet 1 chút, nhưng sẽ rất nhanh vì bạn còn có cache của trình duyệt giúp sức chứ không phải cái gì cũng phải download.

Thủy Hiềndanquynh # Thursday, April 19, 2007 1:10:07 PM

Hì hì... tớ chỉ là dân amateur, nên so far chỉ có mỗi Opera là không thể control được các trang HTML cho nên là site phức tạp nhất phải test. Nhưng tớ thấy làm cách đó rất ok, vì hình ảnh thật ra cũng không nhiều lắm. Hơn nữa, không tốn tiền là tớ thấy ok nhất

Dù tốn công chút (mặc dù công cũng là tiền

) nhưng cũng cảm thấy hả dạ lắm

Mà tớ đã save trang của sinfirex và test từ lâu rồi

Hì hì... coi url của graphics và save từng hình đó

Nói chung là thấy trang nào nhìn hay hay là view source và copy hết for later use

Với lại hình của sinfirex rất đẹp nữa, save để mai mốt xài chuyện khác. Còn làm website dài dài mà

dizzy.sinfirexsinfirex # Thursday, April 19, 2007 2:52:12 PM

Hi, mình cũng có thói quen save trang đẹp. Giải pháp của mình là save ở dạng .HMT (dùng IE) nó sẽ chỉ ra 1 file duy nhất và khi xem rất tiện nữa (1 file mà).

Tuan Anhchuotanhtuan # Thursday, May 10, 2007 1:26:47 AM

chi hien oi em moi lam blog nen doc em ko hieu gi ca mong chi hug dan that ky giup em

Unregistered user # Tuesday, May 15, 2007 4:11:43 AM

Anonymous writes: "" Sau đó bạn dùng menu save as, hoặc save page as để lưu các trang HTML hiển thị blog của bạn vào folder vừa tạo"" SS HIền ơi !!! Chỗ này em ko hỉu cho lắm ??? em save folder vừa tạo vào ỗ C:\ nhưng em ko kím thấy chỗ menu như lời chị nói ở đâu cả ??? _ còn nữa ! cái phần "main" chị lấy ở đâu vậy ??? em chỉ có fần user thôi hả à :( _ em mới tập tành viết blog nên ko hỉu đôi chỗ cho lắm !! chị hướng dẫn cụ thể giùm em nha... thanks chị nhìu lém

Thủy Hiềndanquynh # Tuesday, May 15, 2007 5:02:13 AM

Chuotanhtuan, post này không hướng dẫn thay đổi giao diện, và chị cũng đã hướng dẫn chi tiết rồi đó

Em anon
1/ menu "save (page) as" là của trình duyệt chứ không phải của folder. Em nhìn lên thanh menu, chọn menu File rồi chọn tiếp save (page) as.

2/ Nếu em save trang của chị thì không có main.css, chị nói rõ ở phần lưu ý rồi mà

Trường hợp bạn không sử dụng theme mặc định của Opera (có nghĩa là bạn lưu với option "only use my custom style sheet") thì bạn sẽ không thấy đoạn mã có chứa main.css trong các file HTML.

Thành Côngntcong # Sunday, May 20, 2007 3:39:14 AM

đúng cái em lăn tăn từ mấy hôm nay, tiền mạng lên quá trời

, chị em mình giống nhau ghê ha. Thankyou very much, you're great

nếu em ko nhầm thì chị dạy TA phải ko chị?

Thủy Hiềndanquynh # Sunday, May 20, 2007 4:09:23 AM

Chị dạy thêm tiếng Anh, kiếm tiền nuôi con

hương sơngiadinhnho # Monday, June 18, 2007 4:34:09 PM

Chào chị ạ. E là Hương e đọc bài viết của chị từ khi bắt dầu chập chững bước vào làng blog. e đọc gần như tất cả các hướng dẫn của chị và mò theo. Đến đây thì e không hiểu. vì e không tìm thấy phần head. mà các đuôi html của e, toàn hiển thị e (internet) e không vào chỉnh sửa được, e cũng k mở được html chắc do e làm sai. chị chỉ lại hộ e đc k?

hương sơngiadinhnho # Monday, June 18, 2007 4:38:25 PM

Đang viết bài thì bé nhà e khóc. Nên phải gửi vội chưa kịp cảm ơn chị. Cảm ơn chị nhìu he.

Thủy Hiềndanquynh # Monday, June 18, 2007 5:48:19 PM

Em click chuột phải trên các files html và chọn "open with notepad" nhé

tructhao1nguyenvanduc # Monday, July 9, 2007 3:06:03 PM

chị ơi cho em hỏi..!!
mình mún thay cái hình banner kiểu khác thì làm sao hã chi.
em đã thử thay hình khác vào nhưng lại không biết dùng size bao nhiêu cho phù hợp:P
chị giúp em nha..!! cảm ơn chị
Àh !! xin lỗi chị , tại em mới vào làng blog nên mượn tạm css của chị để em làm nền tảng trang trí blog của em..:p
vài bữa nữa em kiếm được hình ảnh khác em sẽ trả bản quyền cho chị hen;) ..!!

Thủy Hiềndanquynh # Monday, July 9, 2007 3:32:50 PM

Em lấy được cái CSS của chị mà còn hỏi thay banner như thế nào sao? Chị có chục cái skin to share, sao không xài mấy cái đó mà phải lấy cái này? Hết nói!!

tructhao1nguyenvanduc # Tuesday, July 10, 2007 11:12:10 AM

xin lỗi chị..!!
Nếu chị không muốn em sẽ xóa skin đó..!!
với lại em mún hỏi là cái size của banner cần bao nhiêu để phù hợp hả chị..!! em thử thay vào nhưng size không đủ rộng để vừa với nền blog..!!
Àh.! nếu chị có cái skin nào khác thì share cho em với..!!

cảm ơn chi. nhiều..!!

Thủy Hiềndanquynh # Tuesday, July 10, 2007 3:17:49 PM

Em xem post "Thay đổi banner Blog Opera". Chị có khoảng 10 cái skins to share đấy, em xem ở sidebar, click vào từng link để xem demo.

tructhao1nguyenvanduc # Monday, July 16, 2007 9:03:30 AM

zda...!!
cam on chi. nhiu hen..!!

minhvtv # Saturday, July 28, 2007 7:02:49 AM

không thể lưu lại được những gì đã thay đổi chị ạ.Cứu em với

Nguyễn Đức Địnhdinhnguyen # Tuesday, August 7, 2007 5:28:10 AM

Lâu quá hông dô lại trang của chị, khỏe không chị?

SIlv3rsilv3r.blog # Tuesday, August 7, 2007 11:11:03 AM

Em vẫn ko hiểu,mình tự tạo ra file main.ccs hay là khi save nó tự hiện ra hả chị,em save blog em nhưng ko có T_T

anhhai122 # Tuesday, August 14, 2007 2:12:09 PM

Chi oi! sao em em ko tim thay doan ma co chua user.css em chi tim thay co moi main.css. Em lam ca 2 cach save as va View source deu ko co. Hai neu co the chi cho em ban Test offline cua chi duoc ko

Phillip Phú - Hawaiidouble808dethuong # Sunday, August 19, 2007 11:19:52 AM

Chị ơi, em đọc đi đọc lại và save hết tất cả lại mà em vẫn không biết đọan cần chỉnh ở đâu hết chị ơi:cry:

pham viet hung # Monday, September 10, 2007 2:28:02 AM

CUU

Phan Ngọc Tài24nh2 # Friday, September 21, 2007 3:14:07 AM

chi ơi! em ko hiểu vi sao blog của em ko save dc.Trong khi do em save dc blog của chị và tất cả các trang web khác.Chị có thể giúp em không? Em cảm ơn chị!

Phillip Phú - Hawaiidouble808dethuong # Saturday, September 22, 2007 8:37:37 AM

Chị ơi...nhờ bài này của chị và bài viết HTML mà hôm bữa chị cho em link...em in về tối nằm đọc..rồi thực hành mà em đã tự làm nhà được rồi...Em cám ơn chị thật nhiều:love:

Viktoria Buiova'betrang # Monday, October 1, 2007 10:05:52 AM

Chị Lu dễ thương ơi, chị vào xem giúp em cái layout với. Em làm thế nào mà banner thì đen xì, footer thì trắng xoá, background thì như bị lấm bùn, font chữ thì như tiếng arập. Chán quá. Mà em paste các đoạn code rất kỹ càng, đường link cẩn thận, nghiên cứu cả chị, cả Phamlam và cả kiwi nữa. Thế mà nó chẳng ra cái gì cả. Hu hu. Giúp em đi.

Nguyễn Lê Trung HậuCombatantFlame # Tuesday, October 23, 2007 5:42:18 AM

Hix....seo mấy cái theme tôi down về rồi up lên mà hok đổi theme dc dzị

Thủy Hiềndanquynh # Tuesday, October 23, 2007 9:57:03 AM

Minhvtv, sau khi save thì F5

Dinhnguyen

Silv3r.blog, em right click trên file.html, tìm đoạn mã có chứa main.css rồi truy cập để lấy về nhé

Anhhai122, nếu chưa customize thì sẽ không thấy main.css. Chị có vài themes to share, em down về mà xem nhá.

Double808dethuong

Pham viet hung, chuyện gì?

24nh2, em right click trên blog, chọn view source và tìm các file.css nhé.

Betrang, hình như câu này post 2 lần thì phải?

CombatantFlame, xin vui lòng đọc kỹ hướng dẫn trước khi sử dụng

Viktoria Buiova'betrang # Wednesday, October 24, 2007 2:38:50 AM

Hehe, dung la chi Lu phai dong comment lai roi. Vi em post co 1 lan thoi, tu dau thang 10 co ma, chi doc roi, nay doc lai, thay quen nen tuong 2 lan day thoi. Hay la nhieu comment qua thanh ra tau hoa nhap ma chi oi. hic hic. thuong chi qua.

Thủy Hiềndanquynh # Sunday, October 28, 2007 5:07:09 PM

Không, cái này trả lời rồi mà

Chị copy and paste câu trả lời qua blog của em luôn mà, hic...

Dương Quang Nhậtnhatcom.pro # Wednesday, January 16, 2008 5:34:10 PM

Chị ơi giúp em với !!!
Blog của em từ khi opera nâng cấp thì em vào post ,viết bài xong nhưng lại ko có nút " Save " bây giờ em ko viết được blog nữa rồi , buồn wúa chị ạ ! Em làm để tặng bạn gái mà nhưng bi giờ thì bó tay ,chị giúp em với nha .Em cảm ơn chị nhiều lém !
Em _____________________ Dương Quang Nhật__________________

1 2 Next »

Showing comments 1 - 50 of 65.