Tạo Tabs Widget với hiệu ứng trượt.

Post By: Võ Quốc An On: 23-03-2012 20 comments

Đối với một số template, đặc biệt là những template có sidebar cố định thì việc bố trí nhiều widget trở nên rất khó khăn và lúc này tabs widget có thể nói là một trong những thủ thuật hiệu quả nhất. Trước đây mình từng share mẫu template 01 cũng có sử dụng hiệu ứng này. Cũng có một số bạn hỏi nên hôm nay viết hướng dẫn về mẫu tabs widget với hiệu ứng trượt này luôn.

Xem Demo

1. Vào template (KHÔNG mở rộng mẫu tiện ích) chèn đoạn css này vào trước thẻ ]]></b:skin>

/* Tabs Widget */
#tabs-widget .widget{margin-top:10px}
.tabnav li{font-weight:bold; display:inline; height:20px;}
.tabnav li a {padding:2px 10px 0 10px; color:#666; text-decoration:none;}
.tabnav li.ui-tabs-selected a {text-decoration:none; color:red; }
.ui-tabs-hide {display: none}

2. Tiếp tục tìm đoạn code sau

<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>

3. Chèn đoạn code sau bên dưới đoạn code ở bước 2.

<div id='tabs-widget'>
          <div class='tabview' id='tabzine'>
            <ul class='tabnav'>
               <li><a href='#tabs1'>Tabs 1</a></li>
               <li><a href='#tabs2'>Tabs 2</a></li>
               <li><a href='#tabs3'>Tabs 3</a></li>
            </ul>
            <div class='tabdiv' id='tabs'>
            <b:section class='tabdiv' id='tabs1' preferred='yes' showaddelement='yes'/>
            </div>
            <b:section class='tabdiv' id='tabs2' preferred='yes' showaddelement='yes'/>
            <b:section class='tabdiv' id='tabs3' preferred='yes' showaddelement='yes'/>
         </div>
</div>

4. Chèn đoạn code sau trước thẻ </head>

<script src='http://voquocan.googlecode.com/files/tabs.js' type='text/javascript'/>

5. Save lại về mục Phần tử trang bạn sẽ thấy có 3 tabs mới được tạo ra. Bạn chỉ việc thêm tiện ích cho phù hợp là được.

Chú ý:
Đoạn code ở bước 2 chỉ tìm thấy với mẫu của blogger, còn những mẫu khác nhau thì sẽ có những từ khóa khác nhau tùy theo template. Nếu tìm không thấy đoạn code ở bước 2 thì bạn để lại comments bên dưới mình sẽ tìm từ khóa giúp bạn. Chúc bạn thành công!

Khắc phục lỗi xung đột với nút Back To Top
Trong thủ thuật Nút Back To Top cho blog có 1 đoạn code như thế này:

<script src='http://voquocan.googlecode.com/files/jquery.min.js' type='text/javascript'></script>

Bạn chỉ việc xóa nó đi là cả 2 hoạt động ok thôi.

Saturday, 17 November 2012