Trang trí phần trên của blog plus

[nobita]

Trước mọi người chỉ chú trọng đến thay đổi mọi vật dụng trong ngôi nhà 360 plus của chúng ta....chắc ít bạn để ý đến là "mái nhà" cũng có thể trang trí theo phong cách riêng của mỗi người
Cũng ko có ji là cao siêu.....ở đây chỉ có 1 số đoạn code làm trong suốt hình nền của "mái nhà" chúng ta (tạm gọi là mái nhà nhá ...^^...ko bik gọi là ji nữa ) đây chỉ là cơ bản thui...tùy theo phong cách mỗi người mà trang trí sao cho đẹp là đc ùi



Phần 1: Làm Trong Suốt Các Đường Viền
#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{width:100%;height:4px;background:transparent;}
#blog_masshead .bd{clear:both;padding:6px 0 0 5px;height:30px;
margin:3px 2px 0 2px !important;*margin:0px 2px 0 2px;background:transparent;}

Đoạn code trên để làm cho các viền trong suốt .....(ở đây Khỉ cho nó trong suốt còn bạn nào muốn chèn ảnh khác zô cũng đc ^^ càng hay )

Phần 2:Thay Đổi Thanh Công Cụ


#blog_masshead .menu.mr a{background-image:url(http://files.myopera.com/n2-k/360plus/masshead-menu-2.png);}
#blog_masshead .menu .rc_w{float:left;width:5px;height:27px;background: url(http://files.myopera.com/n2-k/360plu...ead-menu-1.png) no-repeat 0 0;}
#blog_masshead .menu .rc_e{float:left;width:5px;height:27px;background: url(http://files.myopera.com/n2-k/360plu...ead-menu-1.png) no-repeat right top;}
#blog_masshead .menu.ml a{background:url(http://files.myopera.com/n2-k/360plu...ead-menu-1.png) no-repeat;}

Ở đây Khỉ đã giảm Opacity của thanh công cụ xuống để cho nó trong suốt mờ mờ ^^ ( bạn có thể tự vẽ 1 thanh công cụ cho riêng mình )

Phần 3: Thay Đổi Button Tìm kiếm
#blog_masshead .bd form .btn{border:none;width:60px;height:77px;background :url(Link Button) no-repeat 0 0;cursorointer;}

Sau khi tìm đc 1 button tìm kiếm vừa ý khi thay link các bạn nhớ thay luôn kick thước width + height đúng với link button nha

Phần 4: Thay Đổi Background và làm chữ nhấp nháy
#blog_masshead{font-size:12px;color:#ccc;background:url(link hình) repeat-x 0 5px;height:Xpx;}
#blog_masshead a{color:A;text-decoration:blink;}

X : Chiều cao của ảnh ...........
A: Mã Màu Chữ ......

Lưu Ý : bạn nên xếp code theo thứ tự mình đã viết nhá..mất công bị đè hình lên nhau tùm lum á

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



Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách:
/*Blog yêu thích*/

#subscribe_highlight rc_bd .rc_bc .bd ul li {background:url(http://i461.photobucket.com/albums/q...g/d71bec6e.jpg) no-repeat center left;border-top:1px dotted #D1CFCF;}

/*Thư mục*/

#folder rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;}

/*Bình luận mới nhất*/

#comment_new rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;}

/* Modun bạn bè*/

#friendlist_module rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;}

/*Bài viết mới nhất*/

#article_new rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;}

/* Thống kê */

#statistic rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;}

/*Blog về tôi*/

#mod-tagged-frd-article .rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;}




ảnh trên biểu diễn minh họa cho .mod-relatives, code là :
.mod-relatives .bd ul li {background:transparent url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;}


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

Code này sẽ giúp bạn thu ngắn modun tự tạo chỉ để nó hiện ra 1 chiều dài nhất định, khi di chuột vào modun đó, nó sẽ tự động kéo dài modun đó ra. Chúng ta có thể thấy ngay một ứng dụng rất hay, đó là tạo 1 list nhạc rất dài ở modun tự tạo, nhưng chúng ta chỉ để nó hiện ra 1 chiều dài nhất định, khi người nghe để chuột vào modun đó, nó sẽ tự động kép dài và hiện thị đầy đủ nội modun đó.

Code css:
#user_mod_1000X .rc_bd .rc_bc .bd .user-mod-holder
{height:200px;}

#user_mod_1000X .rc_bd .rc_bc .bd .user-mod-holder:hover
{height:auto;}


X là giá trị của modun tự tạo từ 1 đến 10.

200px là giá trị bạn muốn nó hiện thị, chúng ta có thể tùy ý thay đổi.



Hiệu ứng thu nhỏ chữ và tự động phóng to ảnh khi để chuột vào

Code giúp thu nhỏ chữ và ảnh. Khi di chuột đến, chữ và ảnh sẽ tự động chở về đúng kích cỡ.

Để làm được như vậy, bước đầu tiên, ta copy code này, dán vào css

• Code này dán vào css để sử dụng được hiệu ứng phóng to ảnh, thu nhỏ chữ:
#blog_quote{font-size:5px;font-style:italic;color:#FF99FF;background:#000066;}#bl og_quote:hover {font-size:12px;font-weight:bold;font-style:normal;color:#CC99AA;background:transparent; }#blog_img img {height:100px;}#blog_img img:hover {height:100%;}

• Code này dán vào bài viết để tạo hiệu ứng tự động thu nhỏ chữ trong những bài viết dài:



• Để sử dụng hiệu ứng này cho bức ảnh ta dùng code:

[tiboy8x_adsl]

up ủng hộ