Tổng hợp toàn bộ Code từ cơ bản đến nâng cao cho blog

 18 - 05 - 2012

Tổng hợp toàn bộ Code từ cơ bản đến nâng cao cho blog 

http://blog.yahoo.com/_VLZKX72ZBUYPTRUG2UKUWSW7OI/articles/212555

Lời nói đầu:
  Để tránh các bạn tìm code trong blog của mình khó khăn mình xin tổng hợp 98% code mình đang dùng cho các bạn, vì đây chỉ là phần cứng nên blog của bạn có đẹp hay ko là tài hoa khéo chọn của các bạn!

p/s: chỗ ghi link hình là bạn thay link địa chỉ ảnh
p/s: chỗ ghi X là chiều rộng ảnh hay là size chữ
       size chữ các bạn nên chọn từ 16-20 thôi.
p/s Y là chiều cao ảnh mà bạn vừa đặt vào.

1/ Thay hình nền

<style> html {background-image:url(Link_hình_nền);} html {background-position:center top;background-repeat:repeat;} </style>

2/ Sửa Nóc Nhà:

Xóa:

<style> #asb-nav-update-ctn{display:none;} #asb-nav-logo{display:none;} #asb-header{font-size:0px;} #asb-uh{border:none;} #hd{border-bottom:0;} #asb-uh, #asb-nav, #asb-nav-logo {background-color:transparent;} #asb-nav-search{display:none;} #asb-nav .divider {display:none;} #asb-nav-search button{height:0px;width:0px;font-size:0px;} #asb-nav-search span.search-primary, #asb-nav-search span.search-secondary{background:transparent;} </style>

Trong Suốt:

<style> #asb-nav-update-ctn{display:none;} #asb-nav-logo{display:none;} #asb-uh{border:none;} #hd{border-bottom:0;} #asb-uh, #asb-nav, #asb-nav-logo {background-color:transparent;} #asb-nav-search{display:none;} #asb-nav .divider {display:none;} #asb-nav-search button{height:0px;width:0px;font-size:0px;} #asb-nav-search span.search-primary, #asb-nav-search span.search-secondary{background:transparent;} </style>

Thay nền:

<style> #asb-nav-logo{display:none;} #asb-nav-search{display:none;} #asb-uh, #asb-nav {border:none;height:14px;} #asb-uh, #asb-nav {background:url(Link hình nền) repeat;} #asb-nav li.nav-item a.nav-link{color:#000000;font-size:Xpx;} </style>

3/ Xóa tiêu đề và mô tả blog

<style> Blog-title{display:none} Blog-description{display:none} </style>

4/ Thay banner:

<style> #asb-header-ctn{background:url(Link banner) repeat;height:Ypx;} #asb-header-ctn img{height:0px;width:0px;} </style>

5/ Thay nền “Menu”

<style> #asb-menu li.first{border:0px;background:url(Link hình nền) no-repeat;color:#mã màu chữ;} #asb-menu li.current a{border:0px;background:url(Link hình nền) no-repeat;color:#mã màu chữ;} #asb-menu li{border:0px;background:url(Link hình nền) no-repeat;color:#mã màu chữ;}

6/ Xóa bỏ phần bản quyền.

<style> #ft {font-size:0px;border-top:0px;padding:0 0 0 0;background:url(link hình nền) repeat center;height:Ypx;width:Xpx;margin-top:30px;} #ft p {margin-bottom:0px;} #ft li .divider {display:none;} </style>

7/ Thay màu, font, size chữ:

Lưu ý trước: font-family vd như arial, time new roman,…. Bạn có thể vào word chọn

Kiểu font: italic hay bold nếu ko muốn thì bỏ phần font-style, nếu muốn vừa đậm vừa nghiêng thì điền italic,bold

Thay cho toàn blog:

