Thủy Hiền

FAQs về Blog Opera

Wednesday, 7. February 2007, 03:11:26

Bài viết này có thể xem như mục lục tất cả các bài hướng dẫn của tôi về Blog Opera. Tất nhiên, bạn có thể xem trong "Archive", nhưng có lẽ mất thời gian hơn

Ngoài ra, tôi cũng tập hợp tất cả những câu hỏi mà một số khách đã đặt ra và tôi có thể trả lời được. Xin bạn vui lòng đọc kỹ trước khi đặt câu hỏi mới nhé

1. Ưu điểm của Blog Opera

2. Giới thiệu tổng quát về Blog Opera

3. Các tính năng chủ yếu của Blog Opera

4. Thêm bảng thăm dò ý kiến vào Blog Opera

5. Chỉnh sửa tùy chọn của Blog Opera

6. Chỉnh sửa thông tin cá nhân trên Blog Opera

7. Khung soạn thảo của Blog Opera

8. Tạo album ảnh trong Blog Opera

9. Quản lý album ảnh trong Blog Opera

10. Tạo và quản lý Forum ở Opera

11. Trang trí Blog Opera theo sở thích cá nhân

12. Thay đổi giao diện Blog Opera trong 10 phút

13. Thay đổi background Blog Opera

14. Thay đổi banner Blog Opera (Phạm Lâm)

15. Viết tiếng Việt trong Blog Opera

