Tạo Nhiều Tab trên một Sidebar Trong Blogspot

Hello các bạn .Mình là Thanh Huy ,mình đã trở lại rồi đây .Hôm trước mình có để ý một blog có cái Widget  Sidebar gồm có nhiều tab khác nhau . Như vậy Sidebar có nhiều tab để làm gì . Chả để làm gì đâu chỉ dùng làm gọn cái Widget lại thôi. Và cũng gì lí do đó hôm nay mình sẽ hướng dẫn các bạn tạo cái Widget nhiều tab này.

Widget Multiple Tab Cho Blogger

Live Demo

Thực Hiện

1.Đầu tiên các bạn vào Blogger -> Mẫu -> Chỉnh sửa html, sau đó dán đoạn CSS sau và trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

/* Multi Tab Sidebar */
.multitab-section { display: inline-block; text-transform: uppercase; width: 100%; }
.multitab-section p { display: inline-block; background: #fff; text-transform: lowercase; font-size: 14px; padding: 20px; margin: 0; }
.multitab-widget { list-style: none; margin: 0 0 10px; padding: 0 }
.multitab-widget li { list-style: none; padding: 0; margin: 0; float: left }
.multitab-widget li a { background: #37B185; color: #fff; display: block; padding: 15px; font-size: 13px; text-decoration: none }
.multitab-tab { width: 33.3%; text-align: center }
.multitab-section h2,
.multitab-section h3,
.multitab-section h4,
.multitab-section h5,
.multitab-section h6 { display: none; }
 .multitab-widget li a
.multitab-widget-current { padding-bottom: 20px; margin-top: -10px; background: #fff; color: #444; text-decoration: none; border-top: 5px solid #37B185; font-size: 14px; text-transform: capitalize } 

2. Tiếp tục các bạn tìm thẻ đóng </body> rồi dán đoạn javascript sau vào trước nó.

<script type='text/javascript'>
>//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
>//]]>
</script>

3. Sau đó các bạn tìm dòng <div id='sidebar-wrapper'> rồi chép đoạn HTML sau vào sau nó

<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'><i class="fa fa-star-o"></i>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'><i class="fa fa-tags"></i> Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'><i class="fa fa-list"></i> Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>

4. Cuối cùng các bạn chép đoạn html sau vào trước thẻ đóng </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Thưởng thức thành quả

Hướng Dẫn Thêm

Trong đoạn Code CSS trên để: 
1.Thay đổi màu sắc của tab: 
Các bạn tìm dòng multitab-widget li a trong đó bạn sẽ tìm thấy chữ background: #37B185; các bạn thay mã màu là #37B185 thành màu mà bạn muốn 
2.Thay đổi màu sắc cái phần nhỏ nhỏ trên tab 
Tìm dòng multitab-widget li a.multitab-widget-current có chữ border-top: 5px solid #37B185; các bạn thay mả màu #37B185 thành màu mà bạn muốn 
4.Còn lại giữ nguyên là okey rồi Trong Đoạn code html ở trên để Thay đổi hình ngôi sao hay thẻ tags hay cái list icon 
5.Các bạn tìm và thay các dòng fa-star-o, fa-tags, fa-list, tương ứng là sao, tags, list bằng các icon bạn thích nếu bạn không biết lấy icon ở đâu ra thì các bạn làm theo bài viết bên đưới đề sử dụng các icon.

Lời Kết

Vây là mình đã hướng dẫn các bạn tạo widget gồm nhiều tab. Nếu có thắc mắc các bạn cứ comment ở dưới mình sẽ giải đáp. Chúc các bạn thành công