Love Story

Hồ Nước Đẹp Quá ~> Người Còn Đẹp Hơn

Ở Nhà Chồng

Thay đổi tiêu đề và màu chữ của blog

2 đoạn code sau đây giúp bạn việt hoá được chữ của blog, nói nôm na là khi có đoạn code này thì bạn có thể đọc tiếng việt trong blog bằng bất cứ chiếc máy tính nào mà không hề gặp khó khăn.

Bạn hãy lần lượt copy từng đoạn code và dán vào bảng CSS của bạn một cách thật chính xác, không thiếu một dấu { hay dấu ; nhé.

1. Thay đổi tiêu đề chính (chữ to)
Bạn hãy dán đoạn code sau vào bảng CSS của bạn

#top h1 {
margin:0;
width:100%;
overflow:hidden;
font-size:25px;
font-family:Tahoma,Verdana, Arial'trebuchet ms',arial,helvetica,sans-serif;
line-height:normal;
padding-top:25px;
color:#ee0024;

2. Thay đổi tiêu đề phụ (chữ nhỏ dòng dưới)

#subtitle {
margin:0;
width:100%;
overflow:hidden;
font-size:12px;
font-family:'Verdana',arial,helvetica,sans-serif;
font-style:bold;
color:#ee0024;
}

@Lưu ý:
Dòng chữ tôi bôi đậm là mã màu của chữ tiêu đề. Màu sắc được quy định bởi những con số và dấu # Màu tôi đưa ra ở trên là màu đỏ. Xin chia xẻ với bạn bảng màu tôi vẫn dùng. Bạn có thể kiểm tra màu xanh rêu tôi nêu ở trên bằng cách copy #334000 dán vào ô trống trong bảng màu rồi chọn Presicely, màu tương ứng với code chữ sẽ hiện ra. Ngược lại, bạn có thể dùng bảng màu để chọn màu thích hợp rồi copy mã màu vừa chọn thay vào phần tôi bôi đen trong đoạn code trên để thay đổi màu sắc của dòng chữ tiêu đề của bạn.

Theo http://my.opera.com/thienquan/

1. Chọn ảnh thích hợp cho banner.
Như banner trong blog này là kích cỡ 872x210 pixels. Để có banner này, tôi đã xén đúng kích cỡ trên từ 1 background khác và xử lý bằng phần mền xử lý ảnh.


2. Upload ảnh lên hosting của blog.
Vậy hosting ở đâu? Nó chính là My files trong Preferences đó. Để upload bức hình làm banner lên blog, chọn Upload new file và chỉ đường link dẫn đến file ảnh, cuối cùng Save lại, hình của bạn sẽ được upload lên host
3. Tìm đường link của hình tới blog
Chọn Archive, trong mục Archive là toàn bộ các file của bạn. Bạn tìm đến file vừa upload lên kích phải chuột vào nó và chọn Properties, một cửa sổ pop up sẽ hiện ra và đường link Adress chính là đưòng link dẫn đến file hình làm banner của bạn. Nhớ copy nó để dùng cho đoạn code dưới đây nhé

4. Đoạn code:
Khi đã có hình và đường link của hình trên host, bạn sẽ cần đến đoạn code này:

#top2 {
height:210px;
padding-left:15px;
background:#000000 url(http://my.opera.com/thienquan/homes/files/abc.gif) top right;
}



@Lưu ý:
Bạn hãy thay link trong ngoặc đơn bằng link đến banner của bạn trong host (nếu không biết link ở chỗ nào thì vui lòng đọc lại mục 3 ở trên), nhớ là giữ nguyên dấu ( ) nhé, rồi chọn Save. Hãy refresh lại màn hình, banner của bạn đã được đổi rồi đó.

Theo http://my.opera.com/thienquan

Các bạn có thể thay đổi màu của SideBar bằng hình ảnh hoặc một màu nào đó cho phù hợp. Cách thức thay đổi như sau: Vào main. css tìm đoạn code


