Iris Tips
Iris TipsjQuery Accordion Shortcode For Blogger
Đã bao giờ bạn tự hỏi làm thế nào để tạo jQuery accordions với hiệu ứng Toggle. Nay với Blogger Shortcode Plugin bạn sẽ thực hiện điều đó một cách dễ dàng chỉ với 1 dòng code.
1. Cài đặt Plugin Blogger Shortcode
Để sử dụng Shortcode này trước tiên bạn phải cài đặt Plugin Shortcode cho Blogger của bạn bằng cách làm theo các bước được chia sẻ qua bài viết dưới đây:
2. Thêm CSS Accordion Shortcode vào Blogger
Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code dưới đây vào trước thẻ ]]></b:skin> /*------ Shortcode Accordion Iris Tips -----*/
.sc-accordion > h3 .anchor {
font-family: helvetica;
padding: 3px 7px;
color: #70CF0A;
margin: 0 8px 0 0;
}
.sc-accordion > h3 a {
text-decoration: none;
font: normal 16px oswald;
color: black;
border-bottom: 1px solid #eee;
display: block;
padding: 0 0 0.6em 0;
}
.sc-accordion .trigger {
border-bottom: 1px solid #DDD;
padding: 0 0 0.5em 0;
margin: 0 0 0.5em 0;
display: none;
font-family: arial;
font-size: 14px;
}
.sc-accordion > h3.toggle {
margin: 0 0 0.5em;
}
.sc-accordion > h3 a.active {
border: none;
padding: 0;
}
.sc-accordion > h3 a.active .anchor, .sc-accordion > h3 a.active {
color: #70CF0A;
}
.sc-accordion > h3 a:hover {
color: #70CF0A;
} Bạn có thể chỉnh sửa lại màu mà bạn thích bằng cách thay #70CF0A bằng giá trị màu khác
3. Làm thế nào để tạo Accordion?
Bạn chỉ cần thực hiện theo cú pháp sau [accordion]
[item title="Title Of Tab 1"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 2"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 3"] INSERT CONTENT HERE [/item]
[/accordion] Kết quả:
Để tạo thêm Accordion bạn chỉ cần thêm dòng code này vào trước thẻ [/accordion]
[item title="Tiêu đề của Tab"]NỘI DUNG[/item] Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by mbt/Iris Tips
Mẹo nhỏ khi bình luận