Tài liệu Thiết kế yahooplus từ cơ bản tới nâng cao pdf

360plus Về Ebook CSS 360plus ver 1.0 Giới thiệu về CSS và cách chèn code css Ý nghĩa của các code trong việc viết code css Ảnh nền tất cả các trang Theme 2 mảnh Top - Bottom Modun tên bl

Trang 1

Welcome to Changtraiiudoi’s Blog & HaTim’s Blog Hỏi đáp – Đóng góp Check for updatas

Code css cho Yahoo! 360plus

Về Ebook CSS 360plus ver 1.0

Giới thiệu về CSS và cách chèn code css

Ý nghĩa của các code trong việc viết code css

Ảnh nền tất cả các trang

Theme 2 mảnh Top - Bottom

Modun tên blog

Thay icon tâm trạng

Hình nền tiêu đề bài viết

Hình nền Modun bài viết

Code toolbar phần coment

Ảnh nền tổng số trang, cuối modun bài viết

Làm hình nền trang comment

Làm ảnh nền phần tiêu đề bài viết và nick comment

Thay đổi tag bài viết

Ngăn dòng bài viết

Xóa đường viền

Tạo đường viên trong suốt

Thiết kế Modun Profile

Trang trí nóc nhà Yahoo! 360plus

Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách

Hiệu ứng thu nhỏ, tự động kéo dài modun tự tạo khi để chuôt vào

Hiệu ứng tạo nút ấn trong modun

Làm trái tim,mưa,tuyết rơi,bướm bay khi di chuột vào các link Blog

Trang 2

Code sửa lỗi phông chữ, blog bị đen khi làm trong suốt

01 Về Ebook CSS 360plus ver.1.0

Yahoo! 360plus là một sản phẩm Blog với nhiều tính năng hấp dẫn người dung như sử dụng CSS, hỗ trợ kéo thả khi thiết kế, upload ảnh trực tiếp lên Blog, không giới hạn dung lượng lưu trữ, quản lý và trình bài bài viết theo thư mục, giao diện trực quan, ngôn ngữ tiếng Việt…Vì thế, ngay sau khi ra đời nó đã tạo nên cơn sốt cho làng Blogger Việt Nam Nhưng lại có nhiều bạn vẫn không tránh khỏi lúng túng khi muốn tạo cho mình một trang blog đẹp, mang phong cách, cá tính của chính mình Và để giúp các bạn điều này, cũng như đỡ mất thời gian tìm kiếm hướng dẫn thiết kế trên mạng, changtraiiudoi@ymail.com và hatim87uyennhi@yahoo.com đã biên tập ebook này - bao gồm tất cả những code css cho 360plus, từ code tạo ảnh nền đơn giản đến những code tạo hiệu ứng phức tạp Trong đây có nhiều bài viết chúng mình sưu tầm từ nhiều nguồn trên mạng, thấy những code

đó có trên nhiều địa chỉ và không phân biệt được đâu là nguồn thật ! Mong nhận được các ý kiến đóng góp cũng như các phát hiện thiếu xót trong ebook về css đầu tiên này

Welcome to Changtraiiudoi’s Blog & HaTim’s Blog Hỏi đáp – Đóng góp Check for updatas

02 Giới thiệu về CSS và cách chèn code css

CSS là một loại ngôn ngữ dàn trang, định kiểu cho các thành phần của trang Web hay Blog Nói vậy chung chung quá, nôm na CSS như là người đi mua kiểu bàn ghế, kiểu đồ đạc trong nhà theo ý của chủ nhà và sắp xếp chúng cũng theo ý ông chủ luôn Cụ thể là nó làm nhiệm vụ biểu diễn fonts (phông chữ), colours (màu sắc), margins (canh lề), lines (các loại đường, nét), height (chiều cao), width (độ rộng), background images (ảnh nền các loại), xác định vị trí cho các khối…

CSS từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng

Đầu tiên bạn vô phần Thiết Kế ~~> Theme ~~> Chế độ tự chỉnh sửa ~~> Click nút Tiếp ~~> Hiện ra cái khung

