[Blog Plus] Thay đổi icon tâm trạng

Bạn có muốn thay đổi cái module tâm trang theo ý thích riêng của mình không?Hãy làm theo những hướng dẫn sau đây nhé:

1.Thiết kế tâm trạng:


-Các bạn có thể dùng các phần mềm đồ hoạ để thiết kế hình ảnh tâm trạng,ảnh tâm trạng gồm 2 hình:

1 hình nhỏ cỡ 25x300 để hiện thị khi tâm trang bình thường.
1 hình to cỡ 50x600 để hiển thị bài viết quan trọng.

-Cách thiết kế:
Chuẩn bị :

• 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)
  

2.Cách chèn code:

-Thay các URL ảnh trong code bằng địa chỉ ảnh mà bạn mới làm tâm trang (up lên host chứa ảnh nhé)

-Các bạn nhấn vào "Thiết kế/Theme/Chế độ tự sửa/CSS" chèn đoạn code dưới đây vào trong CSS.(nhớ là thay các URL ảnh bằng URL ảnh tâm trạng mới tương ứng của bạn nha)

Code:

Trích dẫn :

#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:urlURL ả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à bạn đã có một seri tâm trạng thể hiện cá tính riêng của mình rồi đó
Sau đây là 1 số icon tâm trạng làm mẫu có thể tùy bạn sử dụng)


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



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



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




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


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é ! Rê chuột vào ảnh để phóng lớn !


Lưu ý : Những bạn nào muốn mình làm giúp Icon thì nhớ send luôn 12 icon định làm và đặt tên theo số thứ tự từ 1 đến 12 để mình còn biết mà set tâm trạng cho phù hợp nhé !



(Bản quyền bài viết thuộc về W.Dephia's Blog, vui lòng ghi rõ nếu sử dụng lại nhé ! )

Nguồn CSS : My Family Team
Noa - W.Dephia - Co0l.love - Vunguyen - Phuong_Princess

Have a nice day!

uh. bài xài mí cái icon tui post sẵn [of ng` ta] cũng đc đó