<style> body{color:#mã màu;font-family:mã phông;font-style:kiểu phông;} </style>

Sidebar ( module phụ)

<style> .yui-b .sidebar{;font-size:Xpx;color:#Mã màu;} </style>

Màu link:

<style>a{color:#Mã_màu_link;}</style>

8/ Nút home – Avatar – Status

#w-profile-name{background:url(Link  ảnh nút home) center no-repeat;height:Ypx;text-decoration:blink;} #w-profile-card .status{border-color:#800517;font-size:Xpx;} #w-profile-card .status .text{color:#Mã_màu_chữ;height:Chiều_cao_khung_avatarpx;} #w-profile-card .status .text {color:#Mã_màu_chữ;text-decoration:blink;} #w-profile-card .status {} #w-profile-status .status-bubble {background:url(http://i383.photobucket.com/albums/oo274/phuongle_bucket/ThemBlog/stat.png);} #w-profile-card .status {background:url(link_ảnh động) no-repeat;} #w-profile-img-root{background:url(Link avatar) center no-repeat;height:Ypx;} #w-profile-img-ctn img{height:0px;width:0px;}

9/ Trong suốt blog

<style> #article-list, pagination-bottom, #emotion-carousel, #article-single.bd, #article-supplement, #article-top-nav, #article-bottom-nav, .yui-b .sidebar{background:url(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png) repeat;} </style>

Nếu muốn thay = màu thì các bạn xóa chữ url() repeat thay bằng #mã màu

Muốn thay nền riêng cho từng module thì tách ra cấu trúc {background:url….} giữ nguyên.

10/ Thay nền cho tiêu đề module

<style> #widget-externalSource h3, #widget-statistic h3, #widget-category h3, #widget-recentVisitor h3, #widget-recentPost h3, #widget-followingList h3, #widget-recentComment h3{background:transparent url(Link hình nền) no-repeat center;text-align:center;} </style>

Muốn thay nền riêng cho từng module thì tách ra cấu trúc {background:url….} giữ nguyên.

11/ Thay toàn bộ icon cho các đề mục

<style> #article-listing-toggle .ico{background:url(Link  icon) no-repeat center;} </style>             <style type="text/css">/*ins ion */ #widget-recentPost .bd ul li {list-style-image:url(link icon);} #widget-category .bd ul li.clrfix a .ico{background:url(link icon) no-repeat;} #widget-recentComment .bd ul.force-wrap li{list-style-image:url(link icon);} </style> <style> #article-listing .bd .category .ico {background:url(link icon) no-repeat;width:Xpx;height:Ypx;} #article-single .bd .category .ico{background:url(Link icon) no-repeat;width:Xpx;height:Ypx;}

12/ Tạo hiệu ứng động,thay màu tên module “khách mới vào”

<style> #widget-recentVisitor .bd {background:url(link ảnh động);border-color:#Mã_màu_viền;border-style:ridge;border-width:1.5px;} #widget-recentVisitor .bd .nickname{color:#Mã_màu_chữ;} </style>

13/ Tạo hiệu ứng động,thay màu tên module “blog yêu thích”

<style. #widget-followingList .bd {background:url(Link ảnh động);border-color:#Mã_màu_viền;border-style:ridge;border-width:1.5px;} #widget-followingList .bd  .nickname{color:# Mã_màu_chữ;} </style>

14/ Thay nền ô comment

<style> #comment-form{background:transparent url(Link_hình_nền);height:180;} </style>

15/ Thay hình mặt cười trong ô comment

<style> .emoticon{display:block;height:Ypx;width:Xpx;margin-bottom:3px;cursor:pointer;background:url("Link icon");display:inline-block;zoom:1;float:left;margin-left:7px;} </style>

16/ Thay màu chữ, đổi hình nền ô khách comment

<style> #article-supplement{ background:url(Link hình nền) repeat;color:#Mã _màu_chữ;font-size:Xpx;} </style>

17/ Thay font,size,nền ô trả lời comment

<style> #comment-list .comment-reply {background:url(Link hình nền);font-style:italic;color:#Mã_màu_chữ;font-family:Mã_phông;font-size:Xpx;font-weight:normal;text-align:justify;letter-spacing:1.1pt;} </style>

18/ Thay nền ô tâm trạng và post-top

<style> #article-top-nav {background:url(Link ảnh post-top) no-repeat;height:Ypx;} #emotion-carousel {background:url(link nền ô tâm trạng) no-repeat;height:Ypx;display:none;} </style>

19/ Xóa cập nhật ngày viết bài, giờ khách comment

<style> #widget-recentPost li time{font-size:0px;} </style>  <style>  #widget-recentComment li time{font-size:0px;} </style>

20/ Thay nền module phía trên ô tâm trạng

<style> #article-listing .article-listing-hd {background:url(Link ảnh) no-repeat center;height:Ypx;} </style>

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

<style> #article-listing .article{border-top:hidden;background:url(Link ảnh ) no-repeat bottom center;} </style>

22/ Đổi màu chữ khi đã click vào link

<style> a:visited{color:#Mã_màu_chữ;text-decoration:none;} </style>

23/ Tạo hiệu ứng khi dê chuột vào link

<style> a:hover{text-decoration:none;color:#82FA58;font-weight:bold;FONT-SIZE:15px;FONT-WEIGHT:bold;text-shadow:2px 2px 2px #f1cdf8;background-image:url(Link ảnh động);} </style>

24/ Hiện ảnh khi dê chuột vào bài viết

<style> #article-listing .bd:hover {background:url(link ảnh) no-repeat;} </style>

25/ Đổi màu chữ, làm nhấp nháy tiêu đề bài viết

<style> #article-single .article .title{font-size:Xpx;text-align:center;color:#Mã_màu_chữ;text-decoration:blink;} #article-list .article .title{font-size:Xpx;text-align:center;color:#Mã_màu_chữ;text-decoration:blink;} </style>

26/ Tạo tuyết rơi toàn blog

<style> body{background:transparent url(http://www.fileden.com/files/2012/4/1/3286038/aaaaaaaaaaa.gif) top center fixed;} </style>

28/ Tạo nền cho các module

<style>#widget-statistic .bd , #widget-recentPost .bd , #widget-category .bd {background:url(Link ảnh nền);}</style>

29/Tạo ảnh nền module nguồn bên ngoài

<style> #widget-externalSource {background:url(Link Ảnh nền); #MÃ MÀU CHỮ;} #widget-external source  .bd {background:url(Link ảnh nền); } </style>

30/ Tạo viền cho blog

<style>.cover-container, #article-top-nav, #article-list, .cover-template, #pagination-bottom, .sidebar, #article-single, #article-listing, #article-supplement, #comment-form, #article-supplement.new-style-supplement, #comment-form, .photos-page .bd, .photos-page .ft, .albums-page .bd, .albums-page .ft, #article-single .article .title, #article-list .article .title, #article-single .actions, #photo-list-header{border-color:#Mã_màu_viền;border-style:kiểu_viền;border-width:Xpx;}</style>

Boder style gồm: 1          none 2          hidden 3          dotted 4          dashed 5          solid 6          double 7          groove 8          ridge 9          inset 10        outset

Boder-width:1>4 1          thin 2          medium 3          thick 4          length

Kho icon
Web lấy mã màu trực tuyến
Chèn nhạc
Hỗ trợ sửa lỗi ko hiển thị flash



Vì bài viết rất dài, mình ngại sửa có gì các bạn để lại comment nha!
Chi tiết các bạn xem ở các bài viết khác.

>>>>>>>>>>>>>. Don't copy this Entry  <<<<<<<<<<<<<<<

Blog.yahoo.com