Learn Blog Design, Web Design, Tips SEO and Make money with HoaiThanh: Thay nút Home, thêm bạn và blog yêu thích cho module profile

Thay nút Home, thêm bạn và blog yêu thích cho module profile - Yahoo Plus

Thứ Sáu, 7 tháng 5, 2010 , Posted by Hoài Thanh at 13:59

Có thể các bạn thấy nút Home của Beta Plus hơi đơn điệu. Ta sẽ thay bộ áo mới cho nó nhé Sử dụng code sau để thay nút home

Mã:

.backhome .cta-ss {background:transparent url(http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Home/1.png) no-repeat center !important;height:50px;}/*olympia41124*/
.backhome .cta-ss strong{background:transparent !important;}/*vietnam360plus.com*/
.backhome .cta-ss em, .backhome .cta-ss strong{display:none;} /*olympia41124*/

Trong đó bạn có thể thay http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Home/1.png  bằng link hình nút home của bạn và 50px là chiều cao của nút home.

Demo :

Sau đây là một số hình nút home cho các bạn tham khảo

   >>>  http://i118.photobucket.com/albums/o...67il8olik7.jpg

   >>>  http://i118.photobucket.com/albums/o...756yt68585.png

   >>>  http://i118.photobucket.com/albums/o.../7jkk7897o.jpg

   >>>  http://i118.photobucket.com/albums/o...79imjuk6uk.jpg

   >>>  http://i118.photobucket.com/albums/o.../65hngu6mg.jpg

   >>>  http://i118.photobucket.com/albums/o.../654j48346.png

   >>>  http://i118.photobucket.com/albums/o...s/87i78878.jpg

   >>>  http://i118.photobucket.com/albums/o.../jgfk769jn.jpg

   >>>  http://i118.photobucket.com/albums/o...lus/Home/6.gif

   >>>  http://i118.photobucket.com/albums/o...lus/Home/7.png

   >>>  http://i118.photobucket.com/albums/o...4hjghj5787.jpg

   >>>  http://i118.photobucket.com/albums/o...6jy6685787.gif

   >>>  http://i118.photobucket.com/albums/o...fjhg9o789k.jpg

   >>> http://i118.photobucket.com/albums/o...u6958uj5i5.jpg

   >>>  http://i118.photobucket.com/albums/o...46u6y5eyht.jpg

Ngoài ra nếu muốn hiệu ứng thay nút home khi rê chuột vào nút home thì  dùng code sau

Mã:

.backhome .cta-ss:hover{background:transparent url(http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Home/2.png) no-repeat center !important;height:50px;}/*olympia41124*/

Thay link http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Home/2.png bằng link hình bạn muốn hiện ra khi rê chuột vào

Tương tự ra sẽ có code cho nút thêm bạn và nút blog yêu thích

Code thay nút thêm bạn

Quote:

               .addfrdbtn .cta-ss {background:transparent url(Link hình) no-repeat  center!important;height:50px;}/*olympia41124*/
.addfrdbtn .cta-ss strong{background:transparent  !important;}/*vietnam360plus.com*/
.addfrdbtn .cta-ss strong{display:none;} /*olympia41124*/

Code hiệu ứng khi rê chuột vào nút thêm bạn

Quote:

.addfrdbtn .cta-ss:hover {background:transparent url(Link hình) no-repeat center!important;height:50px;}/*olympia41124*/

Code thay nút blog yêu thích

Quote:

               .subscribebtn .cta-ss {background:transparent url(Link hình)  no-repeat center!important;height:50px;}/*olympia41124*/
.subscribebtn .cta-ss strong{background:transparent  !important;}/*vietnam360Plus.com*/
.subscribebtn .cta-ss strong{display:none;} /*olympia41124*/

Code hiệu ứng khi rê chuột vào nút blog yêu thích

Quote:

.subscribebtn .cta-ss:hover {background:transparent url(Link hình) no-repeat center!important;height:50px;}/*olympia41124*/

Lưu ý: Trong các code trên height:50px là quy định chiều cao tương ứng của hình, bạn có thể thay 50 bằng chỉ số chiều cao của hình.
Chúc thành công!
(Olimpia41124)