16. Thay đổi bố cục Blog Opera (Rearrange Opera's default layout)

17. Trang trí lại sidewrap Blog Opera

18. Chèn Yahoo! Emoticons vào bài viết trong Blog Opera

19. Trang trí bài viết của Blog Opera theo chủ đề

20. Làm thế nào để lấy toàn bộ file main.css để có thể save bằng option "Only use my custom style sheet"?

Nếu bạn view source bất kỳ một trang Blog nào ở Opera, bạn sẽ thấy phần code sau đây ở phần đầu tiên:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- by Thủy Hiền
<link rel="stylesheet" href="/community/css/users/account/account_white.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="/community/css/users/account/mobile_white.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="/community/css/users/common.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="/community/css/users/2/handheld.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="http://files.myopera.com/danquynh/user.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="/community/css/users/album-slideshow.css" type="text/css" media="screen,projection,print" /></head>

Bạn chú ý những phần in đậm, đó là tất cả các file.css để quy định hình thức hiển thị của trang blog. Bạn cần phải có tất cả các đoạn code trong các file này và đưa vào file user.css của bạn để có thể lưu bằng option "only use my custom style sheet".

21. Có cách nào bỏ phần sidebar không?

Default themes số 10 và 11 không có sidebar, bạn có thể lựa chọn và chỉnh sửa trên các themes đó.

22. Tên blog này dài quá nhiều người không nhớ nổi. Có cách nào làm cho nó dễ nhớ hơn không?

Nếu bạn muốn 1 tên miền ngắn hơn thì bạn có thể... mua (giống như Phạm Lâm vậy) và dùng chức năng forward để chuyển tới Blog Opera. Trường hợp không muốn mua thì bạn có thể vào www.uni.cc để đăng ký một tên miền và cũng dùng chức năng forward. Khi đăng ký thì bạn có thể có 1 domain mang tên http://www.tênbạn.uni.cc (đọc là You and I - bạn và tôi, và CC là carbon copy - đồng gửi, cũng hay đó chứ?), ví dụ Đan Quỳnh cũng có một tên miền tương tự như vậy http://www.danquynh.uni.cc

Cũng có nhiều trang khác offer free domain, nhưng tôi thấy chỉ có uni.cc là không có banner hoặc pop-up ads.

23. Làm sao để chèn links sao cho khi click vào thì sẽ mở sang một cửa sổ khác?

Mặc định của Opera là khi click vào một link nào đó thì sẽ tự động mở sang trang mới. Tuy nhiên, cũng có một số link sẽ mở ngay trang hiện tại, ví dụ nếu bạn click vào tên bạn ngay dưới avatar (phần comment) thì sẽ mở ra trang hiện tại, chứ không ra new window

Cái này mình không control được

Tuy nhiên, nếu muốn chắc ăn, khi viết link, bạn thêm HTML code (cặp thẻ anchor, chứ không phải bbcode [url]) và chỉ target="_blank".

24. Làm sao để hiển thị các links ra sidebar?

Để hiển thị link ra sidebar, trước tiên bạn vào menu link (top menu), và click vào biểu tượng "edit"

Rồi check vào ô "Show this category in my blog sidebar"

25. Sau khi save xong thì màn hình chỉ còn 2 dòng Community và Skip navigation phía trên, biến mất chữ Preferences. Làm thế nào để nó... "thò mặt" ra để mày mò tiếp?

Rắc rối này sẽ xảy ra nếu bạn không viết đầy đủ tất cả các codes trong file user.css mà lại save với option "only use my custom style sheet". Để trở vào ô Enter CSS, bạn hãy gõ url sau đây http://my.opera.com/tên-username-của-bạn/account/usercss.dml và chỉnh lại.

26. Làm sao để bỏ dòng chữ "Sticky post"?

Bạn thêm đoạn này vào user.css:

.post .sticky {
display:none;
}

27. Làm sao để chèn media vào blog?

Để chèn file flash vào bài post trên blog, bạn dùng code sau (thay đường dẫn (src) bằng file của bạn):

<embed quality="high" menu="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" src="http://www.***.***/*.swf" type="application/x-shockwave-flash" width="500" height="273" loop="false"></embed>

Để chèn nhạc (mp3), bạn dùng code sau:

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://www.***.***/*.mp3" name="MediaPlayer1" width="280" height="46" autostart="0" showcontrols="1" volume="80"></embed>

Để đoạn nhạc lặp lại thì bạn thêm code loop=-1.

28. Tại sao khi chuyển những bài viết từ file word vào blog thì không thể đưa footnote (chú thích) vào trong post được? Cách giải quyết?

Muốn tạo footnote, bạn phải biết nhiều về ngôn ngữ W3. Bạn có thể vào đây tham khảo http://www.w3schools.com/xslfo/obj_footnote.asp

Ngược lại, bạn có thể làm... thủ công bằng cách tạo lại footnote trong bài viết (copy phần footnote trong word rồi paste), còn các số ghi ở trên phần chữ trong bài viết thì có thể tạo bằng thẻ superscript (S¹) hoặc subscript (S₁) trên cửa sổ soạn thảo của Opera.

29. Thay đổi background của topbar trong phiên bản mới của Blog Opera (Customize Opera Blog's topbar)

30. Những thay đổi của Blog Opera

31. Test offline cho skin của Blog Opera (Test Opera's themes offline)

32. Tạo Skin cho Blog Opera từ theme Yahoo 360^o (Using Yahoo 360 Themes to customize Opera's webpage layout)

33. Tạo playlist và broadcast trên blog

34. Làm cách nào để tạo script chuột và đổi màu thanh trượt?

Trước đây, tôi cũng tạo cursor (ví dụ trang chủ của Đan Quỳnh) và thanh trượt (lưu bút của Đan Quỳnh), nhưng đều không hiển thị trên FireFox (chỉ xem được trên Internet Explorer), nên tôi không làm nữa. Nhưng nếu bạn vẫn muốn thì bạn làm như sau:

- Để tạo script chuột, bạn thêm mã cursor vào đoạn mã body (mã đầu tiên trong main.css hoặc user.css):

body {
cursor: url(red5normal2.cur)
}

Bạn cần ghi rõ địa chỉ URL của cursor mà bạn đã upload vào host. Bạn có thể vào Cursor Mania để download các loại cursor.

- Để đổi màu thanh trượt, bạn cũng thêm đoạn mã scrollbar vào body:

body {
scrollbar-face-color: #b0c5a5;
scrollbar-shadow-color: #dbe3cc;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: #dbe3cc;
scrollbar-track-color:#dbe3cc;
scrollbar-arrow-color: white
}

Bạn có thể vào Online CSS Scrollbar Changer để thử màu cho từng thông số sao cho phù hợp với màu nền của bạn, rồi copy mã màu để paste vào đoạn mã trên.

35. Làm sao để chỉnh lại mục Friend Lists, Latest Comments và Recent Visitors ở sidebar khi không dùng skin mặc định của Opera?

Bạn hãy copy và paste đoạn mã sau vào user.css:

//* :: LATEST COMMENTS + RECENT VISITORS :: */

#side .userlist li {
list-style-position: outside;
list-style:none;
}

#newcomments .userpic {

margin:0 1px 0 5px;
float:right;
}

.userpic {
border:1px solid #fff;
}

#newcomments li {
border-bottom:1px dotted #aaa;
}

#newcomments li, #visitors li {
clear:both;
padding:6px 0;
}

