Tiện ích Nhãn Blogger không đẹp. Và thẻ đám mây là trường học cũ. Và xấu xí. Đặc biệt là các kiểu mặc định với các phông chữ có kích thước khác nhau. Nó chỉ kết thúc một blog lớn các từ mà độc giả của bạn bỏ qua.
Nhưng có một phần có tổ chức của các liên kết đến các danh mục blog của bạn trong thanh bên là một cách tuyệt vời để giữ cho nội dung cũ của bạn tồn tại và có liên quan. Và để giữ cho độc giả của bạn đọc!
Vì vậy, hãy cùng học cách tùy chỉnh Tiện ích Nhãn Blogger!
Tại sao bạn nên sử dụng tiện ích nhãn Blogger
Nhiều khách hàng của tôi bỏ qua Tiện ích Nhãn Blogger. Họ làm điều này vì một vài lý do.
Lý do đầu tiên là vì Nhãn (Danh mục) của họ nằm ngoài tầm kiểm soát. Kỷ lục mọi thời đại mà tôi đã thấy cho đến nay là 729 Nhãn trên một blog. Đó sẽ là một mớ hỗn độn lớn trong thanh bên (mặc dù, bạn có thể chọn chỉ hiển thị một vài Nhãn trong tiện ích của mình, nhưng nhiều hơn về điều đó sau).
729 blog Nhãn / Thể loại. Điều đó không đúng.
* Nếu bạn không thể kiểm soát Nhãn Blogger của bạn ngoài tầm kiểm soát và bạn muốn biết thêm về cách sử dụng blog Nhãn và Danh mục phù hợp, hãy xem bài đăng của tôi về Cách thức phù hợp để tổ chức Blog của bạn với Danh mục và Nhãn.
Một lý do khác là tiện ích Nhãn Blogger chỉ rất hấp dẫn trên nhiều mẫu. Vì vậy, tôi muốn chia sẻ một hướng dẫn nhanh về cách chỉnh sửa các kiểu của tiện ích Nhãn Nhãn của bạn để làm cho nó trông hiện đại hơn.
Tôi sẽ chia sẻ 4 tùy chọn thiết kế khác nhau để tùy chỉnh Tiện ích Nhãn Blogger cho bạn lựa chọn.
Trong các hướng dẫn trong tương lai, tôi cũng sẽ chia sẻ một cách nhanh chóng và dễ dàng để thêm một menu tùy chỉnh vào thanh bên và cách thêm các nút Danh mục hình ảnh vào Blogger một cách dễ dàng. Một số blogger có thể nó khó hơn mức cần thiết.
Những gì chúng tôi sẽ làm việc với
Tôi sẽ làm việc trên một blog thử nghiệm với một trong các mẫu Blogger của chúng tôi, thủ thuật lập trình blogger.
Tiện ích nhãn Blogger - kiểu danh sách mặc định
Nhưng vì chúng tôi đã tùy chỉnh một trong các tiện ích Blogger gốc, mã này sẽ hoạt động trên hầu hết mọi mẫu *. Miễn là người thiết kế mẫu của bạn đã không sử dụng quá nhiều thẻ quan trọng trong CSS của họ.* Lưu ý: Mã này không hoạt động với các chủ đề mặc định mới nhất của Blogger.com (Contempo, Soho, Emporio, Đáng chú ý). Mã của họ khác biệt đáng kể so với hầu hết các chủ đề Blogger.com cổ điển và cao cấp.
Tiện ích nhãn Blogger - kiểu đám mây mặc định
Tôi thực sự đã loại bỏ tất cả các kiểu dáng Nhãn để chúng tôi bắt đầu từ mặc định.
Tiện ích Nhãn Blogger có 2 tùy chọn kiểu: danh sách và đám mây. Đây là kiểu dáng mặc định trên mẫu Phoebe.
Những gì chúng tôi sẽ tạo ra
Tôi đã thiết kế 4 phong cách cho bạn chơi.
Tất cả điều này được thực hiện với một chút CSS, bạn có thể thêm trực tiếp vào mẫu của mình hoặc trong cửa sổ Thêm Thêm CSS CSS trong Trình thiết kế mẫu. Hãy chắc chắn rằng bạn lấy tất cả mã cho lựa chọn của bạn từ cửa sổ mã.
Mã được chú thích rõ ràng để bạn có thể thay đổi màu sắc và kích thước phông chữ để phù hợp với sở thích của bạn.
Đây là một cái nhìn về 4 phong cách của tiện ích nhãn blogger:
Phong cách 1 - Người bắt chước
Mã cho kiểu này sẽ cung cấp cho bạn một danh sách Nhãn kiểu đơn giản, danh sách với văn bản được căn giữa trong thanh bên (thay vì căn lề trái).
Bạn cũng có thể thêm một chút khoảng trắng giữa các liên kết và chỉ định màu sắc và màu di chuột của chúng để kiểm soát nhiều hơn.
Lưu ý: Kiểu này sử dụng tiện ích Danh sách phong cách danh sách, vì vậy hãy đảm bảo tiện ích Nhãn của bạn được đặt thành Danh sách Danh mục trong cài đặt Hiển thị.
Phong cách này không mất nhiều mã. Nhưng nó mang lại cho bạn một phong cách tối giản, tốt đẹp.
Tôi đã thêm nhận xét bên cạnh mã để bạn có thể tùy chỉnh nó theo sở thích của mình. Bạn thậm chí có thể đặt họ phông chữ, cỡ chữ và hơn thế nữa.
Sao chép và dán mã này trực tiếp vào mã chủ đề của bạn hoặc trong hộp Thêm Thêm CSS CSS trong Trình thiết kế mẫu (Chủ đề> Tùy chỉnh> Thêm CSS).
* Xin lưu ý khi chỉnh sửa mã, đảm bảo bạn chỉnh sửa mã trong chương trình soạn thảo văn bản đơn giản như Chỉnh sửa văn bản hoặc Bảng ghi chú
STYLE 1 CODE:
Kiểu 2 - Cho tôi chút màu
.Label ul {
text-align: center; /* center aligns text in sidebar */
}
.Label ul li {
margin: 7px 0; /* Adds space above and below each link. Change the 7 to adjust your spacing */
}
.Label ul li a {
color: #272727; /* Link Color */
font-family: "Open Sans"; /* Link Font */
text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal; /* Font Style. Options are normal and italics. */
font-weight: normal; /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px; /* Space between letters */
font-size: 12px; /* Font Size. */
}
.Label ul li a:hover {
color: #C39F76; /* Link hover color */
}
Phong cách này cũng khá đơn giản, nhưng chúng tôi sẽ thêm một nền màu và một số kiểu di chuột để làm cho nó nổi bật hơn.
Bạn cũng sẽ có thể đặt màu sắc và màu di chuột cũng như kiểu văn bản, kích thước và hơn thế nữa.
Một lần nữa, sao chép và dán văn bản trực tiếp vào mẫu trang của bạn từ Chủ đề> Chỉnh sửa HTML. Hãy chắc chắn rằng bạn đặt nó trong phần CSS của mẫu.
Hoặc đi theo lộ trình dễ dàng và đi đến Chủ đề> Tùy chỉnh> AddCSS. Sao chép và dán mã sau đó nhấp vào nút Áp dụng cho blog.
Phong cách này cũng sử dụng tiện ích phong cách danh sách phong cách danh sách.
STYLE 2 CODE:
Kiểu 3: Màu ombre hoặc màu
.Label ul li a {
display: block;
width: 100%;
text-align: center; /* center aligns text in sidebar */
margin: 7px 0; /* White space between links */
padding: 12px 0; /* Padding for colored background */
color: #272727; /* Link Color */
background-color: #f3f3f3; /* Background Color */
font-family: "Open Sans"; /* Link Font */
text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal; /* Font Style. Options are normal and italics. */
font-weight: normal; /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px; /* Space between letters */
font-size: 12px; /* Font Size. */
}
.Label ul li a:hover {
color: #ffffff; /* Link hover color */
background-color: #C39F76; /* Background Color */
}
Tôi đã thấy phong cách này trên một vài blog và thích thêm màu sắc mà nó có thể thêm vào.
Phong cách này hoạt động tốt nhất khi bạn có số lượng Nhãn hạn chế. Mã cho phép tối đa 6 màu. Màu sắc sẽ quay vòng qua nếu bạn có nhiều hơn 6 Nhãn.
Bạn có thể sử dụng nhiều hoặc ít màu sắc là tốt. Xem cách bên dưới.
Phong cách này một lần nữa sử dụng tiện ích phong cách danh sách phong cách danh sách.
STYLE 3 CODE:
Sử dụng ít màu sắc hơn
.Label ul li a {
box-sizing: border-box;
display: block;
width: 100%;
text-align: center; /* center aligns text in sidebar */
margin: 7px 0; /* White space between links */
padding: 12px 10px; /* Padding for colored background */
font-family: "Open Sans"; /* Link Font */
text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal; /* Font Style. Options are normal and italics. */
font-weight: normal; /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px; /* Space between letters */
font-size: 12px; /* Font Size. */
}
/* LABEL COLORS */
/* First Label Colors */
.Label ul li:nth-child(6n+1) a {
color: #272727; /* Link Color */
background-color: #b0a8a6; /* Background Color */
}
/* Second Label Colors */
.Label ul li:nth-child(6n+2) a {
color: #272727; /* Link Color */
background-color: #c3c5c4; /* Background Color */
}
/* Third Label Colors */
.Label ul li:nth-child(6n+3) a {
color: #272727; /* Link Color */
background-color: #e5d7ca; /* Background Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a {
color: #272727; /* Link Color */
background-color: #e0e1e6; /* Background Color */
}
/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a {
color: #272727; /* Link Color */
background-color: #f0ede4; /* Background Color */
}
/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a {
color: #272727; /* Link Color */
background-color: #f5f6f1; /* Background Color */
}
/* HOVER COLORS */
/* First Label Hover Colors */
.Label ul li:nth-child(6n+1) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Second Label Hover Colors */
.Label ul li:nth-child(6n+2) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Third Label Hover Colors */
.Label ul li:nth-child(6n+3) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Fifth Label Hover Colors */
.Label ul li:nth-child(6n+5) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* Sixth Label Hover Colors */
.Label ul li:nth-child(6n+6) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
Chỉ cần loại bỏ mã cho 4, 5, 6, màu sắc, vv Dễ dàng như chiếc bánh.
Thêm màu sắc
6 màu trên sẽ lặp lại sau mỗi 6 nhãn. Nhưng nếu bạn muốn thêm nhiều màu sắc hơn, hãy thêm 2 dòng như thế này:
/* Add More Colors */Phong cách 4 - Hãy để ý
/* Seventh Label Colors */
.Label ul li:nth-child(6n+7) a {
color: #272727; /* Link Color */
background-color: #f5f6f1; /* Background Color */
}
/* Seventh Label Hover Colors */
.Label ul li:nth-child(6n+7) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
Thiết kế này được thực sự lạ mắt. Chúng tôi sẽ thêm một biểu tượng trên mỗi liên kết của chúng tôi. Một biểu tượng khác nhau cho mỗi liên kết thậm chí.
Kiểu này một lần nữa sử dụng kiểu Danh sách cho các cài đặt tiện ích.
Do công việc liên quan đến việc thêm các biểu tượng, phong cách này hoạt động tốt hơn với số lượng liên kết Nhãn hạn chế (có thể 6-12).
* Bạn cũng có thể bỏ qua các biểu tượng. Chỉ cần xóa cài đặt biểu tượng (sẽ được dán nhãn bằng mã) trên mỗi liên kết.
Thiết lập này yêu cầu bạn phải cài đặt các biểu tượng FontAwgie trên blog của mình. Tất cả các Blogger của chúng tôi đều đã có cái này rồi, vì vậy nếu bạn sử dụng mẫu Blogger của Georgia Lou Studios hoặc bạn biết blog của bạn đã cài đặt FontAwgie, hãy bỏ qua bước tiếp theo.
STYLE 4 CODE:
.Label ul li {
display: inline-block;
width: calc(50% - 5px);
box-sizing: border-box;
float: left;
}
.Label ul li:nth-child(odd) {
margin-right: 10px;
}
.Label ul li a:before {
display: block;
text-align: center;
margin-bottom: 8px;
font-family:'FontAwesome';
font-size: 18px; /* Icon size */
}
.Label ul li a {
box-sizing: border-box;
display: block;
width: 100%;
text-align: center; /* center aligns text in sidebar */
margin: 5px 0; /* White space between links */
padding: 20px 10px; /* Padding for colored background */
font-family: "Open Sans"; /* Link Font */
text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal; /* Font Style. Options are normal and italics. */
font-weight: normal; /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px; /* Space between letters */
font-size: 12px; /* Font Size. */
color: #ffffff; /* Link Color */
background-color: #e7b99f; /* Background Color */
}
.Label ul li a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
/* ICON CODES */
/* First Icon */
.Label ul li:nth-child(6n+1) a:before {
content:"\f1fc";
}
/* Second Icon */
.Label ul li:nth-child(6n+2) a:before {
content:"\f0b1";
}
/* Third Icon */
.Label ul li:nth-child(6n+3) a:before {
content:"\f03e";
}
/* Fourth Icon */
.Label ul li:nth-child(6n+4) a:before {
content:"\f040";
}
/* Fifth Icon */
.Label ul li:nth-child(6n+5) a:before {
content:"\f1ea ";
}
/* Sixth Icon */
.Label ul li:nth-child(6n+6) a:before {
content:"\f030";
}