Tự làm giao diện cho trang Yahoo Mash

Cũng giống như Yahoo 360, bạn có thể trang điểm cho Mash bằng những phông nền riêng với khả năng tùy biến đa dạng hơn như đổi màu cho nick và các tiêu đề, chọn font chữ, cỡ chữ, kiểu gầy, béo khác nhau.

Công cụ cần chuẩn bị:

- Một tài khoản Yahoo Mash để đăng ký tại http://mash.yahoo.com. Tên tài khoản chính là nick YM, hòm thư Yahoo và Yahoo 360 sẵn có của bạn. Do còn trong giai đoạn thử nghiệm, Yahoo Mash chỉ chấp nhận những nick được mời từ một tài khoản Mash có sẵn.

Đăng ảnh nhanh chóng vào Flickr ngay trên desktop
- Một hình nền có kích cỡ lớn, như 1042 x 768 pixel đã được đăng lên website nào đó. Nếu bạn không có website chứa ảnh riêng, có thể dùng công cụ Flickr của Yahoo hay Photobucket để đưa ảnh này lên.

Thao tác thực hiện

Cách 1. Basic Mode

Trong phần Style this profile, bạn nhập vào ô Background image URL địa chỉ đường dẫn tới ảnh đã được tải lên trang web nào đó.

Ví dụ: khi mở một bức ảnh trên Flickr, nhấn chuột phải vào ảnh ở mục Large Size, chọn Properties, bạn sẽ thấy đường dẫn ảnh dưới dạng http://farm3.static.flickr.com... hoặc thấy luôn trong ô Grab the photo's URL. Hãy copy đường dẫn này vào ô Background image URL.

Nếu đánh dấu vào ô Fixed position, bức ảnh sẽ luôn ở một vị trí khi bạn trượt thanh cuộn. Ngoài ra còn có lựa chọn Tile ("lát nền", nghĩa là bức ảnh sẽ lặp lại ở các vị trí thiếu), Center (ảnh nằm giữa trang)...

Sau đó, nhấn Apply để lưu nền này.

Cách 2. Dùng mã CSS

Nhấn vào dòng Show Advanced CSS. Đây là công cụ dành cho những người hiểu biết về lập trình web để họ tùy biến theme đa dạng hơn. Tuy nhiên, những chỉ dẫn dưới đây sẽ giúp người "ngoại đạo" có thể hiểu dễ dàng.

Một theme sẽ bao gồm nhiều yếu tố như kích thước, màu sắc, phông chữ, được chỉ định bằng những câu lệnh nhập vào trong ô trắng trong mục Style this profile.

- Định màu nền bằng cách gõ

