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

Dạo quanh các blog các bạn có để ý có một số blog họ có cái Widget sidebar gồm nhiều tab khác nhau không? Vậy nó để làm gì. Chả làm gì cả chỉ dùng để làm gọn cái widget lại thôi. Và cũng vì lý do đó mình sẽ hướng dẫn các bạn tạo cái Widget nhiều tab này.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

Mục Đích

• Giúp cho blog trong gọn hơn nhưng đầy đủ widget
• Giúp cho Blog đẹp hơn (có thể tùy từng blog)

Thực Hiện

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

CSS/* 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ó.

JS<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ó

HTML<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>

HTML<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ả

Demo
click to view

Nâng Cao

Trong đoạn Code CSS trên để:

• 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

• 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

• 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

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 ko 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. 

 Cách sử dụng font awesome

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

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.