side H2 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
BACKGROUND: #356ca2;
PADDING-BOTTOM: 2px;
MARGIN: 0px 0px 1px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
TEXT-ALIGN: left
}

.sidebox {
BACKGROUND: #f5f5f5;
MARGIN-BOTTOM: 15px;
BORDER-BOTTOM: #dbdbd5 1px solid
}

.sidebox .pad {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px
}

- side H2 là phần hiển thị tiêu đề của từng box, e.g. About, Tags, Countdowns,...
- sidebox là khoảng cách giữa tiêu đề và nội dung của từng box (bạn thấy có 1 khe rất nhỏ như sợi chỉ ở giữa);
- sidebox.pad là phần hiển thị nội dung của từng box.

Bạn chỉ cần thay đường dẫn của background bằng ảnh nền hoặc màu nền. Nếu bạn muốn tạo khung cho box thì bạn thêm code border (xem lại phần thay đổi background).
Khi thay đổi background, có thể màu của text và hyperlink sẽ không phù hợp nữa.
Bạn có thể thay đổi màu text của tiêu đề ở đoạn code color được in nghiêng. Màu text của nội dung hiển thị trong box nằm trong đoạn code sidewrap. Nếu không được xác định (như ở trên) thì có nghĩa là theo code của cả trang Blog của bạn (nằm trong đoạn code body (xem lại phần thay đổi background). Nếu bạn muốn màu text khác, thì bạn thêm code color: #000000 (thay bằng màu mà bạn muốn) vào đoạn code sidewrap hoặc sidebox.
Màu của hyperlink được xác định trong đoạn code sau
#side A:link { (liên kết)
COLOR: #000
}

#side A:visited { (liên kết đã được xem)
COLOR: #000
}

#side A:active { (liên kết đang hoạt động)
COLOR: #000
}
Lưu ý, những đoạn code này sẽ không áp dụng cho lịch và box download trình duyệt Opera. Muốn thay đổi cách trang trí của hai box này, bạn cần tìm đoạn code sau:

#side CAPTION { (phần hiển thị tiêu đề của lịch, i.e. chữ Calendar)
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
BACKGROUND: #356ca2;
PADDING-BOTTOM: 2px;
MARGIN: 0px 0px 1px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
TEXT-ALIGN: left
}

#calendar { (phần hiển thị lịch)
CLEAR: both;
FONT-SIZE: 10px;
BACKGROUND: url(/community/graphics/users/2/calendar.gif) #efefed;
MARGIN-BOTTOM: 15px;
WIDTH: 190px;
BORDER-BOTTOM: #dbdbd5 1px solid;
border-spacing: 1px
}

#side #getopera H2 { (phần hiển thị tiêu đề box download trình duyệt Opera)
BACKGROUND: #356ca2;
COLOR: #fff
}

#getopera .pad { (phần hiển thị nội dung quảng cáo)
BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top;
COLOR: #fff
}
(Mẹo nhỏ)
Nếu bạn không muốn hiển thị box download trình duyệt Opera, thì bạn chỉ cần viết đoạn code sau vào phần enter CSS:

#side #getopera {
display: none
}


Theo: XuanCuongyb

Khi bạn vào 1 blog Opera nào đó thấy giao diện khá hay và bắt mắt và bạn cũng muốn nó là của mình nhưng không thể nào liên hệ với tác giả của giao diện đó hoặc tác giả của theme đó không muốn chia sẻ cùng bạn. Mẹo nhỏ sau đây sẽ giúp bạn lấy được mã giao diện đó chỉ bằng vài thao tác đoan giản


Qua tìm hiểu mình nhận thấy rằng đoãn mã CSS được đặt ở link:

http://files.myopera.com/username/user.css

bạn chỉ cần copy và paste link trên vào khung Address của trình duyệt và nhớ thay chữ username bằng tên truy cập của blog đó. Enter, kết quả sẽ hiện ra trước mắt bạn.


nguồn: nguyenhung'blog