có bảng màu, kéo xuống dưới thấy chữ CSS, bên cạnh đó có cái khung cho điền text Đó là phần điền CSS

Trang 3

03 Ý nghĩa của các code trong việc viết code css

Trang trí các Khung kiểu liệt kê : Khung Thống kê (#statistic), Bài viết mới (#article_new), Lời bình mới

(#comment_new), Thư mục (#folder)

Ở các khung này ngoài lớp để đặt ảnh của nền ra (.bd), chúng ta còn 2 lớp để đặt ảnh nữa là (ul -lớp bao gồm 1 khối liệt kê) và (li - lớp bao gồm từng dòng liệt kê) Lớp (li) thường đã được dùng để tạo 1 icon đầu dòng cho mỗi liệt kê (Ví dụ lệnh: #article_new bd ul li {background:transparent

url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images03/orange_book_open.gif) no-repeat center left;} dùng để tạo 1 hình quyển sách nhỏ trước mỗi tiêu đề bài viết mới)

Ở các khung Bài viết mới, Thư mục, Bạn bè chỉ có 1 lớp (ul), riêng ở khung Lời bình mới có thể có nhiều hơn 1 lớp (bằng số bài có lời bình mới được hiện ra)

Ảnh đặt tại lớp (ul) sẽ ở trên ảnh đặt tại lớp (.bd) do vậy nếu muốn nhìn thấy ảnh của lớp (.bd) thì không được tô màu lớp (ul) Ở đây, lệnh HEIGHT được sử dụng để tăng chiều cao của khung cho thích hợp với ảnh đặt thêm vào Ví dụ code CSS trang trí khung Thống Kê của tôi:

#statistic rc_bd rc_bc bd

