Yahoo! BLOG

[Đăng nhập | Người dùng mới?Đăng ký!]

Trang chủ Blog | Các câu hỏi thường gặp | Yahoo! Việt Nam

Tên blog

Sửa Đóng

PLUS CONNECT - Câu Lạc Bộ blogger 360plus

Nơi bạn gặp gỡ cộng đồng 360plus qua nhiều hoạt động online và offline thú vị - Nơi bạn chia sẻ và nhận lại nhiều kinh nghiệm cuộc sống - Nơi bạn cùng chung tay xây dựng cộng đồng

Đăng ký thành viên cùng trao đổi và học hỏi nhe!

Bài mới nhất

Sửa Đóng

Trích dẫn Báo cáo

Hướng dẫn tự làm & [Share] icon cho Module tâm trạng

Thư mục: Design Blog Plus |

Quan trọng
Đăng ngày: 11:45 11-12-2008

1 bộ icon kích thước 50x50 cho mỗi tấm hình.
Chương trình Adobe Photoshop CS (1, 2, 3)
1 host ảnh để up lên, photobucket.com hoặc imageshack.us chẳng hạn.

Sau đây là cách thực hiện :

Bước 1 :

Khởi động Photoshop lên.
Click File > New > Gõ kích thước là 50 x 600 . Phần màu nền là transparent !

Bước 2 :

So sánh các icon có sẵn của Yahoo Plus để chọn kiểu icon tâm trạng cho giống ( Muốn xem bạn Click vào Viết Blog ở trong Blog bạn )

Bước 3 :

Xác định kiểu tâm trạng cho icon, sau đó mở icon lên ( File > Open > đường dẫn đến icon đó )
Tiếp theo Click Image > Mode > chọn RGB Color ( Nếu có sẵn thì thôi )
Cuối cùng bạn chọn công cụ Move bên bảng tool phía trái của Photoshop. Click vào hình icon và kéo sang bên ảnh trống :

Bước 4 : Làm tương tự cho 12 icon còn lại :

Bước 5 :

Sau khi đã làm xong 12 icon bạn sẽ được như hình :
Sau đó save lại định dạng Gif ( tên emo-50 chẳng hạn)

Bước 6 : (Resize ảnh thành 25x300)

Click vào Image > Image Size
Gõ vào kích thước : 25 x 300. Ok
Save lại định dạng Gif ( tên emo-25 chẳng hạn)

Bước 7:

Up 2 ảnh đó lên 1 host và thế vào đọan Code sau vào CSS : ( Chú ý : ảnh cỡ to là ảnh emo-50, còn cỡ nhỏ là emo-25 như mình ví dụ )

Code :

#mod_lifeline .list td a.blog_emo_25_1{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_25_2{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -25px;}
#mod_lifeline .list td a.blog_emo_25_3{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_25_4{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -75px;}
#mod_lifeline .list td a.blog_emo_25_5{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_25_6{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -125px;}
#mod_lifeline .list td a.blog_emo_25_7{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_25_8{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -175px;}
#mod_lifeline .list td a.blog_emo_25_9{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_25_10{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -225px;}
#mod_lifeline .list td a.blog_emo_25_11{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_25_12{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -275px;}
#mod_lifeline .list td a.blog_emo_50_1{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_50_2{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_50_3{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_50_4{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_50_5{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_50_6{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_50_7{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -300px;}
#mod_lifeline .list td a.blog_emo_50_8{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -350px;}
#mod_lifeline .list td a.blog_emo_50_9{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -400px;}
#mod_lifeline .list td a.blog_emo_50_10{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -450px;}
#mod_lifeline .list td a.blog_emo_50_11{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -500px;}
#mod_lifeline .list td a.blog_emo_50_12{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -550px;}

.mod-alist-full .main-hd h1 em,
.mod-alist-titlebar-1 h2 a em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose
#mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}

Vậy là xong rồi đó, bạn đã có 1 bộ icon made in by yourself ;))

Sau đây là 1 số icon tâm trạng làm mẫu :( có thể tùy bạn sử dụng) (Rê chuột vào hình để phóng to nhé )

Icon do Juς†¡ηε'ς ßl☻g đóng góp :

Đây là Icon do bạn Mi5sB đã đóng góp !!!

Bộ này do Sexy'sBlog đóng góp :

Icon do ((¯`•._.• vu$on •._.•´¯)) đóng góp :

Photobucket

Cách sử dụng các icon này :

Các bạn Click chuột phải vào icon và chọn Copy Image Link , sau đó bỏ link đó vào đọan Code trên theo từng loại ảnh nhỏ và lớn . Cuối cùng là Copy cả đọan Code (đã được thay link) vào css nhé !

Bản quyền bài viết thuộc về W.Dephia's Blog

Trích dẫn (0)

Tìm tag: module, icon, tamtrang, blog, plus

Tổng cộng 28 lời bình

Báo cáo
☻»(¯`Jµ£¥♥£ön€£¥´¯)«--«☺ 23:14 27-10-2009

mod-alist-full .main-hd h1 em,
.mod-alist-titlebar-1 h2 a em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose
#mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}
phần url ảnh tam trang nhỏ là lấy hình nào zậy bạn zúp mình đi mình cảm ơn
Báo cáo
©NTK 11:54 04-10-2009

a ơi làm dùm e bộ icon thỏ đc k :( e k biết làm :((
Báo cáo
♥♀ Royal family ♀♥¨¨♀♥Meo Mumi ♥♀ 19:17 02-10-2009

ANH PUS OI PHOTOSOP LA GI ? NÓ Ở CHỖ NÀO
Báo cáo
—»™ (¯`◦○♥ßÄß¥♥○◦´¯)™« — 08:25 22-09-2009

ban oi minh` chang hiu~ ji` ca~ co' ji` ban wa blog minh` gop y' cho minh` ha!!
Báo cáo
°º¤ø,¸¸,ø¤º°`°º¤ø,¸ (P3_Hi3n) °º¤ø,¸¸,ø¤º°`°º¤ø,¸ 15:21 28-07-2009

hjc hjc, vao` file o cho^~ nao`
Báo cáo
[Boy]PhươngNam Ki$$::Yu 12:52 21-07-2009

hjxx lm cia ny lau hen
Báo cáo
eckxanh_311 11:18 21-07-2009

anh oi ma sao em an xong no ko duoc nhi? giup em voi'
Báo cáo
LittlebeaR 05:20 16-07-2009

Anh oi, cai phan nay:
mod-alist-full .main-hd h1 em,
.mod-alist-titlebar-1 h2 a em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose
#mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}
Em phai de hinh nao vo ha anh? em hogn hieu cai cuoi cung, giup em anh nhe! Thanks anh nhiu!
Báo cáo
Pé Nợn 01:34 08-07-2009

sis ui có nghĩa là phải làm từ bước 1 hay chỉ cần copy code vao thui hả sis
Báo cáo
metoyou_hp93 15:24 07-07-2009

Khi nào rảnh mời đến nhà em chơi nha! Hì
Báo cáo
metoyou_hp93 15:23 07-07-2009

Ui, em làm được rùi. Thanks nhìu.
Báo cáo
™Oü€ëñ ïS m€™ Nhạt nhoà 18:40 02-07-2009

em lam` dc roi` :D

Thanks a nhieu` !!!

Add plus vs em nhaz
Báo cáo
Šw€€ŧ ¶ )ŗ€äm 19:13 28-06-2009

Doi voi may hi`nh na`y thi` du`ng dang code #mod_lifeline .list td a.blog_emo_50_11{background:url(URL tam trang ) no-repeat 0 -500px;}
phai hok anh hay du`ng code khac zay?
Báo cáo
Kimi Raikkon€n™ 22:02 13-06-2009

.mod-alist-full .main-hd h1 em,
.mod-alist-titlebar-1 h2 a em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose
#mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}
----
Bạn ơi cho hỏi, cái URL ảnh tâm trạng nhỏ dưới cùng là sao? Mình ko hiểu phần này :D
Báo cáo
Bạch Thu Hà 03:41 06-05-2009

E thấy có trên web này chia sẽ bộ động tâm trạng Icon khá đầy đủ, mọi người có thể vào đây để tham khảo.
http://matcuoi.com/
Ví dụ một vài Icon tiêu biểu cho bộ siêu tập.

Và còn nhiều nữa....
Báo cáo
♥๑۩۞۩๑Dũng๑۩۞۩๑♥ 15:18 29-03-2009

em muon su dung icon co san cua nguoi # o tren thi lam the nao
Báo cáo
bphuong154 12:58 02-03-2009

hehe ..biết làm rùi ..thank nhìu nhìu

Báo cáo
plusconnect17:49 02-03-2009

chúc bạn vui nhé
Báo cáo
bphuong154 12:32 02-03-2009

cai css nằm ở đâu vậy?hic...hổng hiểu gì hết..hổng làm được...
Báo cáo
ng4cut3 21:16 09-02-2009

ui' e lam` d.c oy thanks a nhju nhju

Báo cáo
plusconnect10:26 10-02-2009

chúc em zui..!!
Báo cáo
doremon_sakura 11:36 20-01-2009

cho em hoi ti: Cho minh thix hinh to thi chi coppy doan co URL anh tam trang co to thui a?

(URL ảnh tâm trang cỡ to) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_50_2{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_50_3{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_50_4{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_50_5{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_50_6{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_50_7{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -300px;}
#mod_lifeline .list td a.blog_emo_50_8{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -350px;}
#mod_lifeline .list td a.blog_emo_50_9{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -400px;}
#mod_lifeline .list td a.blog_emo_50_10{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -450px;}
#mod_lifeline .list td a.blog_emo_50_11{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -500px;}
#mod_lifeline .list td a.blog_emo_50_12{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -550px;}

.mod-alist-full .main-hd h1 em,
.mod-alist-titlebar-1 h2 a em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose
#mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}

Báo cáo
plusconnect12:23 20-01-2009

nên copy hết..vì hình to là phần thể hiện bài viết Quan Trọng, hình nhỏ là phần thể hiện bài viết bình thường..nên có cả 2 bạn nhe
Báo cáo
[♥ŁµÇkÿ.Fäm♥]♀…(¯`'•.¸ñhøç†µñ¸.•'´¯) 08:55 16-01-2009

Dzạ, là ngay bước 3, cái cuối cùng. Em lèm hok đc, nhà e dùng photoshopCS4. Chỗ này nà, chỉ em với:

Báo cáo
plusconnect12:32 16-01-2009

cái này giống như em copy cái hình đó bên layer khác sang thui..thao tác copy hình paste qua đó em..miễn sao xếp nó thẳng hàng thui à..!!
Báo cáo
[♥ŁµÇkÿ.Fäm♥]♀…(¯`'•.¸ñhøç†µñ¸.•'´¯) 14:23 15-01-2009

Cho e hỏi cái nhé, sao e kéo hình Icon sang ảnh trống hem đc dzạ????

Báo cáo
plusconnect15:29 15-01-2009

em kéo hình icon này sang ảnh trống là sao nhỉ?? chưa hiểu ý em..!!
Báo cáo
[Đào Hoa Hội~桃花會~]cobequay_yue[Nam Phong~南風~] 10:00 05-01-2009

ss ơi , ss nói click chuột fải ra chọn Copy Image Link , mờ em chỉ thấy mỗi chứ copy thui àh , hôk có chữ Copy Image Link ==> làm hem có dc ....... hjx hjx , seo kì zạ

Báo cáo
plusconnect10:25 05-01-2009

úi em dùng trình IE thì bấm dô Properties và sẽ thấy cái link url..em copy cái url là dc..
Báo cáo
♥♀ŦĦǺǿ ♥▒¦ßÄß¥¦▒♥ 19:05 31-12-2008

ui tHanH~ Em lAm` dC uJ~ ZuI Wa' cO*

Báo cáo
plusconnect10:25 05-01-2009
Báo cáo
ngaythotieumuoi iu sieunhantrungcut 13:37 31-12-2008

ui làm cái này trầy trượt wá à!

Báo cáo
plusconnect15:02 31-12-2008

à nó hơi bị nhìu hình, nhìu linh..nên thấy choáng chút..^^ kiên nhẫn chút em..!!^^
Bình luận riêng Báo cáo

Đây là lời bình riêng
Báo cáo
¶3_¶<ute 14:27 26-12-2008

hjc khó hiểu wá!!photoshop ở đâu ra!!em ko bjk làm!!bunk` ghê

Báo cáo
plusconnect14:58 26-12-2008

wm ko làm dc photoshop th2i em lấy những hình ảnh mẫu ở trên đây dùng vào thui là dc mà em..!!
Báo cáo
Mia 15:38 21-12-2008

Lời bình mới

Bài viết về bạn hoặc có tag tên bạn:

Chưa có bài nào có liên quan.

Người đăng ký yêu thích blog này cũng đồng thời thích:

Chưa có blog yêu thích nào có liên quan.

Thông tin cá nhân

Sửa Đóng

Trở lạiplusconnect Trang chủ Blog

Blog yêu thích

Xem thêm

Thư mục

Xem ngày tháng

Bài mới nhất