#visitors li {
height:32px;
}

#newcomments a.usertext:link, #newcomments a.usertext:visited {
color:#333;
}

#side .userlist a {
text-decoration:none;
}

#side .userlist a:hover {
text-decoration:underline;

* :: FRIENDS IN SIDEBAR :: */

#friendz img {
display:block;
width:88px;
height:66px;
}

#friendz li {
float:right;
width:88px;
overflow:hidden;
margin:0;
}

#friendz li.first {
clear:both;
float:left;
}

36. Làm sao để tạo bộ đếm số người truy cập vào blog?

Muốn có bộ đếm thì bạn vào một trang nào đó offer free counter (key word đó, bạn google nhé), rồi đăng ký, họ sẽ cho bạn một đoạn mã HTML. Bạn dán vào bài sticky post đầu tiên là xong. Còn nếu bạn chỉ muốn xem có bao nhiêu người vào xem thì chỉ cần log in vào My Account và xem ở mục Statistics.

37. Tạo RSS Reader cho Blog Opera

38. Tạo thêm top menu cho Blog Opera

39. Tạo chat box trong Blog Opera

40. Kiểm tra số lượng khách đang đọc blog

41. Tại sao banner vừa có thể đặt vào top2 vừa có thể đặt vào wrap1; tương tự footer và wrap2?

Nói cho dễ hiểu, bạn hãy tưởng tượng cấu trúc của Blog Opera như một cái... bánh da lợn

Body background là lớp dưới cùng; kế đến là wrap1 và wrap2; tiếp theo là wrap3; banner, content và footer là lớp trên cùng. Như vậy, nếu bạn không cho hình ảnh vào wrap3, banner, content và footer (transparent) thì bạn sẽ thấy wrap1 và wrap 2

42. PADDING và MARGIN khác nhau chỗ nào?

Thay mặt sis Lu trả lời câu này vì sis trả lời gà quá (Phạm Lâm)

Thẻ Div bạn có thể coi nó như một hình chữ nhật, thuộc tính margin của thẻ div đó sẽ xác định khoảng cách từ đường viền hình chữ nhật đó với các phần tử khác ở phía ngoài. Còn padding sẽ xác định khoảng cách từ đường viền hình chữ nhật đó với các phần tử ở trong nó.

43. Làm sao xóa được dòng chữ OPERA POWERED?

Bạn thêm đoạn này vào user.css:

div#topbar1 a.hidemobile {
display:none
}

44. Làm sao để viết bài thành hai cột?

Nếu bạn muốn chèn một cái ảnh vào một bên, bạn chỉ cần định vị trí cho hình ảnh (trái hoặc phải) và viết bài, thì tự động ô viết bài sẽ chia làm hai cột. Lưu ý là bạn phải viết code cho cái ảnh trước khi viết bài. Cụ thể là:

[imgleft=abc.jpg] Nội dung bài viết
[imgright=abc.jpg]Nội dung bài viết

Nếu bạn muốn chèn những yếu tố khác, ví dụ media, bạn phải tạo bảng:

<table><tr>
<td> Nội dung cột thứ nhất</td>
<td>Nội dung cột thứ hai</td>
</tr></table>

45. Làm thế nào để comment của chủ blog có background khác với comments của khách?

