Tạo jQuery UI Tabs với nút Next/Previous cho Blogspot

(Traidatmui.com) - Tiếp theo những thủ thuật về tab nội dung, hôm nay mình chia sẽ cùng các bạn một thủ thuật về tab với hiệu ứng JQuery. Thủ thuật này sẽ hiển thị dạng phân trang nhu 1, 2, 3... Ngoài ra thủ thuật này sẽ có nút "Next page" để xem tiếp trang kế tiếp và nút "Prev page" để có thể lùi lại trang trước đó, thay vì bạn click vào trang tương ứng bạn muốn xem. Để thấy rỏ hơn cách trình diễn nội dung cùng hiệu ứng của nó bạn có thể xem ảnh hoặc click DEMO bên dưới để xem.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

*{ margin: 0; padding: 0;}
body{ font: 14px Helvetica, Sans-Serif; }
#page-wrap{ width: 600px; /*độ rộng của tab*/
margin: 25px auto;
}
.ui-tabs { zoom: 1;
}
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: 2px 2px 0; overflow: hidden;
top: 1px; z-index: 1000; height: 25px;
}
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border: 1px solid #ccc;
border-bottom-width: 0 !important; margin: 0 2px -1px 0; background: #ccc;
}
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: 5px 10px; color: black;
}
.ui-tabs .ui-tabs-nav
li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; background: white;
}
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; background: none;
border: 1px solid #ccc; position: relative; min-height: 200px; height: auto !important; height: 200px;
}
.ui-tabs-panel {padding: 10px;}
.ui-tabs .ui-tabs-hide { display: none !important;
}
a.mover { background: #900; padding: 6px 12px; position: absolute;
color: white; font-weight: bold; text-decoration: none; }
.next-tab { bottom: 0; right: 0; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }
.prev-tab { bottom: 0; left: 0; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; }

5. Tiếp theo chèn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>

6. Save template lại
7. Trở về phần tử trang và thêm 1 HTML/Javascript
8. Thêm code sau vào phần tử HTML/Javascript vừa thêm ở trên

<div id="page-wrap">
<div id="tabs">
<ul>
<li><a href="#fragment-1">1</a></li>
<li><a href="#fragment-2">2</a></li>
<li><a href="#fragment-3">3</a></li>
<li><a href="#fragment-4">4</a></li>
<li><a href="#fragment-5">5</a></li>
<li><a href="#fragment-6">6</a></li>
<li><a href="#fragment-7">7</a></li>
<li><a href="#fragment-8">8</a></li>
<li><a href="#fragment-9">9</a></li>
<li><a href="#fragment-10">10</a></li>
<li><a href="#fragment-11">11</a></li>
<li><a href="#fragment-12">12</a></li>
<li><a href="#fragment-13">13</a></li>
<li><a href="#fragment-14">14</a></li>
<li><a href="#fragment-15">15</a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
NỘI DUNG Ở TRANG 1
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 2
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 3
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 4
</div>

<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 5
</div>

<div id="fragment-6" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 6
</div>

<div id="fragment-7" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 7
</div>

<div id="fragment-8" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 8
</div>

<div id="fragment-9" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 9
</div>

<div id="fragment-10" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 10
</div>

<div id="fragment-11" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 11
</div>

<div id="fragment-12" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 12
</div>

<div id="fragment-13" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 13
</div>

<div id="fragment-14" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 14
</div>

<div id="fragment-15" class="ui-tabs-panel ui-tabs-hide">
NỘI DUNG Ở TRANG 15
</div>

</div></div>

Bạn chỉ cần thay các nội dung vào đúng vị trí các trang là được, phần số màu đỏ (1, 2, 3, 4, 5...) là phần phân trang nằm phía trên của tab.

9. Cuối cùng save lại

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