Chèn Breadcrumbs theo phong cách Google vào trong Blogspot

Cùng với nhiều tính năng mà một website cần có, thì breadcrumb luôn luôn là sự lựa chọn cần thiết cho việc xây dựng trang web thân thiện hơn với người dùng Thủ thuật tin học . Vì nó giúp khách viếng thăm blog của bạn dễ dàng điều hướng đến nội dung mà họ muốn tới. Trước đây mình đã giới thiệu bài viết Từng bước tạo Breadcumbs cho trang blogspot . Hôm nay mình sẽ giới thiệu thêm cho việc hiển thị breadcrumb trên blog của các bạn, từ đó các bạn sẽ có thêm nhiều lựa chọn hơn cho blog của mình.

1 Đăng nhập vào  Blogger Dashboard. 2 Vào Template -> Edit HTML 3 Nhấn Ctrl + F rồi tìm đoạn code sau :

Sau đó copy đoạn code bên dưới và dán vào ngay sau đoạn code tìm thấy.

4 Tiếp tục tìm đoạn code sau :

Rồi copy đoạn code bên dưới và dán bên trên nó :

5  Tìm  ]]> rồi copy và dán đoạn code bên dưới bên trên nó.

.breadcrumbs a -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-position: 100% 0; background-repeat: no-repeat; border-color: #D9D9D9; border-image: none; border-style: solid; border-width: 1px 0 1px 1px; color: #666666; display: block; float: left; font-size: 95%; padding: 7px 16px 7px 19px; position: relative; text-decoration: none; z-index: 1; .breadcrumbs a:hover border-bottom-color: #C4C4C4; border-top-color: #C4C4C4; box-shadow: 0 2px 2px #E8E8E8; color: #333333; .breadcrumbs a:first-child, .breadcrumbs a:first-child:hover border-top-left-radius: 5px; z-index: 30 !important; .breadcrumbs margin: 0px 0px 15px 0px; font-size:95%; Thế là xong, bây giờ các bạn có thể tự kiểm tra kết quả . Mình hy vọng là các bạn sẽ thích với phong cách breadcrumb như thế này.

Chúc các bạn thành công

Xem Thêm :

• Làm đẹp da như Á hậu Thể thao thế giới Phạm Hương

Share on Google Plus

About thuthuattinhoc

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.