My OperaThay đổi theme blog Opera cho người không cần biết CSS [Chỉ sử dụng theme "In the Shadows"]
Friday, April 17, 2009 8:22:02 AM
Bước 1:
- Bạn hãy tạo 1 folder trên máy của mình, VD tên là "MyOpera". Đặt nó ở đâu cũng được. Trong thự mục này bạn tạo một thư mục con để upload hình thay đổi cho theme. VD: images
Đường dẫn VD: D:\My Blog\MyOpera\images
Bước 2:
- Mở Notepad, và save với tên file là my.css trong folder MyOpera. (my là tên tùy ý mà bạn muốn đặt vì nó chỉ là hình thức ).
-Bạn có thể dùng các chương trình tạo CSS như Dreamwaver….vv… để tạo.
Bước 3:
-Vào blog my.opera.com mà bạn mới đăng ký. Chọn menu Files trong menu My Page\Files
- Trong trang Files này, bạn nhấn vào Create a folder . Nó sẽ xuất hiện phần tạo Folder, nhưng trước khi nhập tên thư mục muốn tạo thì bạn nhấn chọn / (your root folder), sau đó tại dòng Enter directory name: bạn nhập tên thư mục muốn tạo. (Lưu ý: phải đặt tên trùng với tên folder mà bạn đặt trong ổ cứng (như VD ở trên: images)). Nhập xong, bạn nhấn Create directory là Ok
Bước 4:
Tại blog của mình bạn vào trang Design trong menu My Page/Design để chọn cho mình một theme mẫu.
Trong phần Design này, có 2 dòng custom style sheet. Và Change color of the My Opera top menu.
- Dòng Change color of the My Opera top menu : Để bạn thêm hoặc không thêm các thành phần xuất hiện trên menu và màu sắc của nó.
- Dòng custom style sheet là nơi mà bạn đến với trang chình CSS của theme. Nhưng trước hết bạn vào phần này chỉ nên chọn “Do not use my custom style sheet” và nhấn Save.
- Sau đó bạn nhấn vào menu Blog để trở lại trang blog chính. Bạn click chuột phải và chọn "view page source". Nó hiện ra một trang IE, Firefox… riêng, thì trên menu bạn nhấn Save là lưu với tên tùy ý, miễn sao có tên đuôi file(phần tên mở rộng) là html là được. VD: MyBlog.html (Nhớ là bạn lưu vào thư mục MyOpera mà bạn đã tạo).
Bước 5:
1. Bạn vào thư mục MyOpera của mình trên ở cứng, chọn file html, click phải chọn Open with và chọn mở bằng chương trình Notepad. (Nếu có các chương trình sửa mã nguồn web khác thì bạn có thể dùng).
- Bạn xem trân các dòng đầu tiên ở thẻ link, bạn tìm đoạn chứa tên "main.css" trong cặp thẻ . Bạn copy đoạn này, nó bắt đầu từ chữ /community đến /main.css.
- Bạn paste nó vào thanh address của trình duyệt và viết thêm my.opera.com vào trước để trở thành my.opera.com/community/…../main.css. Enter hoặc nhấn GO để mở file CSS đó.
Copy toàn bộ trang CSS và mở file "my.css" bạn đã tạo trước đó bằng Notepad và dán đoạn code đó vào.
2. Trên file my.css bây giờ đã có các đoạn lệnh CSS mà bạn vừa dán vào.
- Tìm tất cả các đoạn có chứa /community/ đứng đầu và thêm vào http://my.opera.com trước nó. (Nó sẽ thành như sau: http://my.opera.com/community/..(thành phần phía sau)....)
Bước 6:
- Bây giờ tôi chỉ hướng dẫn bạn thay đổi background và banner của blog, những thành phần khác bạn có thể tự thay đổi nếu hiểu đôi chút CSS và mã màu của chúng.
1. Trước khi thay đổi background và banner thì bạn phải có 2 file hình thay thế. Background thì kích thước tùy bạn miễn sao đẹp.Còn banner, nếu muốn đảm bảo tính toàn vẹn thì bạn có thể copy banner của trang blog mẫu mà bạn đang sử dụng để xem kích thước chuẫn của nó là bao nhiêu pixel. (VD; blog tôi đang sử dụng có thành phần banner là 960 x 192).
2. Hai file này bạn copy vào thư mục images mà bạn tạo trong ổ cứng. Sau đó tại file CSS đang chỉnh sửa, bạn sẽ thấy 2 thành phần đầu tiên là body và #top. Phần body là để thay đổi hình background còn #top là của banner.
- Trong phần body, bạn sẽ thấy đoạn mã có chữ url phía trước. Bạn chỉ việc thay đoạn link trong dấu () phía sau url là images\bg.jpg là được (Lưu ý: bg.jpg là tên file hình của bạn trong thư mục images trên ổ cứng).
-Phần #top thì bạn cũng thay đổi link tương tự như phần body.
Sau đó bạn Save lại, nhưng đừng có đóng nó lại.
Bước 7:
- Bạn quay trở lại, blog my.opera.com của mình, vào phần Files bạn chọn Upload files. Chọn tên thư mục mà bạn muốn upload file vào (VD: images), nhấn browse, chọn file background và banner mà bạn đã thay trong file CSS để upload lên folder này.
Sau khi upload xong, bạn quay trở lại file CSS đã chỉnh và copy toàn bộ phần code CSS này.Bạn vào lại trang Design của blog và chọn custom style sheet. Dưới dòng chữ Enter CSS, bạn paste đoạn css vào đây và chọn “Only use my custom style sheet” rổi nhấn SAVE. Có thể bạn sẽ thấy nó trở nên trống trơn, thì bạn chỉ việc nhấn F5(refresh) vài lần thì nó sẽ hiện “nguyên hình” blog mà bạn đã chỉnh.
Blog Opera chỉ chạy tốt trên trình duyệt Firefox và Opera.
Chúc bạn vui vẻ.
- Bạn hãy tạo 1 folder trên máy của mình, VD tên là "MyOpera". Đặt nó ở đâu cũng được. Trong thự mục này bạn tạo một thư mục con để upload hình thay đổi cho theme. VD: images
Đường dẫn VD: D:\My Blog\MyOpera\images
Bước 2:
- Mở Notepad, và save với tên file là my.css trong folder MyOpera. (my là tên tùy ý mà bạn muốn đặt vì nó chỉ là hình thức ).
-Bạn có thể dùng các chương trình tạo CSS như Dreamwaver….vv… để tạo.
Bước 3:
-Vào blog my.opera.com mà bạn mới đăng ký. Chọn menu Files trong menu My Page\Files
- Trong trang Files này, bạn nhấn vào Create a folder . Nó sẽ xuất hiện phần tạo Folder, nhưng trước khi nhập tên thư mục muốn tạo thì bạn nhấn chọn / (your root folder), sau đó tại dòng Enter directory name: bạn nhập tên thư mục muốn tạo. (Lưu ý: phải đặt tên trùng với tên folder mà bạn đặt trong ổ cứng (như VD ở trên: images)). Nhập xong, bạn nhấn Create directory là Ok
Bước 4:
Tại blog của mình bạn vào trang Design trong menu My Page/Design để chọn cho mình một theme mẫu.
Trong phần Design này, có 2 dòng custom style sheet. Và Change color of the My Opera top menu.
- Dòng Change color of the My Opera top menu : Để bạn thêm hoặc không thêm các thành phần xuất hiện trên menu và màu sắc của nó.
- Dòng custom style sheet là nơi mà bạn đến với trang chình CSS của theme. Nhưng trước hết bạn vào phần này chỉ nên chọn “Do not use my custom style sheet” và nhấn Save.
- Sau đó bạn nhấn vào menu Blog để trở lại trang blog chính. Bạn click chuột phải và chọn "view page source". Nó hiện ra một trang IE, Firefox… riêng, thì trên menu bạn nhấn Save là lưu với tên tùy ý, miễn sao có tên đuôi file(phần tên mở rộng) là html là được. VD: MyBlog.html (Nhớ là bạn lưu vào thư mục MyOpera mà bạn đã tạo).
Bước 5:
1. Bạn vào thư mục MyOpera của mình trên ở cứng, chọn file html, click phải chọn Open with và chọn mở bằng chương trình Notepad. (Nếu có các chương trình sửa mã nguồn web khác thì bạn có thể dùng).
- Bạn xem trân các dòng đầu tiên ở thẻ link, bạn tìm đoạn chứa tên "main.css" trong cặp thẻ . Bạn copy đoạn này, nó bắt đầu từ chữ /community đến /main.css.
- Bạn paste nó vào thanh address của trình duyệt và viết thêm my.opera.com vào trước để trở thành my.opera.com/community/…../main.css. Enter hoặc nhấn GO để mở file CSS đó.
Copy toàn bộ trang CSS và mở file "my.css" bạn đã tạo trước đó bằng Notepad và dán đoạn code đó vào.
2. Trên file my.css bây giờ đã có các đoạn lệnh CSS mà bạn vừa dán vào.
- Tìm tất cả các đoạn có chứa /community/ đứng đầu và thêm vào http://my.opera.com trước nó. (Nó sẽ thành như sau: http://my.opera.com/community/..(thành phần phía sau)....)
Bước 6:
- Bây giờ tôi chỉ hướng dẫn bạn thay đổi background và banner của blog, những thành phần khác bạn có thể tự thay đổi nếu hiểu đôi chút CSS và mã màu của chúng.
1. Trước khi thay đổi background và banner thì bạn phải có 2 file hình thay thế. Background thì kích thước tùy bạn miễn sao đẹp.Còn banner, nếu muốn đảm bảo tính toàn vẹn thì bạn có thể copy banner của trang blog mẫu mà bạn đang sử dụng để xem kích thước chuẫn của nó là bao nhiêu pixel. (VD; blog tôi đang sử dụng có thành phần banner là 960 x 192).
2. Hai file này bạn copy vào thư mục images mà bạn tạo trong ổ cứng. Sau đó tại file CSS đang chỉnh sửa, bạn sẽ thấy 2 thành phần đầu tiên là body và #top. Phần body là để thay đổi hình background còn #top là của banner.
- Trong phần body, bạn sẽ thấy đoạn mã có chữ url phía trước. Bạn chỉ việc thay đoạn link trong dấu () phía sau url là images\bg.jpg là được (Lưu ý: bg.jpg là tên file hình của bạn trong thư mục images trên ổ cứng).
-Phần #top thì bạn cũng thay đổi link tương tự như phần body.
Sau đó bạn Save lại, nhưng đừng có đóng nó lại.
Bước 7:
- Bạn quay trở lại, blog my.opera.com của mình, vào phần Files bạn chọn Upload files. Chọn tên thư mục mà bạn muốn upload file vào (VD: images), nhấn browse, chọn file background và banner mà bạn đã thay trong file CSS để upload lên folder này.
Sau khi upload xong, bạn quay trở lại file CSS đã chỉnh và copy toàn bộ phần code CSS này.Bạn vào lại trang Design của blog và chọn custom style sheet. Dưới dòng chữ Enter CSS, bạn paste đoạn css vào đây và chọn “Only use my custom style sheet” rổi nhấn SAVE. Có thể bạn sẽ thấy nó trở nên trống trơn, thì bạn chỉ việc nhấn F5(refresh) vài lần thì nó sẽ hiện “nguyên hình” blog mà bạn đã chỉnh.
Blog Opera chỉ chạy tốt trên trình duyệt Firefox và Opera.
Chúc bạn vui vẻ.
Bui Thi Thien Nganmoitim97 # Monday, April 27, 2009 9:40:13 AM
On this page you can enter your own custom style sheet in the textarea below. We recommend that you only use this page if you are experienced with Cascading Style Sheets.
Please note: We are continuously improving the code and functionality of the Opera Community. It is likely that the CSS and HTML code will not remain exactly the same.
Ban chi lai dum minh voi. Cam on!
NGO TUAN TUHIT2TARGET # Tuesday, April 28, 2009 12:03:18 PM
Theme của mình đang dùng là "In the Shadows". Nếu bạn muốn thay đổi dựa vào theme của mình thì sử dụng CSS dưới và Upload hình như cách mình chỉ dẫn ở trên:
@import url(http://my.opera.com/community/css/themes/mainstructure1.css);
@import url(http://my.opera.com/community/css/themes/maincolors2.css);
body {
background:#000 url(images/bg_1.jpg) left top repeat-x scroll;
background-attachment: fixed;
color:#333;
}
#top {
background:#222 url(images/top.jpg) bottom left no-repeat;
color:#fff;
border-bottom:3px solid #000;
}
#top2 {
background:#000 ;
}
#wrap4 {
background:#fff url(http://my.opera.com/community/graphics/themes/darkside280.gif) 680px 0 repeat-y;
}
.onecol #wrap4 {
background:#fff;
}
#myphoto, #albumslides, #qp li {
border:1px solid #333;
}
#sidewrap {
background:#000;
}
#top a {
color:#fff;
}
#subtitle {
color:#666;
}
#menu {
border-top:1px solid #222;
border-bottom:1px solid #222;
background:#000;
}
#menu li {
text-transform:uppercase;
font-size:13px;
}
#menu a:link, #menu a:visited, #menu a:active {
background:#000 url(http://my.opera.com/community/graphics/themes/menuarrow.gif) top left no-repeat;
}
a:link, a:visited, a:active, #content .title a:hover, #content #albums h3 a:hover {
color:#d00;
}
#side {
color:#eee;
}
#side h2, #side caption {
background:#161616 url(http://my.opera.com/community/graphics/themes/darksideh2.gif) top right no-repeat;
padding-top:14px;
}
#side a:link, #side a:visited {
color:#fff;
}
#meta a:link, #meta a:visited {
color:#777 !important;
}
#side a.username:link, #side a.username:visited, #calendar tbody a:link, #calendar tbody a:visited {
color:#e00;
}
.title a:link, .title a:visited, .tags a:link, .tags a:visited, #footer a:link, #footer a:visited, .postby a, .postby a:visited, .comments a, .comments a:visited, .postnav a, .postnav a:visited, .content a, .content a:visited, #albums h3 a, #albums h3 a:visited {
color:#333;
}
/* mainstructure and maincolor overrides */
#wrap1 {
max-width:1000px;
min-width:1000px;
}
#wrap1, #wrap3 {
width:1000px;
}
#wrap3, body #myo2, body #myo-login div, body #editstatus-form div {
min-width:960px;
max-width:960px;
width:960px;
}
#wrap4 {
padding:0 20px;
min-width:920px;
}
#content #mainwrap {
width:640px;
margin:0 -280px 0 0;
}
#content #main {
width:640px;
margin-right:280px;
}
#top {
height:338px;
margin:0 -20px;
}
#wrap4 #content {
width:920px;
}
#top h1 {
padding-top:31px;
font-size:2.5em;
line-height:1;
}
#top2 {
height:116px;
}
body #content, body #footer {
width:920px;
max-width:920px;
}
#menu li {
margin-right:35px;
}
#menu a:link, #menu a:visited, #menu a:active {
padding:0 0 0 10px;
}
h2 {
font-size:1.9em;
}
.post {
padding:25px 0;
}
div.avatar {
border:1px solid #ccc;
}
#content #mypix li {
margin-top:20px;
}
.editthis a, .editthis a:visited {
color:#111;
}
/* shoutbox */
#shoutbox li {
background:url(http://my.opera.com/community/graphics/themes/chat3black.gif) bottom left no-repeat;
color:#999;
}
#shoutbox blockquote {
background:url(http://my.opera.com/community/graphics/themes/chat2black.gif) top left repeat-y;
color:#fff;
}
#shoutbox blockquote p {
background:url(http://my.opera.com/community/graphics/themes/chat1black.gif) top left no-repeat;
}
Nguyễn Đình Hàblogfun # Saturday, May 2, 2009 5:19:35 AM
no co dinh dang j den thuat toan ko vay?hay chi bso gom cac the lenh?
NGO TUAN TUHIT2TARGET # Tuesday, May 5, 2009 11:52:14 AM
Dj Longnelydjlongnely # Sunday, June 7, 2009 10:16:13 AM
Tuấn Ngọcngtuanngoc # Tuesday, June 30, 2009 6:53:00 AM
Tuấn Ngọcngtuanngoc # Tuesday, June 30, 2009 6:54:02 AM
Leticayennh272 # Friday, July 10, 2009 6:34:03 AM
lesanhit # Saturday, July 11, 2009 11:52:50 AM
Michelangleonguyenson933 # Thursday, August 5, 2010 6:07:47 PM
Tuấn Ngọcngtuanngoc # Friday, August 6, 2010 1:21:42 AM
Bài hướng dẫn của em này nghe khó hiểu, nên cả nhà có thể đọc tham khảo những bài khác tại đây, dễ hiểu và linh động hơn
http://my.opera.com/hnkien8x/albums/show.dml?id=1965121
Michelangleonguyenson933 # Friday, August 6, 2010 2:41:58 AM
Gamebacaygamebacay # Monday, July 25, 2011 7:01:58 AM