Hướng dẫn tạo nút Tab trong blogspot

Mặc định trong các Template mẫu của Blogspot không có các nút Tab như ví dụ bên cạnh (Popular, Links list, Commments, BBC News). Nhằm giúp các bạn có thể nhanh chóng tạo cho blog của mình các nút Tab để làm gọn gàng trang blog của mình. bài này mình sẽ hướng dẫn cụ thể thực hiện việc này.

Các bước thực hiện :

Bước 1 : Bạn vào thiết kế ---> Chỉnh sửa HTML sau đó bấm Ctr+F (hoặc Command +F trong Macbook) để tìm đoạn mã sau :<div id='sidebar-wrapper'>
Nếu tìm không có đoạn mã đó thì bạn tìm đoạn mã này : <div class='column-right-outer'>


Thực ra chèn ở đâu cũng được, nhưng để đẹp mắt thì nó nằm bên phải thì chuẩn hơn

Bước 2 : Các bạn chèn đoạn code sau đây vào ngay dưới đoạn mã đã tìm ở Bước 1

<style type='text/css'>

ul.tabs-widget{padding:0} .tabs-widget li{margin:0 10px 10px 0;background:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center} .tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none} .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff} #sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2, #sidebartab4 h2{display:none}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);$(this).addClass(&quot;tabs-widget-current&quot;);$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var activeTab=$(this).attr(&quot;href&quot;);$(activeTab).fadeIn();return false;});});
</script>


<h2><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popupar</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Links list</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Comments</a></li>
<li><a href='#widget-themater_tabs-1432447472-id4'>BBC News</a></li>
</ul></h2> <div class='clear'/>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>

<b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
</div>


<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>
</div>


<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
<b:section class='sidebar' id='sidebartab4' maxwidgets='1' preferred='yes'/>
</div>

Bước 3 : Các bạn chú ý những chổ màu đỏ, cụ thể : chiều cao, bề rộng, độ mảnh của đườg viền bo ngoài tab, tên nút Tab.

Các bạn thay đổi tuỳ theo nhu cầu và phù hợp với giao diện trang blog của bạn.

Bước 4 : Các bạn vào mục Thiết kế ---> phần tử trang, sau đó thêm các tiện ích ngay dưới các nút tab đã được tạo.

Chú các bạn thành công.




Lưu ý quan trọng : Nếu trong trang bog của bạn có sử dụng thêm jQuery khác, khả năng code trên sẽ gây ảnh hưởng làm jQuery khác không hoạt động, bạn nên tìm và xoá đoạn mã sau :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>


                                                                                                                  Nguồn : Noct