†_[Blog]Hướng dẫn làm YH!Mash_†

Dường như việc không có mặt trong top 10 websites xã hội hàng đầu tại Mỹ là 1 thất bại lớn của Yahoo!360 (trong khi 2 đối thủ là Myspace và Facebook chiếm 2 vị trí đầu). Ngày 14/09, người em của Y!360 blog đã được ra mắt và đi vào hoạt động thử nghiệm: Y!Mash beta. Y!Mash không phải là bản nâng cấp của Y!360 mà là một "sự đổi mới toàn diện".

1 số so sánh ban đầu giữa Y!Mash và Y!360:

Vì Y!Mash chỉ mới đi vào hoạt động thử nghiệm nên chỉ có thể đăng ký vào Y!Mash bằng invitation của 1 "masher" (người đã tham gia vào Y!Mash).

Giao diện của Y!Mash đẹp mắt và sinh động hơn Y!360 rất nhiều (đương nhiên nếu bạn có 1 chút đầu tư. Có thể dùng hình động để làm theme).

Y!Mash có thể thay đổi vị trí các modules theo ý của bạn, chứ không nằm "thụ động" như modules của Y!360.

Y!Mash có nhiều modules (tính năng) hơn Y!360. Với "mặt tiền" của Y!360 sẽ có các modules chính Top page/ Blog/ Feed/ List/ Friends/ Review/ Groups thì với Y!Mash, ngoài phần profile chính, bạn sẽ có thêm hơn 30 modules khác nhau để lựa chọn và đưa vào trang Y!Mash của mình. Đương nhiên với nhiều tính năng như thế sẽ đòi hỏi người dùng có những kiến thức căn bản về code HTML và là khó khăn lớn đối với những người không có nhiều thời gian, không có say mê và thiếu kiên nhẫn.

Có thể đặt chế độ cho 1 hay nhiều friends có quyền edit trang mash của bạn.

Nhược điểm lớn của Y!Mash là phần viết entry. Hiện tại vẫn không có phần riêng để viết entry. Tuy nhiên bạn có thể đặt feed của blog Y!360Y!360 vào Y!Mash. Entry mới của bạn trong Y!360 cũng sẽ xuất hiện trong Mash.

Không creat new categories friends như Y!360 (Y!Mash chỉ xếp friends theo just friends/ best friends/ family).

Không có groups như Y!360

Khi bạn post comments ở Mash bất kỳ, comments đấy sẽ hiện lại trong Mash của bạn.

Dù sao thì Y!Mash chỉ mới được đưa vào sử dụng thử nghiệm và còn nhiều chức năng khác chưa được tiết lộ. Và hiển nhiên đây chỉ là những nhận xét sơ khai, Kit cũng ko da'm mạo muội xét rằng Y!Mash có đủ khả năng soái ngôi của Y!360 trong cộng động bloggers Việt hay không.

Sơ lược về Y!Mash

Để trở thành 1 masher, đầu tiên bạn phải nhận được invitation qua email. Sau khi click link của Y!Mash trong email

Bạn có thể chọn Keep it hay Creat new tùy thích.

1. Your profile: có thể tạm xem như "my page" của Y!360, tuy nhiên vượt trội hơn rất nhiều.

- Profile module: click vào hình để change avatar (có thể upload trực tiếp hình từ máy tính). Những chỗ text khi bạn chỉ chuột vào hiện lên màu vàng là những chỗ có thể edit.

About me: hơn "about me" của Y!360 rất nhiều. Gồm 16 câu tự bạch về bản thân. Click vào mỗi câu sẽ hiện ra box trả lời (được dùng code HTML (font/size chữ, hình, nhạc, clip, flash...) như bạn vẫn thường dùng khi viết entry của Y!360). Có thể add thêm các câu tự bạch khác.

- Friends: phần [+] add a friend dùng để invite bằng email hoặc add nicks trong address book của Y!M đã tham gia vào Mash.

Khi vào Mash của 1 người bất kỳ, để invite người đấy làm friend, bạn click vào "Add ... as a friend" trên phần profile module

- Tag: có thể thêm 1 tag rồi click add hoặc nhiều tag (ngăn cách các tag bằng dấu , ). Click dấu - để xóa tag.

My stuff: click edit, sau đấy có thể thêm text, code HTML (tương tự như viết entry của Y!360)

Blurt: có thể xem như blast của Y!360. Chỉ dùng text bình thường (ko sử dụng HTML)

- Guestbook (phần này của Y!Mash được mọi người thích thú nhất) giống như quick comment box của Y!360, tuy nhiên Guestbook vượt trội hơn là có thể sử dụng code HTML giống như viết entry trong Y!360.


- Style this profile: có thể xem giống phần edit customer theme của Y!360. Paste link hình (jpg, gif...) vào khung đầu tiên, không hạn chế dung lượng cũng như kích thước hình. Chọn chế độ hình tile, center, top, bottom tùy ý.


Module color: màu nền của các modules
Border color: màu đường viền của các modules
Font color: màu chữ
Link color: màu chữ có kèm link
Thank cho em vài phát động viên nhá