{background:#ffffee url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/Background/05bgc.gif);} Lệnh trên là chọn màu nền và ảnh nền của lớp bd (trong ví dụ này ảnh nền đã che hết màu nền, đưa vào chi để minh họa)

Trang trí cho khung Giới thiệu bản thân (#profile_highlight)

Các bạn đã từng trang trí 360 plus bằng CSS hẳn biết rằng 360 plus bổ ra hẳn 6 lớp ảnh để trang trí đường viền cho mỗi khung lần lượt là:

rc, rc div : dùng để tạo đường viền trên đỉnh;

.rc_bd, rc_bd rc_bc: dùng để tạo đường viền 2 bên trái phải;

.rc_ft, rc_ft div: dùng để tạo đường viền dưới đáy;

Nếu bạn không dùng viền cho các khung, hoặc có thể trang trí đường viền bằng lệnh BORDER thì bạn sẽ có 6 lớp thêm để đặt ảnh cho khung của mình (quá nhiều, ai mà dùng hết được cơ chứ!)

Nếu bạn dùng viền cho khung Giới thiệu bản thân rồi, bạn vẫn có thể đặt thêm một hình vào để trang trí Khung này đẹp thêm bằng cách sử dụng #profile_highlight_module đặt trùng và ở dưới #profile_highlight Lúc này, bạn phải nhiều lần sử dụng lệnh HEIGHT Tham khảo ví dụ dưới đây:

Lệnh trên chọn hình đặt ở phía dưới của khung và chỉnh chiều cao khung cho hợp lý với ảnh đặt vào;

#profile_highlight_module {height:400px;background:#FFFFFF

url(http://i266.photobucket.com/albums/ii277/babybao_iloveu/background%201/070307hnc204_m_cola71a.gif);} Lệnh trên là để chọn màu nền, hình nền và chỉnh chiều cao nền của khung để nó không vượt quá đường viền

Trang 4

Theo hienhoang74@yahoo.com

.col-150 Chỉ 2 modun nhỏ tự tạo, nằm ở 2 bên blog

.col-600 Chỉ modun lớn nằm giữa blog

.row-920 Chỉ modun dài nhất, nằm ở trên cùng và dưới cùng blog

rc, rc div : dùng để tạo đường viền trên đỉnh

.rc_bd, rc_bd rc_bc: dùng để tạo đường viền 2 bên trái phải

.rc_ft, rc_ft div: dùng để tạo đường viền dưới đáy

height:400px -Chiều cao của modun

height:auto -Chiều dài tự động

border -Đường viền, đường biên

border-left:5px dotted #fff -Đường viền trái 5px dotted, màu #fff

Trang 5

text-align:right -Căn chữ sang phải

no-repeat center top - Có nghĩa là ảnh được hiện thị 1 lần (no-reapeat), ko lặp lại, ảnh được ở giữa (center) tiêu

đề hay nền modun, ảnh được hiện thị từ trên xuống dưới (top)

bottom Ảnh được hiện thị từ dưới lên

right -Căn phải

left -Căn trái

repeat -Lặp từ trái qua phải, từ trên xuống dưới

no-repeat -Không lặp

repeat-x lặp theo chiều ngang

repeat-y -Lặp theo chiều học

background:transparent -Dùng làm trong suốt hoàn toàn

background:#FHJDFH -Chèn màu vào

background:URL(Link ảnh) -Chèn ảnh vào

background:transparent url(link ảnh) viết giản lược thành background:URL(Link ảnh)

!important -Khi qui định thuộc tính nào !important, thuộc tính đó sẽ không bị khi đè

04 Ảnh nền tất cả các trang

Code trên đặt ảnh nền trên tất cả các trang mà blog360plus cho phép đặt ảnh nền:

Body.profile_view, body.blog_my, body.guestbook, body.comment_list, body.comment_list, body.blog_my_index, body.slideshow, body.blog_archives_folder, body.comment_listing, body.trackback_listing, body.post_doodle, body.guestbook, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.subscribe_list,

body.post_gb, body.gallery, body.photo_big, body.photo_upload_pc, body.photo_upload_gallery

{background:url(Link ảnh) repeat top fixed;}

Lưu ý: Repeat là lặp ảnh từ trái qua phải, từ trên xuống dưới Ta có thể thay thành repeat-x để lặp từ trái qua phải, lặp theo chiều ngang Thay thành repeat-y để lặp theo chiều dọc, từ trái qua phải

Khi ta thêm: left thì ảnh sẽ được lặp từ trái qua phải, right thì ảnh lặp từ bên phải qua trái Them top để ảnh được hiện thị từ trên xuống, thay top bằng bottom để ảnh hiện thị từ dưới lên Thêm fixed để anh ko chuyển động (đứng im) khi ta kép trang (cuôn trang) blog

Các bạn có thể tách từ code viết giản lược, viết gộp trên để mỗi trang có một ảnh nền riêng Ví dụ như ảnh nền trang chính blog thì dùng code này:

Body.blog_my { background:url(Link ảnh) repeat top fixed;}

theo 360themes.com

05 Theme 2 mảnh Top – Bottom

body{background:#cc99ff;}

/* Màu nền của theme, nên thay đổi trùng với màu ảnh nền để tăng tính thẩm mỹ cho theme*/

#doc2, #doc{background:#cc99ff url(Link ảnh Top) no-repeat center top;}

/* mau nen cua theme va link hinh top-theme nay thay doi duoc*/

#bd{background:url(Link ảnh Bottom) no-repeat center bottom;}

Trang 6

người viết Vũ Nguyễn

06 Modun tên blog

Code xóa modun tên bài viết:

#blog_title{height:0px;}

Code chỉnh sửa phông và màu chữ:

#blog_title bd h2{ text-align:left;font-size:16px;color:#FFFFFF;} /*Chỉnh tên blog*/

#blog_title rc_bc bd{text-align:center;font-size:14px;color:#FFFFFF;} /*Chỉnh nội dung mô tả blog*/

người viết Changtraiiudoi@ymail.com

07 Modun blast

1.1 Đầu tiên bạn copy và paste code này vào để trong suốt nền Tên Blog và Blast :

/* Lam Trong Suot Nen Module Ten Blog va Module Blast */

#blog_title bd, #blast rc_bc

.bd{background-color:transparent;background-image:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rce-blue.png);}

/* link hinh nen cua blast nay co the thay doi*/

1.2 Tiếp theo là đoạn Code cho Blast biến thành màu xanh trong suốt:

/* Border cua Blast trong suot*/

#blast rc div {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcne-blue.png) repeat right bottom;} #blast rc {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcnw-blue.png) no-repeat left bottom;} #blast rc_bd div.rc_bc

no-{background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rce-blue.png) repeat-y right top;}

#blast rc_bd {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcwe-blue.png) y;} #blast rc_ft {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/blastsw-blue.png) no-repeat left bottom;} #blast rc_ft div

repeat-{background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/blastse-blue.png) no-repeat right bottom;}

/* Ket Thuc*/

2.1 Đẩy Khung lời chào (modul Blast) dịch xuống dưới một chút không bị chồng lên Khung tiêu đề (module Blog_title)

Đẩy Khung lời chào (modul Blast) dịch xuống dưới một chút không bị chồng lên Khung tiêu đề (module

Blog_title) Để làm như vậy, bạn có thể sử dụng code sau:

#blog_title ft {height:10px;background:transparent}

#blog_title rc_ft {height:10px}

#blog_title rc_ft div{height: 10px}

#blast rc{height:10px}

Trang 7

#blast rc div{height:10px}

Ảnh trước khi dùng code

Ảnh sau khi dùng code

Ps: Khuyến cáo nên dùng đủ 5 code trên, phòng trường hợp gây lỗi khi ta dùng một số code khác

người viết hienhoang74@yahoo.com

2.2 Thêm ảnh, tạo ảnh động trong Khung Blast

Đây là code thêm ảnh, tạo ảnh động trong Khung Blast:

#blast rc {background:transparent url(http://sg.yimg.com/i/vn/blog/i/blog/rc_nw.gif) left bottom no-repeat;}

no-#blast rc_bd rc_bc bd

{font-size:18px;border-top:none;height:65px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images/4pypson_th-1.gif) no-repeat right bottom;}

Ảnh sản phẩm của code

Ps: Các bạn thay 2 link ảnh cuối cùng trong code (2 đoạn code cuối), tức là code in nghiêng dưới đây bằng những bức ảnh khác, lưu ý đến font-size:16px; border-top:none; height: Chiều cao, độ dài ảnh, tính bằng px;

Trang 8

#blast rc_bd rc_bc

{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/dividers/5807a4tbnh2qdv.gif) repeat bottom left;}

người viết hienhoang74@yahoo.com

08 Chỉnh sửa chữ trong tiêu đề

Làm mất chữ trên tiêu đề và làm mất tiêu đề

#user_mod_1000X rc_bd rc_bc hd titlebar,

#user_mod_1000X rc_bd rc_bc hd titlebar h2{ height:0;font-size:0;}

Chỉ sử dụng font-size:0 nếu muốn mất chữ trên tiêu đề

Với 1 tiêu đề, các bạn có thể đặt phông chữ, chỉnh cỡ chữ, căn lề:

#user_mod_1000X rc_bd rc_bc hd titlebar hd

h2{font-size:13px;font-style:italic;color:#3395c8;text-align:center;}

Căn chứ trên tiêu đề:

.hd titlebar hd h2{text-align:center;}

Thay center bằng right hoặc left để căn phải, căn trái chữ

09 Đặt ảnh nền cho tiều đề modun

/*Ảnh nền của tiêu đề 10 modun tự tạo*/

#user_mod_10001 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10002 rc_bd rc_bc hd, hd titlebar hd,

#user_mod_10009 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10010 rc_bd rc_bc hd, hd titlebar hd {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/12-10-200810-03-57CH.png) repeat-x left top;height:28px;}

/*Ảnh nền của Tiêu đề mỗi modun có sẵn */

#mod-alist-fullDrag rc_bd rc_bc hd titlebar, #mod-edit-bar rc_bd rc_bc hd titlebar, #mod-alist-searchbox rc_bd rc_bc hd titlebar, #mod-alist-pagination rc_bd rc_bc hd titlebar, #rss_output rc_bd rc_bc hd titlebar, #mod-tagged-frd-article rc_bd rc_bc hd titlebar, #feature_link rc_bd rc_bc hd titlebar, #gallery_list rc_bd rc_bc hd titlebar, #gb_msg rc_bd rc_bc hd titlebar, #mod-friend-list-all rc_bd rc_bc hd titlebar,

#profile_info rc_bd rc_bc hd titlebar

Trang 9

{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/12-10-200810-03-57CH.png) repeat-x left top;height:28px;}

