Cool New Multi Tabbed Widget For Blogger

Đã có một thời gian tôi tìm Widget này. Nhưng tìm mãi mà chẳng thấy. Kết quả là lòng vòng và mất rất nhiều thời gian định hướng cho giao diện M21love. Nếu bạn đang kiếm một thủ thuật tương tự thì Widget này dành cho bạn. 

Bước 1: Bạn chú ý có 3 file quan trọng. Bạn download về máy rồi tiếp tục làm theo bước 2

Xem thêm :Tại sao phải đặt H1 ở header?

jquery-1.3.2.min.js
jquery-ui-1.7.custom.min.js

Xem thêm :Cool New Multi Tabbed Widget For Blogger

tabs.css [Bạn có thể tuỳ chỉnh Code cho hợp nhãn của bạn bằng cách thay đổi Code và hình ảnh tuỳ ý]Download Zipped File (TabsNextPrev.zip) from CSS-Tricks.com

Bước 2: Upload lên  http://www.opendrive.com/ và lấy Drirect Links

Bước 3: Vào Layout -> Edit HTML -> Ctrl + F -> Tìm thẻ </head> -> Chèn trước nó đoạn code sau:

<!--JQuery-Prev-Next-Tabber-Starts-http://bloggerstop.net--> <link rel="stylesheet" href="http://sigmirror.com/........../TEMP_tabs.css" type="text/css" media="screen, projection"/> <script type="text/javascript" src="http://sigmirror.com/........../TEMP_jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://sigmirror.com/........../TEMP_jquery-ui-1.7.custom.min.js"></script> <script type="text/javascript"> $(function() { var $tabs = $('#tabs').tabs(); $(".ui-tabs-panel").each(function(i){ var totalSize = $(".ui-tabs-panel").size() - 1; if (i != totalSize) { next = i + 2; $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>"); } if (i != 0) { prev = i; $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>"); } }); $('.next-tab, .prev-tab').click(function() { $tabs.tabs('select', $(this).attr("rel")); return false; }); }); </script> <!--JQuery-Prev-Next-Tabber-Stops-http://bloggerstop.net-->

Bước 4: Thêm các Drirect Link vào phần (....) và Lưu mẫu.

Xem thêm :Multi Tabbed Navigation Widget cho Blogger

Bước 5: Vào Phần tử trang - > Thêm Widget/HTML -> Copy và Paste Code sau vào phần nội dung Widget

<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"> <p>Start</p> </div> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"> <p>Content of Tab 2 </p> </div> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"> <p>Content of Tab 3 </p> </div> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-9" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-10" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-11" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-12" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-13" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-14" class="ui-tabs-panel ui-tabs-hide"> </div> <div id="fragment-15" class="ui-tabs-panel ui-tabs-hide"> <p>The end.</p> </div> </div> </div> <a href="http://bloggerstop.net" target="_blank">Blogger Templates Widgets</a>

Bước 6: Thay đổi Tên và nội dung và Lưu lại

Xem thêm :Menu ngang đẹp cho Blogger

Nguồn tham khảo http://bloggerstop.net