* Để chuyển về dạng transparent như ban đầu, chỉ cần xóa code màu.

* Không có dạng up hình top/ botttom như Y!360.

* Có thể "mượn tạm" theme của người khác bằng cách click "Steal!"





* Theme của Y!Mash (chính xác hơn có lẽ gọi là layout) có thể dùng CSS - Cascading Style Sheet để edit. Tuy nhiên Kit chưa biết jì về CSS nên ko thể nói jì thêm (học thêm cái này, điều chế trang Y!mash cho pro nhờ)

The Mash pet: nuôi thú ảo trên Y!Mash. Khi edit sẽ hiện ra dòng để paste link hình con thú, chiều ngang, và chều rộng của hình.



- Customize this page by adding cool stuff: thêm vào các modules khác cho trang Y!Mash của bạn. Theo Kit nên thêm Flickr RSS (để add link feed của flickr), Blog module RSS (để add link feed của Y!360 blog)... Chọn Main column (module sẽ nằm bên trái, giao diện rộng), Right column (module nằm bên phải).




* Có thể "mượn tạm" modules của 1 masher bất kỳ bằng cách click Grab it




* Có thể sắp xếp các modules theo ý bằng cách click chuột vào tên module, và di chuyển đến vị trí bạn muốn.




* Entry sau sẽ nói rõ hơn về công dụng và sử dụng các modules (Y!Mash ngoài các modules chính, còn có hơn 30 modules khác nhau)


2. Pulse (gần giống như Trang chủ Y!360 - see all updates) tuy nhiên super soi hơn là có thể xem tất cả các hoạt động trong Y!Mash của mình và của friends (kể cả có ai post trong guestbook của friends, hoặc friends gởi invite cho ai)




3. Friends: gồm có All friends/ Best friends/ Family/ Just friends và invite a friend.
Click vào http://mash.yahoo.com/explore.php#requests để xem các invitation pending


4. Settings: có 5 phần




- Permission: Cho phép ai có thể xem profile/ edit profile/ post trong guesbook của bạn.

- Notifications: Gần giống "alert" bên Y!360

- Email management: Chọn email để nhận notifications

- Simple URL: chọn link đơn giản cho Y!Mash của bạn http://mash.yahoo.com/ID_Yahoo

- People I've blocked: Giống ignore bên Y!360

Tạo theme cho YH!Mash

Yahoo!Mash ra đời với nhiều sự đổi mới so với Yahoo 360. Khả năng tùy chỉnh giao diện theo ý của riêng mình là một trong những tính năng được nhiều người sử dụng mong đợi nhất. Trong thủ thuật lần này, HelloICT hướng dẫn các bạn hiểu và tạo một theme Yahoo!Mash như thế nào. Với Yahoo 360, bạn có thể tạo cho mình một theme đơn giản bằng các thêm ảnh top, bottom, middle,.. theo một trình học thuật cố định của Yahoo. Với Mash, bạn cũng có thể làm như thế. Tuy nhiên, Mash còn cho phép bạn làm nhiều thứ hơn như thể quyết định layout, màu sắc, kích cỡ, hình ảnh trên toàn trang Mash của mình bằng cách nhâm nhập vào CSS (CSS là ngôn ngữ dùng để trang trí trong thiết kế Web).
Để sử dụng CSS của riêng mình trang trí cho trang Mash bạn phải chuyển sang chế độ Advanced CSS


Để tạo được một giao điện đẹp cho Mash, không cách nào bằng hiểu được cấu trúc CSS của Mash để tùy biến CSS này theo phong cách riêng của mình. Mình sẽ hướng dẫn các bạn hiểu một cách đơn giản nhất.

Note: Phần text phía sau dấu // là chú thích. Khi copy vào Mash, bạn nên remove hết các chú thích này.

Cấu trúc CSS của Mash:

1. Thay đổi nền và font của toàn trang:

Code:

body {
font-family:verdana,sans-serif; //Đây là phần font mặc định của trang. Bạn có thể thay thế bằng Arial hay Times news roman hay font Unicode nào khác
background-image:url('http://www.helloict.com/images/ ..../color_brown _39.jpg' ); //url dẫn đến ảnh nền của mash.
background-repeat:repeat; //nếu bạn chọn ảnh nền là 1 ảnh nhỏ, bạn có thể cho ảnh lặp lại để phủ đầy trang hay chỉ hiện 1 lần bằng cách đổi thành background-repeat: no;
background-color:none; //màu nền. bạn có thể thay "none" bằng bất cứ màu nào. Ví dụ: màu đen: #000000
background-position:top left; //chỉ định chỗ đặt ảnh nền này ở đâu. Bạn có các vị trí:
color:#cccccc; //Màu của chữ-phần nội dung. Bạn có thể chọn màu khác như: đen: #000000, trắng: #ffffff
}

2. Thay đổi các thuộc tính của Modules

Module có thuộc tính chính là "mod" và các thuộc tính phụ là: "x1", "x1a", "x2" và "x2a".