body { background: #99000;}

Giải thích: #99000 là mã màu "đỏ thẫm". Muốn biết các mã màu khác nhau, có thể tham khảo trong bảng sau.

Hoặc cho nền một ảnh riêng bằng cách gõ

body {
background: #333333 url(http://trangweb.com/anh.jpg) no-repeat;
background-position:top center;
}

Giải thích: http://trangweb.com/anh.jpg là đường dẫn tới ảnh đã đăng lên website, lấy tương tự như trong Cách 1.

no-repeat là ảnh không lặp lại (không "lát" trên bề mặt trang Mash). Muốn thay đổi, bạn gõ repeat-x (tham số cho chiều ngang) hoặc repeat-y (tham số cho chiều dọc) hoặc repeat-xy (lát cho cả 2 chiều).

#333333 là màu sẽ được hiển thị ngay sau bức ảnh nếu bạn không chọn chế độ lặp ảnh. Ví dụ, phần cuối trang bị trống vì ảnh không dài tới đó thì sẽ được chèn màu này vào. Nếu không cần, bạn có thể bỏ mã số này khỏi câu lệnh.

top center là vị trí ảnh nền được đặt, ở đây là đặt chính giữa, phía trên. Bạn có thể thay đổi bằng cách dùng các lệnh khác top right (phái trên bên phải), top left (phía trên bên trái), bottom right (phía dưới bên phải), bottom center (ở dưới chính giữa), bottom left (ở dưới bên trái), center (ở giữa), top (bên trên), right (bên phải).

- Định font chữ

body {
font-family: Arial, Georgia, Verdana;
font-size: 12px;
color:#FFFFFF;
font-strength: normal
}

Giải thích: Arial, Georgia, Verdana là font chữ bạn chọn để người khác xem. Do không phải tất cả các máy tính đều có cùng font nên bạn cần chọn hệ thống font được nhiều người dùng nhất.

12px là kích cỡ của font chữ, bạn có thể đổi con số tùy theo ý thích.

font-strength thường được đặt chế độ normal hoặc nếu không, bạn có thể gõ bold (để có chữ đậm) hoặc oblique (nghiêng).

- Định module chung
.mod {
background:#555555 url(http://trangweb.com/anh.jpg) repeat-x;
border: #33000 2px dashed;
}

- Định module-link

.mod a {color:#990000;}
.mod a:visited {color:#660000;}
.mod a:hover {color:#330000;}

Giải thích: a có nghĩa là link. Ở đây, bạn đặt màu khác nhau tùy thuộc vào trạng thái của link, như bình thường thì có màu #990000, khi được bấm vào thì có màu #660000, lúc rê chuột qua thì hiện màu #330000.

- Định module nền

#ypf-coreid .mod-content, #dragLeft .mod-content, #dragRight .mod-content {
background: url(http://trangweb.com/anh.png) repeat scroll bottom right;
}

Ở đây bạn có thể thay đổi đường dẫn tới ảnh và dùng mã màu cho nền background:#colorcode

- Định cách hiển thị tiêu đề

#dragLeft .hd, #dragRight .hd {
background: url(http://trangweb.com/anh.png) repeat-x scroll top left; color: beige;
}

Giải thích: Bạn có thể đổi hình ở chỗ này và dùng mã màu background:#colorcode;

color:beige là màu của tiêu đề module.

Ngoài ra, còn có một danh sách các mã CSS dành cho những module khác:

#ypf-coreid : ảnh hoặc lời trích dẫn của người dùng
#ypf-mystuff : My Mash Stuff
#dragLeft : cột lớn bên trái
#dragRight : cột lớn bên phải
#ypf-mosh-rss2-randomnumber : thay một số ngẫu nhiên bằng số... (module cho RSS)
#ypf-guestbook : dành cho Guestbook
#guestbook-entries : các entry cho Guestbook
#ypf-contacts : danh sách bạn bè
#ypf-tags: thẻ hồ sơ Your Mash
#ypf-blurt : module Blurt
#ypf-profile : module About Me
.mod-content : nội dung của module mà bạn xác định
.user-name : tên người sử dụng
.user-images : avatar của bạn

Bạn có thể đặt chế độ không cho người khác lấy cắp "tài sản" như theme, nhạc... bằng cách gõ:

.grab
{
display:none;
}

Khi xong việc, nhấn Apply.

Dưới đây là một đoạn mã ví dụ, bạn có thể dùng ngay hoặc thay đổi tùy thích:

body { background: url(http://farm3.static.flickr.com/2135/2028288316_8c7dded9f0_o.jpg) repeat fixed top center; color: #FFFFFF; }
body a, a:visited { color: #E5E5E5; }
a:link, #nickname { color: #FF3300; }
.ft a:link { color: #E5E5E5; }
.mod { border: none; }
#ypf-coreid, #dragLeft .mod, #dragRight .mod { background: url(http://farm3.static.flickr.com/2119/2028403034_239899173b_m.jpg) repeat scroll top left; border: 1px outset #a9a9a9; }
#ypf-coreid .mod-content, #dragLeft .mod-content, #dragRight .mod-content { background: url(http://farm3.static.flickr.com/2098/2027597441_3610794aa3_m.jpg) repeat scroll bottom right; }
#dragLeft .hd, #dragRight .hd { background: url(http://farm3.static.flickr.com/2115/2028403564_020cdde828_t.jpg) repeat-x scroll top left; color: beige; }
#tagline-edit .hover, div.hover, #ypf-blurt .hover .blurt-msg { background-color: #9acd32; }
#ypf-blurt .hover .timestamp { color: #FFFFFF; }

Yahoo! Mash có gì hay?
11:57' 31/10/2007 (GMT+7)
Giới bloggers đã chuyển sang dùng thử công cụ mới Yahoo! Mash - "ngôi nhà mới" của Yahoo! 360. Trang này hoàn toàn khác biệt so với những trang nổi đình nổi đám nhất hiện nay như Facebook, Myspace, Orkut...



Giao diện một trang nhật ký cá nhân Yahoo! Mash.

Một thời gian dài trước đó có tin đồn rằng Yahoo đang tiến hành làm việc với phần mạng xã hội (MXH) này nhưng không có nguồn tư liệu nào đủ hợp lý để chắc chắn rằng những thông tin này là có thật. Thế nhưng tin đồn này có thể là có thật vì thế mà Yahoo! Mash đã ra đời.
Cũng như những MXH khác, Yahoo! Mash cung cấp cho người sử dụng một profile của riêng họ và giao diện của nó cũng rất ấn tượng, do được lập trình 100% dựa vào kỹ thuật lập trình ajax nên người sử dụng không phải refresh trang web của mình mỗi khi có sự thay đổi một thứ gì đó trong profile của họ.

Yahoo! Mash profile và khái niệm về wiki

Yahoo! Mash vừa có một khái niệm mới trong việc biên tập profile được gọi là khái niệm "Wiki" cho phép người sử dụng biên tập profile của mình, thế nhưng nó không được an toàn và cũng không làm bạn hài lòng cho lắm. Bạn có thể dễ dàng loại bỏ chức năng này bằng cách vào Yahoo! Mash setting để thay đổi nó.

Chức năng CSS và styling

CSS (tạm dịch là bảng kiểu xếp chồng và Styling cách tạo dáng). Myspace đã đánh bại Facebook và Orkut nhờ một tính năng mạnh mẽ I.E cho phép bạn tạo dáng cho profile của bạn theo cách mà bạn muốn và một tin mừng là Yahoo! Mash cũng có chức năng này. Chức năng này được thể hiện ở 2 dạng, dạng cơ bản và dạng nâng cao nên mọi người đều có thể tạo dáng cho profile của mình từ sơ đẳng đến chuyên nghiệp .

Chức năng Modules và Widgets (tạm dịch là chuyên mục web bao gồm nhiều trang có chức năng giống nhau và chương trình trang trí trên màn hình desktop)

Ở FaceBook thì chức năng này được sử dụng phổ biến nhất và chức năng này cũng có trong Yahoo! Mash. Về cơ bản profile của người sử dụng là một bộ modules/Widgets được sắp xếp thẳng hàng để tạo cho profile cá nhân một hình dạng và kết cấu xác định. Bạn có thể sắp xếp và điều chỉnh như cách bạn sử dụng Ajax. Thậm chí bạn có thể vào Module Gallery để thêm vào những modules/Widgets khác nhau mà bạn muốn trình bày cho trang chủ của bạn.

Tính năng Blurt, my stuff, tags và Mash Pet

Blurt trong Yahoo! Mash module cho phép bạn điền thông báo vào profile của bạn giống như phần blast trong YM 360o.

The my stuff module cho phép bạn tác động qua lại với các bạn của mình. Bạn chỉ cần dán đoạn HTML (bao gồm cả đoạn Flash và Game , video từ youtube hoặc những thứ linh tinh khác). Tags module được sử dụng để đính profile của bạn với những từ khoá có liên quan và Mash pet là một cách để bạn biểu lộ tâm trạng của bạn với những ai ghé thăm profile của bạn.

Guessbook

Hay còn gọi là "Scrapbook" trong Orkut và "The Wall" trong FaceBook. Guessbook là một tính năng khá hay cho phép bạn nhắn 1 đoạn tin ngắn trong profile và cho phép chúng tương tác với bạn và ngược lại.

Yahoo! Mash Blog

Với tất cả những tính năng hấp dẫn nêu trên bạn có thể bắt đầu làm một trang Blog trên Yahoo! Mash của riêng bạn.

Thế nhưng để có thể làm thành viên và sở hữu một profile trong Yahoo! Mash bạn cần phải nhận được thư mời từ chính Yahoo! Mash hay những người đã và đang làm thành viên của Yahoo! Mash

Blogger Việt nói gì về Yahoo! Mash

Hay, vui và lạ mắt, nhưng phần chính ở đây là tính năng hỗ trợ viết blog thì Y!Mash lại không có. Y!Mash đòi hỏi kỹ năng và kiến thức căn bản về lập trình HTML mà các blogger đa phần hạn chế về điều này.

Một blogger khác lại nói dùng song song cũng hay, nhưng viết Entry thì viết ở 360o rồi để feed bên Mash cập nhật, lúc đó thì chính feed bên đó lại là blog của bạn. Như vậy là vẫn phải sử dụng đến 360o