Bài viết dành cho nhưng ai bắt đầu bước vào thiết kế Themes cho Blog Yahoo 360 Plus (đặc biệt dành cho đối tượng từ bên 360 chuyển qua). Ai biết rồi thì không phải đọc bài này đâu!

Hướng dẫn cách thiết kế theme Blog Yahoo 360 Plus cơ bản và nâng cao

Mọi chi tiết hình ảnh trong bài viết chỉ có tính minh họa và được chụp bằng nút "Prt Scr" nên hình ảnh không sắc nét, vì thế có xấu thì cũng phải cố mà đọc , ai mà vào hỏi trong box Yahoo 360 Plus những cái đã được giới thiệu trong này thì đứng có trách đấy (câu này dành cho mem 2T)

I. Giới thiệu qua về Yahoo 360 Plus

Yahoo 360 Plus được coi là Blog chính thức của Yahoo Việt Nam, có thể vào Yahoo 360 Plus bằng một số con đường sau:

Cách 1:

• Vào trang chủ của Yahoo Việt Nam: http://vn.Yahoo.com , sau đó click vào phần khoanh đỏ phía dưới

Cách 2:

• Vào trực tiếp link của trang chủ Yahoo 360 Plus: http://vn.Blog.Yahoo.com
• Sau đó vào Blog bằng cách click vào một trong 2 vùng khoanh đỏ ở dưới

Cách 3:

Vào qua bảng chat Yahoo Việt Nam (giống như cách vào 360 bằng Yahoo8.) (Sry không xài YM9 VN nên không chụp hình được tự mà ngâm cứu nhé)

Với thiết kế cho Yahoo 360 Plus, Kata lưu ý các designer đặt mục tiêu dung lượng lên hàng đầu, vì số lượng cần design sẽ rất nhiều, nếu dung lượng lớn thì load sẽ rất lâu (thế thì đẹp cũng chẳng ai nhìn thấy). Tốt nhất là nặng nhất cũng tầm < 100kb/hình, tiếp theo là vấn đề phối màu nền và màu chữ sao cho dễ nhìn, tránh rối mắt, sau đó mới đến bố cục toàn trang!

II. Các thông số của Theme trong Yahoo 360 Plus

Lan man nhiều quá cũng không hay, vào chủ đề chính, muốn design thì phải có thông số, sau đây là một vài thông số quan trọng

1. Về Background

Về nền Background, có thể tạm hiểu là nền toàn trang (như 2 cái viền màu xanh bên rìa của trường tồn này nè)
Cái đó thì đương nhiên không có thông số mặc định, tùy độ phân giải màn hình của mỗi người =_= thế thì phải làm thế nào đây?

Cách tốt nhất là sử dụng hình nền dạng lặp, dung lượng chỉ tầm <50kb mà lại lặp lại trên toàn màn hình, có thể xem dưới mọi độ phân giải màn hình (nền của Blog Kata là một ví dụ)

Ngoài ra, cũng có thể sử dụng hình nền như bình thường, nhưng thông số sẽ như sau: chiều ngang tối thiểu là 1280, tốt nhất là để 1400, chiều dài thì tối thiểu là 800, tối đa không giới hạn. Vì sao ư? hãy thử nhìn hình minh họa. Hình nền của Kata sử dụng kích thước 1280x1500

Với những ai sử dụng độ phân giải 1280x800 hoặc 1280x1024

Với những ai sử dụng độ phân giải 1024x600 hoặc 1024x768 (vì cắt ảnh không khéo nên nhìn hơi xấu)

Nó vẫn bao trùm toàn màn hình, nhưng nếu ngược lại bạn sử dụng size ảnh chiều ngang 1024 thì 2 bên sẽ thừa ra một khoảng trống, có thể khắc phục giống trường hợp của Kem

Đó là bên cạnh code cho thêm thông số màu, khi đó những phần Themes không với tới sẽ có màu theo thông số bạn chỉ định

2. Về Themes cho Blog

Hơi lạ phải không, vì trong 360 Themes cho Blog cũng chính là bg, còn Themes cho Blog có thể hiểu là ví dụ như cái khoảng trắng của trường tồn ở giữa 2 rìa màu xanh. Themes cho Blog tùy thuộc vào kiểu dàn trang bạn chọn nếu bạn chọn dàn kiểu 3 cột

Themes cho Blog sẽ đi từ đây đến đây, và chiều rộng là 920px (híc, ngày trước không có ai viết cái này nên tất cả đều phải tự chụp rồi đo bằng Photoshop =_=)

Còn nếu kiểu 2 cột, thông số chiều rộng sẽ là 760px. Themes cho Blog sẽ đi từ đây đến đây như hình

Trích dẫn xen ngang, không nhất thiết bạn phải cần làm cả số 1(Background) lẫn số 2 (ThemesBlog), có thể lược bỏ số 2 đi nếu thấy không cần thiết, và đa số mọi người ngay từ Background đã vẽ luôn nền cho Blog rồi. Một vài ví dụ điển hình:

Themes chỉ xài số 1

Themes chỉ xài số 1 (nhưng trong Background vẽ luôn nền cho Blog, tạo cảm giác phân chia giữa Background và nền Blog)

Themes xài cả số 1 và số 2

3. Module: Chia thành 2 mảng

Mảng 1:

a. Border (có thể hiểu là viền Module) (cái này rất ít người làm), trích dẫn từ bài viết của dephia
Border chia thành 2 loại Border ngắn và dài

Border dài:

• 2 đường viền ngang: 1024 x 5
• 2 đường kẻ dọc: 5 x 10
• 2 nút bên trái góc trên và dưới khung: 5 x 5