Chắc bạn cũng biết, muốn thay đổi background của comments, bạn sẽ điều chỉnh đoạn mã sau (nếu không đổi thì mặc định sẽ là màu của content).

.comment1 {
BACKGROUND: #fdfbe2 url(abc.jpg);
}

.comment2 {
BACKGROUND: #fdfbe2 url(abc.jpg)
}

Số 1, 2 đi sau đại diện cho comment mang thứ tự chẵn và lẻ. Nếu bạn thích các comments lần lượt có background khác nhau thì bạn tìm hai hình nền và thay vào.

Để background của chủ blog khác với mọi người, bạn chỉnh hoặc thêm vào đoạn mã sau:

.ownercomment {
background: #fdfbe2 url(abc.jpg);
}

46. Làm sao để đổi màu và size chữ của Tags ở sidebar?

Size chữ mặc định của tag ở sidebar được quy định bởi số lượng bài viết trong từng tag, có nghĩa là nếu tag nào có bài viết nhiều thì size chữ sẽ to hơn những tag có ít bài viết. Bạn muốn resize cho cùng kích cỡ thì tìm đoạn mã sau và chỉnh lại kích thước cho font-size. Nếu bạn muốn đổi màu chữ cho phù hợp với background thì thay mã màu ở "color".

#tagcloud a:link, #tagcloud a:visited, #tagcloud a:active {
color:#fff;
}

#tagcloud .size1 {
font-size:11px;
font-weight:bold;
}

#tagcloud .size2 {
font-size:11px;
font-weight:bold;
}

#tagcloud .size3 {
font-size:11px;
font-weight:bold;
}

#tagcloud .size4 {
font-size:11px;
font-weight:bold;
}

#tagcloud .size5 {
font-size:11px;
font-weight:bold;
}

47. Làm sao để viết chữ nghệ thuật ở banner?

Opera không có nhiều font chữ có thể hiển thị tiếng Việt, cho nên tôi thường viết tiêu đề lên ảnh trong Photoshop. Bạn cần download một số font chữ thư pháp tại http://www.hunglandesign.com hoặc tại blog của Antoniblue. Tôi cũng có vài font chữ đẹp để share với các bạn tại post "Resources to share". Tuy nhiên không phải tất cả các fonts đều hiển thị tiếng Việt nhé.

48. Làm sao để đổi màu và bỏ gạch chân của link trên Blog Opera?

Mã CSS quy định màu và hình thức thể hiện của link trên toàn bộ blog là:

A:link {
COLOR: #222;
TEXT-DECORATION: underline
}

A:active { (liên kết đang được xem)
COLOR: #222;
TEXT-DECORATION: underline
}

A:visited {(liên kết đã được xem)
COLOR: #222;
TEXT-DECORATION: underline
}

A:hover {(liên kết có chuột trỏ vào)
TEXT-DECORATION: none
}

Bạn thay đổi màu trong mã color, và bỏ gạch chân bằng cách set "text-decoration:none". Tuy nhiên, bạn cũng cần tìm những đoạn mã khác bắt đầu bằng a:link, active, visited,... (ví dụ: post title, tag cloud, page nav,...) nếu bạn không muốn gạch chân bất kỳ link nào trong blog.

49. Làm sao để đổi màu số trang ở cuối trang blog?

Bạn tìm đoạn mã sau và chỉnh lại "color"

.pagenav a {
color:#fff;
}

50. Trang trí lại phần giới thiệu (About) của Blog Opera

51. Thêm ảnh gốc từ Photos vào entry của Blog Opera

52. Viết tiếng Việt trên top menu của Blog Opera (Rename the menu buttons of Opera Blog)

53. Sắp xếp thứ tự bài viết

54. Trang trí playlist theo sở thích cá nhân (7 steps to personalize your MP3 playlist)

55. Tạo photo guestbook tại Slide.com

56. Main.css

57. Thêm hình ảnh vào Blog Opera

58. Tạo slideshow với InAlbum 2.5

59. Thay đổi background của menu bar

60. Tạo skin cho Blog Opera từ một webset

(to be updated)