Các bạn có thể thay height là chiều cao của ảnh

10 Thay và thêm icon cho tiều đề modun

/* Bảng thống kê */

#statistic titlebar hd {background:url(Link ảnh) no-repeat left top;}

/* Bài mới đăng */

#article_new titlebar hd {background:url(Link ảnh) no-repeat left top;}

/* Ảnh trong blog */

#photo_highlight titlebar hd {background:url(Link ảnh) no-repeat left top;}

/* Ảnh trong bình luận mới nhất*/

.mod-comment-new titlebar hd {background:url(Link ảnh) no-repeat left top;}

Trang 10

Các bạn thay x từ 1 đến 10, x là tên thứ tự của modun Chiều cao của link ảnh là 26px, bạn có thể thêm

height:28px để chỉnh sửa lại chiều cao của tiêu đề, ví dụ như ta được code sau #search_module titlebar hd {background:url(Link ảnh) no-repeat left top;height:28px;}

11 Ảnh nền cho modun

/* Chèn hình nền cho cái module thông tin cá nhân bao gồm avartar */

#profile_highlight_module rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

/* Modun tâm trạng*/

#mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:url(Link ảnh) !important;}

/* Chèn hình nền cho module fiendlist */

#friendlist_module rc_bd bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Bài Mới */

#article_new rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Thư Mục Riêng*/

#folder rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Comment mới*/

#comment_new rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Thống Kê của plus*/

#statistic rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Blog yêu thích*/

#subscribe_highlight rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

/* Modun hình ảnh*/

#gallery_list rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

Trang 11

/* Chèn hình nền cho module Lịch*/

#calendar rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;}

/*Ảnh biểu diễn cho mod-relatives, và đây là code*/

Thay height là chiều cao của ảnh

người viết NoA

13 Thay icon tâm trạng

Cách thay đổi Icons trong Module Tâm trạng:

Như mọi người đã biết Icons tâm trạng trong 360 plus thực ra là 2 files ảnh ( kích thước ảnh lớn 50x600, ảnh nhỏ: 25x300) được đặt ở các vị trí có độ cao khác nhau để làm nền cho các khung tâm trạng Ảnh nhỏ làm nền khung tâm trạng trong bài viết và trên module Tâm trạng khi bài viết không được đánh dấu là "Quan trọng" Ảnh lớn làm nền khung tâm trạng trên module Tâm trạng khi bài viết được đánh dấu là "Quan trọng" Kích thước khung tâm trạng của ảnh nhỏ là 25x25, của ảnh lớn là 50x50 (đơn vị pixels) Nếu các bạn đã từng viết code CSS để trang trí lại trang 360 plus thì chắc hẳn biết rằng một số lệnh bị hạn chế không dùng được ở đây, một

Trang 12

trong những lệnh đó là WIDTH dùng để thay đổi chiều rộng, may mắn là lệnh HEIGHT dùng để thay đổi chiều cao vẫn dùng được

Dựa trên những đặc điểm trên, chúng ta có thể thay đổi được như sau:

- Thay đổi 2 file ảnh để có những hình khác nhau (như mọi người vẫn làm)

- Thay đổi chiều cao của khung nền để ảnh tâm trạng có thể cao hơn không bị hạn chế là 50 px nữa Điều này cho phép bạn chọn được nhiều ảnh đẹp hơn và dễ dàng hơn trong việc thiết kế file ảnh (Ví dụ minh họa: trang blog hoa hậu Bạc Liêu)

- Không nhất thiết phải dùng 2 files ảnh có kích thước cố định 25x300 và 50x600; bạn có thể dùng 12 file ảnh cho 12 icons tâm trạng khác nhau (có chiều rộng không quá 50, chiều cao thoải mái) Điều này cho phép bạn không mất công thiết kế file ảnh nếu bạn không thạo, ngoài ra bạn có thể chọn file ảnh động cho Icons tâm trạng của mình (ví dụ minh họa: trang blog của tôi)