Border ngắn:

Một ảnh kích thước 5x5. Ví dụ

b. Nền Module: nó sẽ sử dụng repeat nên kích thước tùy ý, có thể để nó có thể nhìn xuyên bằng cách giảm opacity trong blending option

Ví dụ về Blog sử dụng mảng 1

Mảng 2:

Hầu hết mọi người xài mảng này, vì không bị gò bó bởi viền và nền. Module được chia thành 4 phần

• Phần đỉnh
• Phần tiêu đề
• Phần thân
• Và Phần cuối (Thô bỉ học mà nói thì gọi là phần đít)

Tuy nhiên khi design chỉ sử dụng một trong 2 trường hợp sau:

• TH1: Phần đỉnh + phần thân + phần cuối
• TH2: phần tiêu đề + phần thân và phần cuối

Về cơ bản, kết quả thu được của 2 trường hợp là gần tương tự nhau, sử dụng trường hợp một thì khoảng cách giữa phần đầu và nội dung sẽ xa hơn một chút

Hồi trước Kata không biết về 2 mảng này, cứ nghĩ chắc là có code đưa một số hình lên trên đầu Module =_= kiếm hoài không ra, sau một hồi mò mẫm mới ngẩn người ra là cứ thế mà design mà thay vào thôi

Về các hướng dẫn design thì cái này có thể gọi là không giới hạn, tùy theo ý tưởng của designer. Hình minh họa một số Module đẹp nè:

4. Về footer

Cái này thì chia sẻ kinh nghiệm của bản thân qua bao lần dại dột mà thôi. Thế "Footer" là gì? Là cái này này:

Thiết kế nó để làm gì? Để làm chữ ký, để làm quảng cáo, để làm logo, hoặc để trang trí... Ví dụ (lấy ví dụ từ bản thân):

Không thích làm thì có sao không? Chẳng sao cả, không thích thì có thể để nguyên đó hoặc vứt bỏ nó đi cũng được

5. Về Masshead:

Cái này có thể gọi là cái mà các designer hầu như bỏ qua, chẳng ai thiết kế -> khá phức tạp và rắc rối (cái này xin kiếu sang bài viết sau nhé, bạn nào vẫn thích làm thì liên hệ mình, qua 2T, qua Blog, qua ym tùy ý)

Masshead không cần thiết phải cầu kỳ hoặc quá đẹp, chỉ cần nó hợp với Themes của bạn sử dụng là được rồi, không có cũng chẳng sao. Một số ảnh minh họa về Masshead:

Phù! xong phần thông số, mệt vãi xoài, breaktimes 15', làm tách cafe rồi tính sau. Time's up, let's cont....

III. Tiếp theo về khoản dàn trang:

Yahoo 360 Plus chia thành nhiều dạng, Mình thì chỉ chia thành 2 loại thôi, 2 cột và 3 cột, đương nhiên nếu muốn biến nó thành 1 cột cũng được (xài code)

Cái này thì mình nghĩ không cần ảnh minh họa, bạn ấn vào nút thiết kế-> dàn trang, chọn kiểu dàn trang bạn thích và ấn nút xong ^^

IV. Cách thêm và bỏ Module:

Các bạn tham khảo tại đây nhé: Hướng dẫn cấu hình Theme cho Blog Yahoo 360 Plus

V. Liên quan đến code CSS

Về code thì vô box Yahoo plus mà đọc nhé, hoặc cần thêm code thì hỏi Kata cũng được, tại dạo này bận bên MTO2T nên không có time viết share code được (về share code đã giao nhiệm vụ cho olympia sưu tập + share)

Về nhét code: mọi thao tác đều bắt đầu bằng nút thiết kế

Các bạn tham khảo tại đây nhé: Hướng dẫn cấu hình Theme cho Blog Yahoo 360 Plus

VI. Các thông số khác

Như đã giới thiệu, trong Plus có rất nhiều cái để Design, sau đây là một số ví dụ minh họa:

1. Về vạch ngăn dòng giữa các bài viết

2. Về Hover

Chẳng biết dịch sang tiếng việt là gì, đại khái nếu chỉ qua cái bạn chỉ định thì nó sẽ hiện ảnh lên

3. Về Button và Icon

Nó là cái trang trí cho phần nội dung trong Blog bạn, những cái này đa số mọi người đều tự kiếm, (Google chẳng hạn ^^)

4. Về nút Home

Là nút trên Avatar của bạn, có thể sử dụng các nút Home được share có sẵn, trích dẫn một số được share từ cool.love nhưng nếu đã thiết kế thì nên thiết kế cả nút Home, khi đó nó sẽ hợp với Blog của bạn hơn

5. Về Module Profile

6. Về Banner

Cái này thì xin khỏi mình họa. Đương nhiên là vẫn còn nhiêu cái nữa, không thể liệt kê hết ra được, tùy phong cách của designer thôi

VII. Lời khuyên chân thành khi thiết kế Theme cho Yahoo 360 Plus

Đừng quá sợ hãi bởi cả một đống chữ ở trên mà Kata vừa viết, vì 1 Themes các bạn làm các bạn chỉ sử dụng 1/3-2/3 trong só đó, và có rất nhiều cái các bạn có thể sử dụng sẵn hình ảnh trên mạng ví dụ Background, các nút ấn, button, hover, Border.... Các bạn nên chú ý tránh gặp các lỗi giống Blogger bình thường (làm dụng ảnh dạng gif + nhiều hiệu ứng)

Bài viết có sử dụng hình ảnh có một số Blogger. Mọi người cứ ngồi mà ngâm cứu nhé

Theo Kata Maybus