Videos recentes

Người đăng: baby vào lúc 07:33

Thứ Tư, 16 tháng 5, 2012


Chào mọi người
Blog mình dạo này hơi chán bài viết chả có gì lạ, toàn đi đi lại lại mấy cái menu menu nọt có lẽ mọi người cũng chán tận răng rồi. :D. Vì thế hôm nay mình sực nhớ ra là trong blogspot còn nhiều thứ có thể tuỳ biến mà bản thân của mình có thể làm được. vì vậy mình xin giới thiệu với các bạn v1 tuỳ biến cái Nhãn của blogspot. Ai cũng biết Nhãn trong blogspot nhìn thì đúng là không được cute cho lắm :D. Vì vậy chúng ta nên làm gì đó cho nó được lạ lạ 1 tý. để cho blog của bạn trở nên sinh động và khác biệt hơn.

Label blogspot

Như trên hình các bạn cũng thấy, tuy màu sắc hơi không được chuẩn cho lắm nhưng nó phù hợp với phông nên tối và .. nó hợp với mình =)). Các bạn xem Live Demo để thấy rõ hiệu ứng của nó nhá.


Các bạn xem nếu thấy có hứng thú thì hãy thử với blog của mình xem sao :D. Và sau đây là hướng dẫn các bạn chèn code. À quên các bạn nào đã có sẵn tiện ích Nhãn rồi thì nên xoá tiện ích nhãn đó đi. Chèn code xong tạo lại mới được. Chứ nếu có rồi tạo thêm cái nữa sai ID nó không hiển thị đâu.

► Bước 1:
Đầu tiên đương nhiên vẫn là Login vào blogger.com rồi sau đó tới phần Thiết  kế ► Chỉnh sửa HTML sau đó thì các bạn tìm đoạn code như sau ► ]]></b:skin>. ► chèn đoạn code bên dưới vào bên trên Code vừa tìm được ► ]]></b:skin>.


/* TUY BIEN LABEL - CIA */
#Label1 {
 width: 280px;
 border: 0px solid #333;
 overflow: auto;
 padding-left: 0px;
}

#Label1 ul {
 display: inline;
 margin-left: 0px;
}
#Label1 ul li {
 list-style: none;
 margin-left: 0px;
 background: #555353;
 border: 1px solid #fff;
 padding: 4px;
 padding-left: 10px;

-webkit-transition:all 3.5s ease;
 -moz-transition:all 3.5s ease;
 -o-transition:all 3.5s ease;
 transition:all 3.5s ease;
}

#Label1 ul li:hover {
 background: #00A2E8;
 border : 1px solid #fff;
 border-right: 10px solid #fff;
-webkit-transition:all 1.5s ease;
 -moz-transition:all 1.5s ease;
 -o-transition:all 1.5s ease;
 transition:all 1.5s ease;
}

#Label1 ul li a {
 color: #fff;
 text-decoration: none;
 font-family: Comic Sans MS;
 font-size: 16px;
 text-shadow: 0px 0px 1px #fff;
 -webkit-transition: padding 1.5s ease-out;
    -moz-transition: padding 1.5s ease-out;
    -o-transition: padding 1.5s ease-out;
 transition:all 1.5s ease;
}


#Label1 ul li a:hover {
 color: yellow;
 text-decoration: none;
 padding-left: 15px;
 -webkit-transition: padding 0.5s ease-out;
    -moz-transition: padding 0.5s ease-out;
    -o-transition: padding 0.5s ease-out;
 transition:all 0.5s ease;
}


► Tuỳ vào sở thích của mỗi người các bạn có thể tuỳ chỉnh sao cho nó đẹp hơn cái đó thì tuỳ vào thẩm mĩ của mỗi người nha..

► Bước 2:
Các bạn vào trong phần ► Bố cục ► Tạo 1 tiện ích Nhãn
Nhãn Blogspot

Vào kéo vào chỗ nào bạn muốn hiển thị nha.
Chú ý code trên mình đã viết code để hiện thị ở Sidebar 
Chúc các bạn thành công!

Tuỳ biến Nhãn trong Blogspot để đẹp hơn V1

Người đăng: baby vào lúc 18:30

Thứ Bảy, 12 tháng 5, 2012


Programming © 2012