Dưới đây là code CSS minh họa cho từng phần:

- Thay đổi chiều cao:

#mod_lifeline list td

a.blog_emo_25_1{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotionicons3s.gif) no-repeat 0 0;}

a.blog_emo_25_2{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotionicons3s.gif) no-repeat -25px 0;}

(tương tự cho các khung tâm trạng nhỏ "không Quan trọng" còn lại)

a.blog_emo_50_1{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotionicons3copy.gif) no-repeat 0 0;}

a.blog_emo_50_2{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotionicons3copy.gif) no-repeat -50px 0;}

a.blog_emo_50_3{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotionicons3copy.gif) no-repeat -100px 0;}

tương tự cho các khung tâm trạng lớn "Quan trọng" còn lại

#mod_lifeline list table {height:90px;}

-Dùng từng file ảnh cho từng tâm trạng:

emoticon-0027.gif) no-repeat 0 0;}

a.blog_emo_50_1{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4-#mod_lifeline list td

a.blog_emo_50_2{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4-#mod_lifeline list td

Trang 13

a.blog_emo_50_3{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4- tương tự cho các khung còn lại Chú ý trình tự các khung tâm trạng là:

1 Hớn hở; 2 Ngạc nhiên; 3 Hài lòng; 4 Buồn lắm; 5 Cô đơn; 6 Giả nai; 7 Bệnh; 8 Vui vẻ; 9 Khoái chí; 10 Mệt mỏi; 11 Thất vọng; 12 Giận dữ;

Người viết hienhoang74@yahoo.com

/* Code thay đổi icon tâm trạng, changtraiiudoi@ymail.com lấy từ blog: Simplex, các bạn có thể copy và dán luôn*/

a.blog_emo_25_1{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09.png) no-repeat 0 0;}

a.blog_emo_25_2{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09.png) no-repeat 0 -25px;}

a.blog_emo_50_1{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09-50.png) no-repeat 0 0;}

a.blog_emo_50_2{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09-50.png) no-repeat 0 -50px;}

Trang 14

.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:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09.png) repeat;}

/* hết*/

14 Hình nền tiêu đề bài viết

Code:

Trang 15

.mod-alist-full main-hd{background:url(http://i289.photobucket.com/albums/ll215/rainnysunday/sexy35.jpg) fixed 50% 30%;}

người viết Uyen My

15 Hình nền Modun bài viết

Code:

.hd titlebar hd h2{text-align:center;}

.mod-alist-full main-bd{background:url(LINK HINH);}

Trang 16

người viết Uyen My

16 Code toolbar phần comment

.rte_toolbar {background:#d7d7d7 url(link Hinh) repeat-x top;border-left:1px solid #0448f6;border-top:1px solid

#0448f6;border-right:1px solid #0448f6;height:89px;}

/*chieu cao cua hinh*/

người viết Nhóc khỉ blog

17 Ảnh nền tổng số trang, cuối modun bài viết

.mod-comment-new pagination, mod-alist-summary pagination, mod-alist-full

.pagination{background:transparent url(Link ảnh);}

18 Code làm hình nền trang comment

.cmt-mod-alist #comments-listing extend-hd {background:transparent;}

.cmt-mod-alist #comments-listing extend-bd alist-comment,

.mod-alist-full alist-comment ul {background:transparent;}

.mod-alist-full alist-comment li {background:#ffffee

url(http://i289.photobucket.com/albums/ll215/rainnysunday/background.jpg) no-repeat top left;border-top:2px

inset #ffffff;border-left:2px inset #ffffff;border-right:2px inset #ffffff;}

Tiêu đề	Tài liệu Thiết kế yahooplus từ cơ bản tới nâng cao pdf
Tác giả	Changtraiiudoi, HaTim
Trường học	Đại Học Công Nghệ Thông Tin Và Truyền Thông Thăng Long
Chuyên ngành	Thiết Kế Web
Thể loại	Tài liệu hướng dẫn
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	32
Dung lượng	2,68 MB