jQuery Accordion shortcode dành cho Blogger (Blogspot)!

Như đã giới thiệu ở bài viết Giới thiệu Blogger Shortcode Plugin cần được quan tâm thì mình cũng đã nêu đó là sự cần thiết của Plugin này nếu như bạn cần nhiều tuỳ biến mà phải sử dụng ít thao tác trên Blog. Và với bài viết này là một tuỳ biến về Accordion. Hướng dẫn sẽ giúp bạn hiểu hơn về vấn đề này và mục đích của bạn nếu làm theo hướng dẫn thì bạn sẽ được kết quả như thế nào.

Bạn sẽ thấy rõ hơn khi xem demo trực tiếp và nếu bạn thấy thích thú + cần thiết thêm thủ thuật jQuery Accordion shortcode cho blog của mình thì ngay sau đó xem hướng dẫn bên dưới nhé!

XEM DEMO

Làm thế nào để Accordion hoạt động trên Blogger?

Các giao diện người dùng của Accordion được chứa bởi một tập hợp các Tab. Tất cả các Tab điều khiển có thể nhìn thấy ở tất cả các lần, nhưng nội dung bên trong đó được ẩn đi. Khi người dùng nhấp vào tiêu đề của bảng điều khiển, các nội dung của bảng điều đó sẽ trở thành nội dung cơ thể có thể nhìn thấy và các bảng điều khiển của mà trước đây có thể nhìn thấy sẽ trở thành vô hình.

Hoàn toàn sử dụng được cả trong nội dung comment của Blogger.

Hướng dẫn thêm jQuery Accordion shortcode

1. Cài đặt Blogger shortcode Plugin

Đầu tiên và trước hết bạn cần phải cài đặt shortcode Plugin bằng cách làm theo mấy bước dễ dàng chia sẻ trên các link hướng dẫn dưới đây:

• Đọc luôn: blogger shortcode plugin

2. Thêm Accordion shortcode cho Blogger

 - Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

-  Tìm đến ]]></b:skin>

- Dán đoạn code CSS dưới đây vào trên cái vừa tìm được
/*------ Shortcode Accordion -----*/
.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;
}


- #70CF0A là mã màu và bạn có thể thay đổi theo ý thích

3. Làm thế nào để tạo Accordion

Rất đơn giản sau khi làm xong 2 bước trên, khi viết bài hoặc tạo một trang mới bạn chỉ cần soạn thảo dưới chế độ HTML và dán cú pháp này vào nội dung bài viết đó
[accordion]
[item title="Tiêu đề của Tab 1"] THÊM NỘI DUNG VÀO ĐÂY [/item]
[item title="Tiêu đề của Tab 2"] THÊM NỘI DUNG VÀO ĐÂY [/item]
[item title="Tiêu đề của Tab 3"] THÊM NỘI DUNG VÀO ĐÂY [/item]
[/accordion]

• Bạn có thể chèn thêm bất kỳ HTML, văn bản hoặc thậm chí một shortcode mới bên trong khu vực nội dung được đại diện bởi THÊM NỘI DUNG VÀO ĐÂY
• Bạn có thể đặt tiêu đề hoặc tiêu đề của bạn bằng cách thay thế các văn bản đề TIÊU ĐỀ CỦA TAB 1, 2, 3 vv
• Để tạo ra một tab mới và bảng điều khiển bạn chỉ cần thêm các phụ shortcode sau trên [/ accordion]

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger