LOVE 360°

Nơi chia sẻ tâm tình của những người đã yêu, đang yêu và sẽ yêu....
 
Trang ChínhTrang Chính  CalendarCalendar  Trợ giúpTrợ giúp  Tìm kiếmTìm kiếm  Thành viênThành viên  NhómNhóm  Đăng kýĐăng ký  Đăng Nhập  

Share | 
 

 Kinh nghiệm thiết kế Blog My Opera

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
mylove



Tổng số bài gửi : 5
Join date : 27/12/2008

Bài gửiTiêu đề: Kinh nghiệm thiết kế Blog My Opera   Sat Dec 27, 2008 5:23 pm

You nào có kinh nghiệm thiết kế Blog My Opera chia sẻ với bà con với nhá @001
Thay đổi giao diện Blog Opera trong 10 phút

Có một trick dành cho những người không thích tốn công. Bạn chỉ cần dùng menu "Save As" của Internet Explorer để lưu toàn bộ Blog mà bạn thích. Sau đó bạn mở file user.css, copy toàn bộ và paste vào phần Enter CSS của menu My Account/ Design/ Change design/ Custom Style Sheet, rồi save với option "Use my custom style sheet together with the current theme". Tuy nhiên, bạn cần phải biết theme gốc của Blog đó (bằng cách xem trong file main.css).

1. Bạn vào phần My Account



2. Nhấn tiếp vào Change Design



3. Chọn tiếp custom style sheet.


4. Tại ô Enter CSS các bạn có thể gõ code hoặc copy paste code CSS vào sau đó đánh dấu chọn vào ô Use my custom style sheet together with the current theme và nhấn Save để kết thúc.



Nhưng chắc bạn không thích copy y chang source code của user khác như vậy phải không? Muốn tạo sự độc đáo cho Blog của mình, trước tiên, bạn cần chuẩn bị một số file hình ảnh và upload vào Opera host, dùng menu My Account/ Files. Bạn cũng cần xác định đường dẫn của những files này để thay vào những files hình ảnh của theme gốc trên Opera.

Sau đó, bạn cần chọn một theme trong số những themes dựng sẵn của Opera. Bạn trở lại trang Blog, và dùng menu "Save As" của Internet Explorer để lưu vào ổ cứng của bạn. Lúc này, trong ổ cứng của bạn sẽ có một file.html và một folder lưu một số hình ảnh và các file.css. Bạn tìm file main.css và mở bằng notepad, wordpad, hoặc Microsoft FrontPage. Bạn cũng cần mở sẵn một trang trắng (untitled của notepad/ wordpad hoặc new page của MS FP). Tất cả những thay đổi của bạn sẽ được lưu trong trang trắng này để sau đó paste vào ô Enter CSS (như đã hướng dẫn ở trên).
Về Đầu Trang Go down
Xem lý lịch thành viên
mylove



Tổng số bài gửi : 5
Join date : 27/12/2008

Bài gửiTiêu đề: Thay đổi background Blog Opera   Sat Dec 27, 2008 5:39 pm

Thay đổi giao diện Blog Opera
Background của trang Opera của bạn thể hiện ở đoạn mã sau trong file main.css (lưu ý, đối với các theme khác nhau, phần mã này cũng có thể khác nhau):

BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
BACKGROUND: #b6b8b1;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #111;
LINE-HEIGHT: 145%;
PADDING-TOP: 0px;
FONT-FAMILY: arial,'trebuchet ms',helvetica,sans-serif;
TEXT-ALIGN: center
}


#wrap1 {
BACKGROUND: url(/community/graphics/users/2/wrap1.gif) #acaea7 repeat-y left top;
MARGIN: 0px auto;
max-width: 882px
}

#wrap2 {
BACKGROUND: url(/community/graphics/users/2/wrap2.gif) repeat-y right top
}

#topbar {
BACKGROUND: #fff;
MARGIN: 0px -10px;
OVERFLOW: hidden;
LINE-HEIGHT: 23px;
HEIGHT: 28px;
max-width: 852px
}

#content {
CLEAR: both;
BACKGROUND: #fff;
MARGIN: 0px auto;
POSITION: relative;
TEXT-ALIGN: left;
max-width: 812px;
min-width: 739px
}

#footer {
CLEAR: both;
BACKGROUND: #fff;
MARGIN: 0px auto;
POSITION: relative;
TEXT-ALIGN: left;
max-width: 812px;
min-width: 739px
}



Để cho dễ hiểu, bạn hãy nhìn vào ảnh minh họa sau:



- Body là phần hiển thị những chiếc lá maples đủ màu;
- Wrap1 là phần border bên trái (repeat-y left: hình nền lập lại theo trục Y, bên trái; Nếu bạn muốn thay đổi border ở trên, thay vì bên trái, bạn có thể sửa đoạn này thành repeat-x top);
- Wrap2 là phần border bên phải (repeat-y right; tương tự, muốn đổi thành border ở dưới cùng, bạn sửa thành repeat-x bottom);
- Topbar là thanh trên cùng của Blog;
- Content là phần hiển thị toàn bộ nội dung của Blog;
- Footer là phần hiển thị hình chiếc lá maple và 3 hạt dẻ.


Bạn muốn thay đổi ảnh nền, hoặc màu nền thì chỉ cần thay đường dẫn ở phần tôi đã in đậm phía trên.

- Màu nền: bạn cần xác định tên màu bằng tiếng Anh hoặc mã màu (cách đơn giản nhất để xác định mã màu là dùng Photoshop để so cho phù hợp với hình ảnh nền mà bạn muốn sử dụng).

- Ảnh nền: bạn phải chỉ đường dẫn đến file ảnh mà bạn đã upload vào My Files. Đường dẫn có thể tuyệt đối, i.e. url(http://my.opera.com/tên-user/tên-directory/tên-file), hoặc tương đối, i.e. url(/tên-user/tên-directory/tên-file). Tuy nhiên, tôi được biết nếu bạn chỉ đường dẫn tương đối thì ảnh có thể không hiển thị trên trình duyệt Fire Fox. Còn lý do tại sao thì tôi không biết

Trong trường hợp bạn đổi vị trí của wrap1 và wrap2 thành top và bottom, và sử dụng ảnh nền cho 2 vị trí này, bạn cần xác định thêm thông số height (chiều cao), để ảnh có thể hiển thị đầy đủ. Bạn cũng phải làm tương tự với footer, nếu bạn muốn thêm ảnh vào, thay vì màu nền mặc định.

Nếu bạn muốn thay đổi background cho từng bài viết của bạn, bạn cần tìm đoạn mã sau đây:

.post {
PADDING-RIGHT: 0px;
BORDER-TOP: #ddd 1px solid;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 10px;
OVERFLOW: hidden;
WIDTH: 100%;
PADDING-TOP: 16px
}

#firstpost {
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
BORDER-LEFT: medium none;
PADDING-TOP: 0px;
BORDER-BOTTOM: medium none
}

#lastpost {
BORDER-BOTTOM: #ddd 1px solid
}

.post .title {
FONT-SIZE: 20px;
MARGIN: 0px 0px 10px;
LINE-HEIGHT: normal
}



Bạn thấy rằng background mặc định của bài viết sẽ theo background của content. Nếu bạn muốn thay đổi, bạn cần thêm đoạn mã về background vào phần post (nội dung bài viết) và post.title (tiêu đề của bài viết), ví dụ:

.post {
background: url(đường dẫn tới file ảnh) no-repeat right bottom;
}



Thuộc tính đi sau đường dẫn để xác định ảnh nền chỉ hiển thị một lần (no-repeat) và nằm ở phía dưới cùng (bottom), bên phải (right). Nếu bạn muốn ảnh nền tự động lập lại thì không thêm thuộc tính no-repeat, hoặc đặt ở các vị trí khác thì thay đổi tương ứng (left, center, top,...).

Nếu bạn muốn tạo border cho từng post, bạn chú ý phần in đậm trong mã post. File main.css của theme dựng sẵn chỉ tạo border cho góc trên của post, không có border cho post đầu tiên (first post), và chỉ có border góc dưới của post cuối cùng (last post). Nếu bạn muốn tạo cả 4 góc, bạn cần thêm vào border-left (trái), border-right (phải), border-bottom (đáy). Thông số đi theo bao gồm màu (color), xác định bằng mã màu; độ lớn (width), tính bằng đơn vị pixel; và kiểu (style) của border. Bạn có thể tham khảo các kiểu border tại W3Schools.

Khi đã tạo border, với mã code mặc định, bạn sẽ thấy nội dung sẽ nằm sát border. Muốn canh lề cho đẹp, bạn chú ý phần in đậm và nghiêng. Theme mặc định không chừa lề cho cả lề trái lẫn lề phải, bạn chỉ cần thay đổi giá trị, tính bằng đơn vị pixel cho phù hợp với sở thích của bạn. Nếu muốn canh lề phải, bạn thêm mã padding-right vào đoạn code nhé.


Nguồn: DangQuynh's Blog
Về Đầu Trang Go down
Xem lý lịch thành viên
 
Kinh nghiệm thiết kế Blog My Opera
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang
 Similar topics
-
» nên mua loại kim đan và len nào?
» có chị nào có kinh nghiệm móc mũ khổ lớn
» Hỏi về cách đan một cái khăn đơn giản
» Kinh nghiệm Hàn Quốc
» Kinh nghiệm đi du lịch Sapa

Permissions in this forum:Bạn không có quyền trả lời bài viết
LOVE 360° :: XA LỘ INTERNET :: BLOG & CHAT-
Chuyển đến