Cách tạo theme trên blog ?

Mìh ko bt tạo theme trên blog, ai bt chỉ mih w nha, với lại mìh tải ảnh lên hok đc

Tran Van Trung
Tran Van Trung
Trả lời 13 năm trước

Hướng dẫn cách làm Theme cho 360 Plus này :

Đầu tiên bạn vô phần " thiết kế"----> "theme"--->"nhập hình nền thiết lập" : hình minh họa


Nền của 360 Plus có sẵn cũng đã rất nhiều. bạn có thể chọn những hình nền có sẵn.

Hoặc nếu chưaưngý với những nền có sẵn thì bạn cũng cứ chọn tạm một cái nền có sữnđó sauđó bạn nhấn " Tiếp" .

Sau khi vào chế độ tự chỉnh sửa các bạn sẽ thấy một bảng như sau:


Trong đó :

link màu:là màu link liên kết trong blog bạn

màu nền:màu của toàn bộ nền blog (màu này sẽ nằm sau hình nền nếu khôngchọn hình nền )

màu chữ:màu chữ mặc định trong blog

chữ màu:màu của các module trong blog

CònẢnhnềnbạn xóađường linktrongđóđi ( nếu như bạn không thich nềnđó) sauđó bạn chođườnglinh hình nền của bạn vô( nhớđó làđường link chứkhông lấyđượchình từPC của mình)

Cáchnày là hình nền tràn toàn trang nhưngkhôngđc dài vì bài viết của mình nhiều mà hình nền có giới hạn cho nên nó chỉ giữ nguyênnhư thế,khi mình kéo trang blog của mình xuống thì nó cũng chạy theo.

Còn các bạn cũng có thể làm được như trong blog 360 tức là chia ra thành top và bottom : cũng ở trang đó bạn kéo xuống phần CSS và đưa đoạn mã này vô :

#blast A, #blast A:hover{
COLOR: #;
}
body{
background:/*Màu background*/;}
#doc2, #doc{
background:/*Màu background*/ url(link file ảnh của top theme ) no-repeat center top;}
#bd{
background:transparent url(link file ảnh của bottom theme ) no-repeat center bottom;}

Với cách này bạn nên chọn phầnẢnh nềncó mày trùng với màu theme bạn vừa chọn. Hoặc đơn giản hơn bạn không cho gì vô phần đó nữa mà chỉ chọn phầnMàu nềntrùng với màu theme là đc

Hôm nay tôi xin cung cấp thêm đoạn mã để sử dụng theme mà hình nền không thay đổi khi quận trang:

BODY.blog_my {BACKGROUND:url(http://XXXX.jpg) #000000 fixed;}

thay link hình vô (http://XXXX.jpg)

Nếu như bạn muốn nền phần bài viết và các mô đun trong suốt thì các dòng thứ 2 và thứ 4 trong các mô đun chính và mô đun phụ để trắng là đc.

Chỉnh sửa :

Trước đây đúng là chỉ cần xoá 2 dòng như trên là blog trong suốt hoàn toàn. Nhưng hiện nay khôg thể dùng cách này đc nữa cho nên mình xin chỉnh sủa cách làm mới như sau :

1. Black Box trên cùng của Blog :



Tuy là phần này không cần thiết lắm, nhưng ai thích làm trong suốt cái này thì dùng Code này nhé :


Code:

#blog_masshead .rc{background:transparent;} #blog_masshead .rc div{background:transparent;} #blog_masshead .rc_bd{background:transparent;} #blog_masshead .rc_bc{background:transparent;} #blog_masshead .rc_ft{background:transparent;} #blog_masshead .rc_ft div{background:transparent;} #blog_masshead .bd{background:transparent;} #blog_masshead{background:transparent}


2. Module Bài Viết :

Vấn đề này tuy không mới nhưng cũng có khá nhiều bạn thắc mắc, sau đây là cách làm :
  • Đầu tiên bạn ClickThiết Kế~> Sau đó kéo chuột xuốngModule Bài Viếtvà Click vào chữSửaở đó nhe :

  • Chờ 1 lát, một cửa sổ tùy chỉnh hiện ra, bạn kéo chuột xuống phần màu nền, và xóa dòng đó đi và click Xong :


Thế là xong,Module Bài Viếtcủa bạn đã trong suốt hoàn toàn rồi đấy.


3. Nền Module :

Dùng Code sau để làm trong suốt nền các Module :


a- Nền Tiêu Đề Module :




Code:

.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
.row-920 .rc_bd .rc_bc .hd .titlebar .hd,.row-920 .rc_bd .rc_bc .hd .titlebar{background:transparent;}


b- Nền Module :




Code:

.col-150 .rc_bd .rc_bc .bd {background:transparent;}
.col-600 .rc_bd .rc_bc .bd {background:transparent;}
.row-920 .rc_bd .rc_bc .bd {background:transparent;}


Nếu muốn chỉ làm trong suốt một số Module nào đó, bạn tham khảo thêmBài Viết Nàynhé !


4 - Đường Viền ( Boder ) của Blog :

a - Toàn bộ Module :

Đây là code dành cho những bạn muốn làm trong suốt ( làm mất ) các đường viền của Blog:

Code :

#friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent}
#friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent}
#friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent }
#friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent}
#friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent }
#friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent}


b - Module tự tạo :


Nếu chỉ muốn làm mất Border của Module tự tạo thì các bạn dùng Code này nhé :


Code:

#user_mod_1000X.rc div, #user_mod_1000X.rc,
#user_mod_1000X.rc_bd, #user_mod_1000X.rc_bd div.rc_bc,
#user_mod_1000X.rc_ft, #user_mod_1000X.rc_ft div{background:transparent;color:none;}


ThayXbằngsố thứ tự Mod.
Ví dụMod 1 thì thay thành#user_mod_10001

5 - Blast :



Nếu muốn làm mất hoàn toàn nền của Blast bạn dùng Code sau :


Code:

#blast .rc div {background:transparent;}
#blast .rc {background:transparent;}
#blast .rc_bd div.rc_bc {background:transparent ;}
#blast .rc_bd {background:transparent ;}
#blast .rc_ft {background:transparent ;}
#blast .rc_ft div {background:transparent ;}
#blast .rc_bc .bd{background-color:transparent}


Note :Nếu gặp phải vấn đề màu chữ khó nhìn khi làm trong suốt Blast, bạn có thể xem thêmBài Nàyđể thay đổi màu chữ cho Blast nhé !

6 - Nền Comment ( hoặc là khung Bình Luận ) của Bài Viết :



Muốn làm trong suốt tòan bộ nền comment của Entry, các bạn có thể dùngCodesau, paste vàoCSSnhe :


Code

.cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment {background:none;}
.alist-comment #comment_container *, .cmt-mod-alist #comments-listing , .cmt-mod-alist #comments-listing .alist-comment {background:none;}


7 - Tổng số Trang :



Ai muốn làm trong suốt cả phần này thì dùngCode:

Code:

.mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent}


8 - Module Tâm Trạng :



Vì đây là một Module đặc biệt, nên code dùng làm trong suốt nó cũng khác một chút :

Code:

#mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;}


9 - Phần Xem Thêm Module Hình Ảnh



Muốn làm trong suốt phần này thì dùngCodesau nhé :


Code:

#photo_highlight .ft {background:transparent}


10 - Module Tên blog :

Code làm trong suốtMod tên blogcho những ai có yêu cầu nhé !


Code:

#blog_title .rc_bd .rc_bc .bd ,#blog_title .bd{background:transparent;}


11 - Làm trong suốt Hình Ảnh Trong Blog ( Gallery ) :

Code này có lâu, nhưng ít người biết, mình cũng quên bỏ vào đây, hôm nay có bạn nhắc mới nhớ ^^

Code:

#gallery_list .bd {background:none;}#photo_enlarge .bd, #photo_enlarge .ft {background:none;}
#photo_enlarge .ft #post_rte_create, #photo_comment .bd {background:none;}#photo_enlarge .c_photo_enlarge .ft {background:none;}
#photo_enlarge .bd .c_photo_enlarge .bd {background:none;}#gallery_list .ft .pagination .pagination {background:none;}
#gallery_list .ft .pagination {background:transparent url(Link Ảnh) repeat left top;}/*Thanh hiển thị số trang*/
#photo_highlight .ft .more {background:transparent ;}
#photo_highlight .ft .more a {font-size:110%;font-style:italic;font-weight:bold;color:#ffffff;}


12 - Trong suốt Profile Info:

Code:

#profile_info , #profile_info .bd #blog_profile .bd, #profile_info .bd #personal_profile .bd, #profile_info .bd #introduction_profile .bd, #profile_info .bd #personal_profile .bd th , #profile_info th {background:none;}
Do Hoang Ha
Do Hoang Ha
Trả lời 13 năm trước

Mình thấy với cách làm theme này thì cái theme của chúng ta sẽ đẹp từ ngoài Top Page vào tận trong entry vẫn thấy đẹp. Đầu tiên các bạn hãy xem cái theme mà mình làm này:

Link review (nhớ vào trong entry nhé):

http://360.yahoo.com/theme_360_v18

Khi mới nhìn vào mọi người sẽ tưởng đây là theme làm từ một mảnh (full theme) nhưng thực chất theme này tớ làm từ hai mảnh với:

Top: 1000x4000 pixel với chiều cao là 4000 pixel thì khi vào trong entry thì chúng ta vẫn thấy được các họa tiết trang trí trên theme (các họa tiết này chỉ khi vào trong entry mới thấy vì ở ngoài top page thì các họa tiết ở bottom theme đã che kín toàn bộ theme).

Bottom: 1010x2000 pixel (với chiều cao là 2000 pixel là chiều cao đủ để kín toàn bộ theme).

Bây giờ chúng ta cùng phân tích cái theme này:

1. Trước tiên chúng ta cần lưu ý, blog của Yahoo ưu tiên cho pic của bottom theme nằm ở lớp (layer) trên còn pic của top theme thì nằm ở layer dưới. Chúng ta tưởng tưởng giống như 2 tờ giấy chồng lên nhau ý... Nhưng điểm quan trọng ở đây đó là nó vẫn cho cúng ta nhìn thấy một phần pic của top theme mặc dù chiều cao của bottom theme cao quá so với giới hạn của toàn theme...

VD: Toàn bộ theme có chiều cao là 2000 pixel và bottom theme có chiều cao là 2600 pixel chẳng hạn, với chiều cao là 2600 pixel và lại là layer trên cùng thì đáng nhẽ toàn bộ theme sẽ bị che kín bời bottem theme nhưng không. Nó chỉ cho 1800 pixel là chúng ta nhìn thấy thôi, còn lại là khoảng 200 pixel là cho chúng ta nhìn thấy pic của top theme..

2. Tại sao chiều cao của top theme là 4000 pixel mà trong khi đó chiều cao của bottom theme lại chỉ có là 2000 pixel thôi?

Với kích cỡ là 1000x4000 của top theme thì khi vào trong entry chúng ta vẫn thấy được các họa tiết trang trí trên theme - đây là điểm lợi và cũng là điểm hại... Lúc chúng ta thiết kế bằng photoshop với kích cỡ này khi chúng ta xuất ra một file ảnh .jpg thì size của nó chắc vào tầm khoảng độ hơn 1,5 Mb trở lên (tùy từng họa tiết trên pic có nhiều hay không)... và với kích cỡ quá to này thì việc size cho một pic làm top theme sẽ vượt quá mức 250Kb mà blog yahoo cho phép.

Có cách giải quyết đó là khi chúng ta save để suất ra file ảnh .jpg (khi thiết kế bằng photoshop) thì ở phần save chúng ta chọn là mức low hoặc medium thôi (hoặc kéo thanh trượt nhỏ lại sao khi vừa thấy nhỏ hơn 250 Kb thì thôi). Làm thế thì sẽ làm cho chất lượng ảnh làm theme bị kém đi do phải nén nhiều quá. Chính vì vậy khi thiết kế pic thì chúng ta nên chọn những họa tiết ít màu thôi. Hoặc là cho các họa tiết làm theme có độ transparency (giống pic làm top theme của tớ ấy).

Vì khi vào blog chúng ta sẽ chỉ nhìn thấy khoảng 200 pixel là của phần top theme nên ở vị trí 200pixel trên cùng của pic làm top theme thì chúng ta trang trí sao cho đẹp và hợp với pic ở bottom theme.

Nếu bottem theme có kích cỡ là: 1000 x 4000 như top theme thì độ fân dải của pic làm theme sẽ kém (mà pic của bottom lại là pic mà chúng ta thấy nhiều nhất khi vào một cái blog) vì vậy chúng ta chỉ làm với chiều cao là 2000 pixel thôi. Với việc trang trí họa tiết cho bottom theme thì chúng ta cứ trang trí sao cho kín giống full theme. Nhưng tốt nhất là trang trí họa tiết sao cho kín với chiều cao là 1800 pixel thôi nhé (để tránh trường hợp nhiều blog có chiều cao không đến 2000 pixel vì chiều cao các module không tối đa, ví dụ như module personal hoặc module quickcomment chẳng hạn).

Chả biết còn nói thiếu gì nữa không, chắc là đủ rồi nhỉ. Chúc các bạn làm được theme đẹp.

Hoang Trung Thuc
Hoang Trung Thuc
Trả lời 13 năm trước

- Chúng ta có thể vào nguồn link bên dưới đây tham khảo một số thông tin các thủ thuật Blog 360 plus:
http://www.thuthuatblog.com/2008/04/hng-…
- Cách chèn ảnh vào blog entry 360 Plus:
http://www.photo.yeah1.com/showthread.ph…
http://vn.myblog.yahoo.com/cyvp_perfectl…
Làm logo đại diện cho Blog:
http://vn.myblog.yahoo.com/sukiyo_kiss
http://i28.tinypic.com/2d2gle9.jpg
http://i26.tinypic.com/w83rs4.jpg
Themes Blog 360 Plus:
http://hoanglamcm.net/blog/read.php?375
Cài Themes Blog và một số kỹ thuật cơ bản:
http://vn.myblog.yahoo.com/w-dephia/arti…
- Lưu ý: Themes được lựa chọn muốn đưa nó lên Blog thì phải là themes có dung lượng Size dưới 100KB thì mới đưa lên Blog được.

- Ngoài ra, nếu muốn tạo cho trang Blog/Web các dòng chữ chạy hấp dẫn thì chúng ta cũng có thể dùng chương trình Flax150http://www.mediafire.com/?eyyz42qnwmc giúp chúng ta có thể tạo ra những đoạn chữ dạng Flash (*.swf) rất nhiều hiệu ứng khác nhau. Giao diện phần mềm gồm các phần chức năng chính sau đây:
Text Properties.: thực hiện bằng cách gõ nội dung cần tạo hiệu ứng vào khung Text. Chúng ta cũng có thể định dạng tọa độ ngang [Y] và đứng [Xpos] cho dòng chữ theo ý của mình bằng cách thay đổi các thông số. Sau đó tiến hành các thao tác định dạng Font chữ chữ ở các khung Font, Size, Script, Color.
Movie Properties: thực hiện bằng cách hiệu chỉnh kích thước của đoạn Flash sẽ được tạo ra bằng cách hiệu chỉnh các thông số rộng [Width] và cao [Height]. Để chọn màu nền cho màn hình hiển thị thì nhấn vào mũi tên xuống cạnh ô vuông màu hoặc cũng có thể nhập thẳng thông số màu vào khung > nhấn mũi tên để xoay màn hình hiển thị.
Radiation FX Properties: thực hiện chọn hiệu ứng cho đoạn Fash tại đây và đương nhiên tùy hiệu ứng mà chúng ta sẽ có nhưng thông số khác nhau.
Xuất xưởng tác phẩm: sau khi hiệu chỉnh vừa ý, chúng ta vào menu Files nó sẽ hiển thị ra các tùy chọn mang ý nghĩa như sau:
Export as SWF: lưu lại với dạng một file Flash.
Test in Player: chạy thử file Flash trước khi xuất xưởng.
Creat Projecter: tạo một file tự chạy .exe
Test in Browser: trình diễn file vừa tạo thử trên trình duyệt Web [IE].
Publish for Web: xuất sưởng thành file dạng .htm.
Set As Sereen Saver: xuất xưởng thành một trình bảo vệ màn hình. Chúng ta có thể chọn một dạng phù hợp với nhu cầu của mình rồi lưu lại rồi đưa vào Blog/Web.

Tran Quynh Nhung
Tran Quynh Nhung
Trả lời 13 năm trước

Khi nhìn vào một blog, người ta cần là đọc nội dung là chính nên phải chọn màu chữ sao cho dễ nhìn, nổi bật, phải phù hợp với người dùng. Có thể là không cần có pic ở theme cũng có thể coi là theme đẹp nếu ta biết phối màu đẹp, hoặc chỉ cần những pic đơn giản, thoáng mắt (vì ở theme đã có rất nhiều chữ rồi mà các họa tiết trên theme lại chằng chịt nữa thì...).

1. Đầu tiên theme thiết kế ra phải fù hợp với tất cả mọi loại màn hình lớn hơn 1024x768.

Bây giờ, mình thấy mọi người toàn làm theme với độ rộng là 1024 và hầu như nó chỉ hợp với loại màn hình đó mà thôi, mà mọi người không nghĩ tới những người sử dụng màn hình lớn hơn 1024 thì sao?? Tất nhiên là khi người ta nhìn vào sẽ bị lệch đi rất nhiều...

Mình lấy ví dụ ngay cái theme của trưởng nhóm design group..

Tất nhiên là khi nhìn với màn hình 1024 thì nó có vẻ ổn, nhưng khi nhìn với màn hình là 1512 thì...

Thế lúc này phải đặt ra một câu hỏi là làm thế nào để theme hợp với các kiểu loại màn hình:

Mình đưa ra mấy cách giải quyết sau:

1. Đầu tiên là cách phối màu ở mỗi mảnh sao cho nó hợp với màu nền (color background).

- Chúng ta không nên đổ màu phai dần từ trên xuống với kích cỡ mỗi mảnh là 1024 như thế này:

Vì khi nhìn với màn hình là 1512x... thì nó sẽ bị như thế này:

Như thế thì khi nhìn nó sẽ tạo thành khung và các loại màn hình lớn hơn 1024 khi nhìn sẽ bị lệch vì nó tạo thành viền (và tất nhiên là màu ở mảnh này sẽ ko trùng với màu nền của theme) và như thế sẽ rất xấu.

Cách khắc phục nếu mình thích kiểu theme phai màu dần từ trên xuống là sử dụng chiều rộng mỗi mảnh là 1600x…. và trang trí họa tiết sao cho thích hợp. Nếu họa tiết ko bị mất một phần giống hoa văn ở trên và với cỡ ảnh là 1600x... thì chắc chắn là theme này sẽ đẹp.

Cách tốt nhất đó là ta sử dụng cách phai màu dần từ trái sang phải và từ trên xuống dưới (đối với mảnh phía trên) và tất nhiên là màu mà phai dần nó phải trùng theo màu của màu nền mà ta sử dụng (và ngược lại là từ dưới lên và cũng từ trái sang phải với mảnh phía dưới).

VD:

Như pic ở trên thì mình đã sử dụng cỡ ảnh là 1010x900 và các họa tiết mình trang trí nó vừa với loại màn hình là 1024x768 và nếu có sử dụng màn hình lớn hơn thì nó vẫn không hề bị lệch vì mình để màu phai dần theo theme (màu phai dần là màu đen và màu nền của theme cũng là màu đen).

2. Ta sử dụng màu ở hai mảnh và màu của nền là giống nhau và ta trang trí họa tiết sao cho nó kín cả theme (tránh trường hợp họa tiết bị đứt đoạn hay thiếu hụt).

Theo mình, tốt nhất là nên lấy kích cỡ một mảnh là 1010x900 (hoặc chiều dài có thể lớn hơn (có thể là 1010x1500) nhưng phải bố trí họa tiết trang trí sao cho khi ta ghép 2 mảnh vào theme thì các họa tiết không bị chèn và chồng chéo vào nhau.)

Tại sao mình là lấy chiều dãi mỗi mảnh là 900 là vì khi mình design với chiều dài này cho mỗi mảnh thì khi cho lên làm theme các họa tiết nó sẽ kín toàn bộ theme... và nó sẽ không bị trống ở giữa giống cái theme của trưởng nhóm design ở trên...

VD: Mình đảm bảo với theme này thì với đủ loại màn hình đều nhìn đẹp cả, không bị lệch.

Theo mình, một số chi tiết phụ nữa là màu chữ ở theme phải dễ nhìn cho người đọc... Nên lấy màu chữ giống một số màu ở theme thì nó nhìn sẽ hài hòa và dịu mắt, dễ đọc, nên ít màu thôi vì nhiều màu sẽ chóe và nhìn nó bị lệch nhau. Các họa tiết trang trí trên theme nên để ở vị trí sao cho nó không bị đè vào text vì nếu mà bị trùng vào thì người ta sẽ khó đọc được chữ.

Mình nghĩ tốt nhất là khi design không nên để độ rộng mỗi mảnh lớn quá(VD: 1280x1500) vì như thế thì dung lượng file nó sẽ lớn và khi ng ta vào blog đọc thì pic ở theme sẽ load rất lâu. Dung lượng mỗi mảnh nên chỉ là hơn 100Kb một chút thôi, đừng để lớn quá không thì khi vào blog sẽ load lâu gây khó chịu cho ng đọc

Và nếu có làm full theme một mảnh thì phải tính sao khi người ta vào entry hay vào friends list thì nó không bị ghép thành nhiều tấm. Nếu có bị thành nhiều tấm thì các tấm phải khớp nhau, ko nên thấy sự phân biệt khi bị ghép.

Các bạn có thể tham khảo các theme của mình:

Từhttp://360.yahoo.com/theme_360_v1

đếnhttp://360.yahoo.com/theme_360_v15

Trong các theme trên thì có khoảng 3 theme bị lỗi. Tức là chỉ đẹp với màn hình 1024x... vì hồi đầu mình chưa để ý, dần dần rút kinh nghiệm dần.

Các bạn có thể vàohttp://my.opera.com/antoniblueđể down các file ảnh gốc (.psd). Ở đấy mình đã share, mọi người có thể xem vào chỉnh sửa tùy ý với các theme mà mình đã làm.

Trên đây là một số kinh nghiệm mình tìm hiểu được, muốn chia sẻ với mọi người thôi, và cũng là muốn cho mọi người biết về cách nhận xét một cái theme ở blog.