2.1 Thuộc tính chính (.mod):

Code:

.mod {
background-color:none; //thay "none" bằng 1 giá trị màu HEX để tạo màu nền cho Module nếu bạn không dùng ảnh làm nền.
background-image:url('http://www.helloict.com/images/../color_brown _39.jpg'); //Dùng ảnh làm nền cho module, nếu bạn có thể bỏ dòng này hoặc thay đổi url tới ảnh của bạn.
border-style:solid; //là đường viền cho module. Có các loại viền sau: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width:2px; //là chiều rộng của đường viền. Bạn có thê tăng hay giảm giá trị 2px này.
border-color:#3C6A90; //Đây là màu viền với giá trị màu HEX.
}

2.2 Thuôc tính con x1:

Code:

.mod .x1 {
background-color: #fafdff;
opacity: 0.6; //Tạo đồ trong suốt cho modules
filter:alpha(opacity=60); //giống như trên nhưng dùng cho IE
display: block; //là chế độ hiển thị cho Module
}

2.3 Thay đổi màu của chữ trong Modules:

Code:

.mod-content {
color:#5c879c; //thay đổi giá trị màu theo ý của bạn
}

2.4 Thay đổi tiêu đề của Modules:

Code:

.hd { color:#004f83; //Màu của text
font-family:arial,sans-serif; //Font chữ
font-size:20px; //cỡ chữ.
}

2.5 Thay đổi thuộc tính của Nickname:

Code:

#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
color:#004f83; //Màu cho tên (nick) của bạn.
}

2.6 Thay đổi khung hình Avarta

Code:

#ypf-coreid .user-card .user-images {
background-image:url('http://www.helloict.com/images/.. yahoomash/polaroid.png') // đường dẫn đến khung hình.
}

2.7 Thay đổi font cho tên, nơi ở....

Code:

#ypf-coreid .user-card .user-info span.age, span.gender, span.locality {
color:#ffffff; //Thay đổi giá trị màu này theo màu của bạn
}

Kết hợp tất cả các thuộc tính này vào một phần duy nhất. Các bạn sẽ có 1 CSS theme cho Mash.

Code:

body {
font-family:verdana,sans-serif;
background-image:url('http://www.helloict.com/images/stories/gallery/yahoomash/color_brown_39.jpg');
background-repeat:repeat;
background-color:none;
background-position:top left;
color:#cccccc;
}

.mod {
background-color:none;
background-image:url('http://www.helloict.com/images/stories/gallery/yahoomash/color_brown_39.jpg');
border-style:solid;
border-width:2px;
border-color:#3C6A90;
}

.mod .x1 {
background-color: #fafdff;
opacity: 0.6;
filter:alpha(opacity=60);
display: block;
}

.mod-content {
color:#5c879c;
}

.hd { color:#004f83;
font-family:arial,sans-serif;
font-size:20px;
}

#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
color:#004f83;
}

#ypf-coreid .user-card .user-images {
background-image:url('http://www.helloict.com/images/stories/gallery/yahoomash/polaroid.png')
}

#ypf-coreid .user-card .user-info span.age, span.gender, span.locality { //The classes used for age, gender, location
color:#ffffff;
}

Copy tất cả vào mục Advanced CSS >> nút Preview để xem trước. Nếu đã hày lòng với theme của mình, bạn nhấp nút Apply để save lại.


Ai muốn học có thể vào đây để tìm hiểu về CSS: http://www.w3schools.com/css/default.asp

Bên dưới là mã màu HEX tham khảo:




Bonus:
1. background-color:none; <~ Thuộc tính background-color không có giá trị none, khi bạn muốn màu background là trong suốt thì bạn phải dùng transparent
Ta sẽ có: background-color:transparent;
Đây là lỗi trả về (dành cho bạn nào muốn tìm hiểu thêm):


Bonus:
2. Dư code: Bạn đã định background images, còn định thêm background color.
3. Sử dụng kĩ thuật short-hand: dùng cho background và border, thu gọn code lại rất nhiều

Code:

body {
font-family:verdana,sans-serif;
background:url('http://www.helloict.com/images/stories/gallery/yahoomash/color_brown_39.jpg') top left;
color:#cccccc;
}

.mod {
background:url('http://www.helloict.com/images/stories/gallery/yahoomash/color_brown_39.jpg');
border:solid 2px #3C6A90;
}

Về color các bạn có thể vào : www.colr.org, trang này khá thú vị, nó cho bạn lấy màu từ 1 tấm hình
Về thuộc tính repeat của background, các bạn có thể dùng: repeat-x, repeat-y, no-repeat, các bạn có thể sử dụng chung với fix để làm background stay at same position khi bạn kéo thanh cuộn.
Ví dụ: background:url(images/as1.jpg) left top repeat-x;
background:url(images/as1.jpg) left top repeat-y;
background:url(images/as1.jpg) center 50% fixed; (Ngay giữa màn hình lun nhá, dành cho ai chưa biết)