Tiện ích tạo Multi Tabbed Widget cho Blogger (tab Widget) kiểu 1

Sử dụng Multi Tabbed Widget (tiện ích nhiều tab) không những giúp tiết kiệm không gian trên blog, làm cho blog của bạn trông gọn gàng hơn, mà còn có thể giúp tăng thời gian tải trang cho blog, do nó kết hợp hai hay nhiều widget (tiện ích) làm một.

Multi Tabbed Widget này chỉ dùng để gộp chung các tiện ích HTML/Javascript mà bạn thêm vào blog, không áp dụng được cho các tiện ích có sẵn do Blogger của Google cung cấp.

Tiện ích này khá gọn nhẹ được phát triển bởi mybloggertricks.com. Với tiện ích này, tất cả các tiện ích được chèn chung vào một tiện ích HTML/javascripts nên có thể dễ dàng tùy biến đối với những ai muốn áp dụng tiện ích này.

Như đã viết ở trên, nhược điểm của tiện ích này là hạn chế về tiện ích chèn vào; vì nó chèn thẳng tiện ích HTML/Javascript nên không thể thêm một số tiện ích của Blogger như Popularposts, Archive, Bloglist,... Nói đơn giản là những nội dung trong tab bạn phải dán code hoặc tự soạn thảo lấy.

Bạn có thể xem tiện ích chung "Bài đăng" có 3 tab là "Bài mới, Ngẫu nhiên, Bài hot" mà DVD thực hiện ngay trong blog thực hành này. DVD đã gom chung các tiện ích riêng lẻ "Bài đăng mới", "Bài ngẫu nhiên" và "Bài đăng nhiều cảm nhận nhất" vào một tiện ích chung có 3 tab.

» Cách thêm tiện ích Simple Multi Tabbed Widget cho Blogger:
1.1. Đăng nhập vào blog của bạn.
1.2. Vào mẫu (template) => Chọn mục Chỉnh sửa HTML (Edit HTML).
1.3. Chèn đoạn code 1 bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>    
//<![CDATA[     
function tabtampil_oom(TPID, id)     
{     
  var Tabtampil = document.getElementById(TPID);     
  var TTs = Tabtampil.firstChild;     
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;     
  var TT = TTs.firstChild;     
  var i   = 0;     
  do     
  {     
    if (TT.tagName == "A")     
    {     
      i++;     
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";     
      TT.className = (i == id) ? "Active" : "";     
      TT.blur();     
    }     
  }     
  while (TT = TT.nextSibling);     
  var Halamans = Tabtampil.firstChild;     
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;     
  var Halaman = Halamans.firstChild;     
  var i    = 0;     
  do     
  {     
    if (Halaman.className == 'Halaman')     
    {     
      i++;     
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";     
      Halaman.style.overflow = "auto";     
      Halaman.style.display  = (i == id) ? 'block' : 'none';     
    }     
  }     
  while (Halaman = Halaman.nextSibling);     
}     
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);     
}     
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);     
document.write('');}     
//]]>     
</script>

1.4. Lưu mẫu lại và tiến hành bước tiếp theo.



1.5. Bạn bấm vào tab Bố cục (Layout) => Bấm chọn Thêm tiện ích (Add widget) => Tại cửa sổ hiện lên bạn bấm chọn để tạo một tiện HTML\Javascripts và chèn vào đoạn code 2 bên dưới vào phần nội dung của tiện ích đó:

<style type="text/css">    
div.TabTampil div.TTs     
{height: 24px; overflow: hidden; }     
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active     
{ background-color: #eee; }     
div.TabTampil div.Halamans     
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color:#ffffff;}     
div.TabTampil div.Halamans div.Halaman     
{ height: 100%; padding: 0px; overflow: hidden; }     
div.TabTampil div.Halamans div.Halaman div.Alas     
{ padding: 3px 5px; }     
div.TabTampil div.TTs a     
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;     
display:
 block; width: 95px; text-align: center; vertical-align: middle; height:
 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", 
Serif;     
font-size: 11px; font-weight: 900; color: #000000}     
</style>     
<form action="tabtampil.html" method="get">     
<div id="TabTampil" class="TabTampil">     
<div style="width: 300px;" class="TTs"> <a>Tiêu đề Widget 1</a> <a>Tiêu đề Widget 2</a> <a>Tiêu đề Widget 3</a></div>     
<div style="width: 300px; height: 300px;" class="Halamans">     
<div class="Halaman">     
<div class="Alas">     
<br/>     
Nội dung Widget 1     
</div>     
</div>     
<div class="Halaman">     
<div class="Alas">     
<br/>     
Nội dung Widget 2     
</div>     
</div>     
<div class="Halaman">     
<div class="Alas">     
<br/>     
Nội dung Widget 3     
</div>     
</div>     
</div>     
</div>     
</div></form>     
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Tùy chỉnh đoạn code trên:

• Trước khi đi vào chỉnh sửa chi tiết bạn hãy xem công cụ lấy mã màu sau Color conveter (công cụ này quan trong vì nó liên quan đến những chỉnh sửa mà sau đây mình hướng dẫn)
• #eee : là màu nền của Tabs, mặc định là màu xám
• #fff : là màu đường viền của tiện ích (ở đây mình để là màu trắng)
• #ffffff : là màu nền của thân widget
• #eee : là màu đường viền bao quanh Tabs
• #000000 : là màu chữ của tiêu đề Tabs 
• Bạn có thể thay thế những phần màu đỏ thành tiêu đề của các tab, đây là phần hiển thị và khi bạn bấm vào đó nó sẽ hiển thị các nội dung khác nhau.
• Thay thế những phần màu cam thành nội dung, đây là phần sẽ ẩn đi hoặc hiện ra khi bạn bấm vào tiêu đề tab.

1.6. Giờ hãy lưu tiện ích lại và quay trở lại trang của bạn để xem thành quả bạn đã làm được nhé!

DVD giới thiệu đến các bạn kiểu 1 của tiện ích này. Bạn nào muốn nghiên cứu tiếp kiểu 2 thì xem tại đây:

https://www.terocket.com/2011/08/tien-ich-multi-tabbed-widget-for.html
======

* Trải nghiệm:

DVD gọi là "Tiện ích" mà không phải "thủ thuật" bởi vì DVD không cần vào chỉnh sửa HTML của blog; DVD chỉ đơn giản là vào luôn Bố cục - Thêm tiện ích - Chọn tiện ích HTML/Javascript.
- Copy code 1 dán vào khung nội dung.
- Copy code 2 và tiếp tục dán vào khung nội dung dưới code 1.
- Điều chỉnh code 2 theo hướng dẫn.
- Và kết quả như bạn thấy Tiện ích "Bài đăng" trong blog thực hành này của DVD.

DVD chúc các bạn thành công!

dovaden2010