jQuery "Tabs Shortcode" cho Blogger

jQuery "Tabs Shortcode" For Blogger

Ở một bài viết trước: Thêm Multi Tabbed Sidebar vào Blogger Iris Tips đã chia sẻ cho các bạn cách tạo Multi Tab cho sidabar. Hôm nay cũng là Multi Tab nhưng được tạo bằng Shortcode. Dòng lệnh đơn giản chỉ với 1 dòng code, ngoài ra bạn cũng có thể thêm vào bao nhiêu tab bạn thích cũng được và đặc biệt là bạn có thể thêm Multi Tab ở bất kỳ nơi nào trong blog: sidebar, bài viết, bình luận...

• DEMO

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:

Giới thiệu Plugin Blogger Shortcodebr/>

2. Thêm CSS 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 Tabs Iris Tips--------*/ 
.sc-tab ul.tabset.tabs li a.active{ 
border-bottom: 1px solid #70CF0A; 
border-top: 3px solid #70CF0A; 
padding: 8px 10px 10px 10px; 
background: #70CF0A; 
color: #fff; 
border-left: 1px solid #70CF0A; 
border-right: 1px solid #70CF0A; 
} 
.sc-tab ul.tabset.tabs li a:hover { 
background: #70CF0A; 
color: white; 
border-color: #70CF0A; 
}
.sc-tab ul.tabset.tabs { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
.sc-tab ul.tabset.tabs li { 
float: left; 
margin: 0px 4px 0px 0px; 
border-right: 1px solid #EEE; 
} 
.sc-tab ul.tabset.tabs li a { 
color: #666; 
text-decoration: none; 
    font-family: oswald, arial;font-size: 14px; 
} 
.sc-tab .tab-box { 
clear: both; 
position: relative; 
z-index: 50; 
top: 3px; 
} 
.sc-tab .tab_content { 
display: none; 
border: 1px solid #EEE; 
padding: 1em; 
border-bottom: 3px solid #70CF0A; 
box-shadow: 2px 4px 6px #EEE; 
font-family: arial; 
font-size: 14px; 
} 
.sc-tab ul.tabset.tabs li a { 
padding: 10px; 
display: block; 
border: 1px solid #EEE; 
background: #fbfbfb; 
position: relative; 
z-index: 100; 
} 
  

Bạn có thể chỉnh sửa lại màu tab 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 để sử dụng Tabs Shortcode?

Bạn chỉ cần viết theo cú pháp sau

 [tab]
[content title="Tab 1"] INSERT CONTENT HERE [/content]
[content title="Tab 2"] INSERT CONTENT HERE [/content]
[content title="Tab 3"] INSERT CONTENT HERE [/content]
[/tab] 

Kết quả:

Để tạo thêm tab bạn chỉ cần thêm dòng code này vào trước dòng code [/tab]

 [content title="Tiêu đề của Tab"]NỘI DUNG[/content] 

Bạn cũng có thể thêm icon vào tên tab, ví dụ

 ... Your HTML (already escaped) put here ...[tab]
[content title="Facebook" icon="fa-facebook"] INSERT CONTENT HERE [/content]
[content title="Google+" icon="fa-google-plus"] INSERT CONTENT HERE [/content]
[content title="Twitter" icon="fa-twitter"] INSERT CONTENT HERE [/content]
[/tab] 

Kết quả:

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

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm