Multi Tabbed Widget là thủ thuật blogger được sử dụng khi trên Blog bạn có chứa khá nhiều widget. Một giải pháp thường được các Blogger áp dụng là chia footer-wrapper làm nhiều cột để chứa các widget này. 

Tuy nhiên, điều này không phải ai cũng thích, nhất là các blog được thiết kế website mang phong cách báo chí. Từ đó mới xuất hiện tiện ích gọi là Multi Tabbed Widget.Tiện ích này xuất hiện từ khá lâu, mà bắt nguồn từ các Blog sử dụng nền tảng Wordpress, sau đó được các Pro Blogger “bào chế” để áp dụng cho Blogspot.Sử dụng Multi Tabbed Widget 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 của bạn do nó kết hợp hai hay nhiều widget làm một.

Và trong thủ thuật blogger này sẽ giới thiệu đến các bạn 2 Style của tiện ích này.
Style 1 : Simple Multi Tabbed Widget for Blogger đây là tiện ích đơn giản nhất, có thể chèn vào nó các widget HTML\JavaScript.

Multi Tabble Widget - Thủ thuật tạo Tabs View chuyển nội dung khi click cho Blogger
1. Vào Thiết kế > Chỉnh sửa HTML

2. Chèn đoạn code 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>
3. Tạo một widget HTML\JavaScript và chèn vào đoạn code sau :
<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>
  • #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
  • #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 tiêu đề Tabs
Style 2 : Advanced Multi Tabbed Widget For Blogger – Fully Widgetized đây là tiện ích cao cấp hơn. Với nó, bạn có thể chèn vào nó bất kỳ widget nào nếu muốn ( archives, labels, author,… )

Multi Tabble Widget - Thủ thuật tạo Tabs View chuyển nội dung khi click cho Blogger
1- Vào Thiết kế > Chỉnh sửa HTML
2- Chèn đoạn code sau vào trong trường Variable definitions, khi đó trông sẽ giống như sau :
/* Variable definitions    
   ====================     
………………………………………………………     
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">     
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">     
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">     
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">     
*/
  • #f8f8f8 : màu nền của tiện ích
  • #dcdcdc : màu đường viền của tiện ích và Tabs
  • #ffffff : màu nền của thân tiện ích và cũng là màu khi rê chuột vào tiêu đề Tabs
  • #5588aa : màu nền của tiêu đề Tabs

3. Chèn đoạn code sau vào trước thẻ đóng </b:skin>
.tabberlive{    
margin:0;     
padding:5px;     
clear:both;     
background:$tbbxbgcolor;     
border:1px solid $tbbxbrcolor;     
}     
.tabbernav {     
margin:0;     
padding: 3px 0;     
border-bottom: 1px solid $tbbxbrcolor;     
font-family:Arial,Helvetica,sans-serif;     
font-size:12px;     
font-weight:bold;     
}     
.tabbernav li {     
list-style:none;     
margin:0;     
display:inline;     
}     
.tabbernav li a {     
padding:3px 0.5em;     
margin-right:1px;     
border:1px solid $tbbxbrcolor;     
border-bottom:none;     
background:$tbbxcolor2;     
text-decoration:none;     
color:$tbbxcolor1;     
}     
.tabbernav li a:hover {     
color:$tbbxcolor2;     
background:$tbbxcolor1;     
border-color:$tbbxbrcolor;     
text-decoration:none;     
}     
.tabbernav li.tabberactive a,     
.tabbernav li.tabberactive a:hover {     
background:$tbbxcolor1;     
color:$tbbxcolor2;     
border-bottom: 1px solid $tbbxcolor1;     
}     
.tabberlive .tabbertab {     
padding:5px;     
border:1px solid $tbbxbrcolor;     
border-top:0;     
background:$tbbxcolor1;     
}     
.tabberlive .tabbertab h2,     
.tabberlive .tabbertabhide {     
display:none;     
}     
.tabbertab .widget-content ul{     
list-style:none;     
margin:0 0 10px 0;     
padding:0;     
}     
.tabbertab .widget-content li {     
border-bottom:1px solid $tbbxbrcolor;     
margin:0 5px;     
padding:2px 0 5px 0;     
}
4. Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>    
//<![CDATA[     
document.write('<style type="text/css">.tabber{display:none;}<\/style>');     
function tabberObj(argsObj)     
{     
  var arg;     
  this.div = null;     
  this.classMain = "tabber";     
  this.classMainLive = "tabberlive";     
  this.classTab = "tabbertab";     
  this.classTabDefault = "tabbertabdefault";     
  this.classNav = "tabbernav";     
  this.classTabHide = "tabbertabhide";     
  this.classNavActive = "tabberactive";     
  this.titleElements = ['h2','h3','h4','h5','h6'];     
  this.titleElementsStripHTML = true;     
  this.removeTitle = true;     
  this.addLinkId = false;     
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';     
  for (arg in argsObj) { this[arg] = argsObj[arg]; }     
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');     
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');     
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');     
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');     
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');     
  this.tabs = new Array();     
  if (this.div) {     
    this.init(this.div);     
    this.div = null;     
  }     
}     
tabberObj.prototype.init = function(e)     
{     
  var     
  childNodes,     
  i, i2,     
  t,     
  defaultTab=0,     
  DOM_ul,     
  DOM_li,     
  DOM_a,     
  aId,     
  headingElement;     
  if (!document.getElementsByTagName) { return false; }     
  if (e.id) {     
    this.id = e.id;     
  }     
  this.tabs.length = 0;     
  childNodes = e.childNodes;     
  for(i=0; i < childNodes.length; i++) {     
    if(childNodes[i].className &&     
       childNodes[i].className.match(this.REclassTab)) {     
      t = new Object();     
      t.div = childNodes[i];     
      this.tabs[this.tabs.length] = t;     
      if (childNodes[i].className.match(this.REclassTabDefault)) {     
    defaultTab = this.tabs.length-1;     
      }     
    }     
  }     
  DOM_ul = document.createElement("ul");     
  DOM_ul.className = this.classNav;     
  for (i=0; i < this.tabs.length; i++) {     
    t = this.tabs[i];     
    t.headingText = t.div.title;     
    if (this.removeTitle) { t.div.title = ''; }     
    if (!t.headingText) {     
      for (i2=0; i2<this.titleElements.length; i2++) {     
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];     
    if (headingElement) {     
      t.headingText = headingElement.innerHTML;     
      if (this.titleElementsStripHTML) {     
        t.headingText.replace(/<br>/gi," ");     
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");     
      }     
      break;     
    }     
      }     
    }     
    if (!t.headingText) {     
      t.headingText = i + 1;     
    }     
    DOM_li = document.createElement("li");     
    t.li = DOM_li;     
    DOM_a = document.createElement("a");     
    DOM_a.appendChild(document.createTextNode(t.headingText));     
    DOM_a.href = "javascript:void(null);";     
    DOM_a.title = t.headingText;     
    DOM_a.onclick = this.navClick;     
    DOM_a.tabber = this;     
    DOM_a.tabberIndex = i;     
    if (this.addLinkId && this.linkIdFormat) {     
      aId = this.linkIdFormat;     
      aId = aId.replace(/<tabberid>/gi, this.id);     
      aId = aId.replace(/<tabnumberzero>/gi, i);     
      aId = aId.replace(/<tabnumberone>/gi, i+1);     
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));     
      DOM_a.id = aId;     
    }     
    DOM_li.appendChild(DOM_a);     
    DOM_ul.appendChild(DOM_li);     
  }     
  e.insertBefore(DOM_ul, e.firstChild);     
  e.className = e.className.replace(this.REclassMain, this.classMainLive);     
  this.tabShow(defaultTab);     
  if (typeof this.onLoad == 'function') {     
    this.onLoad({tabber:this});     
  }     
  return this;     
};     
tabberObj.prototype.navClick = function(event)     
{     
  var     
  rVal,     
  a,     
  self,     
  tabberIndex,     
  onClickArgs;     
  a = this;     
  if (!a.tabber) { return false; }     
  self = a.tabber;     
  tabberIndex = a.tabberIndex;     
  a.blur();     
  if (typeof self.onClick == 'function') {     
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};     
    /* IE uses a different way to access the event object */     
    if (!event) { onClickArgs.event = window.event; }     
    rVal = self.onClick(onClickArgs);     
    if (rVal === false) { return false; }     
  }     
  self.tabShow(tabberIndex);     
  return false;     
};     
tabberObj.prototype.tabHideAll = function()     
{     
  var i;     
  for (i = 0; i < this.tabs.length; i++) {     
    this.tabHide(i);     
  }     
};     
tabberObj.prototype.tabHide = function(tabberIndex)     
{     
  var div;     
  if (!this.tabs[tabberIndex]) { return false; }     
  div = this.tabs[tabberIndex].div;     
  if (!div.className.match(this.REclassTabHide)) {     
    div.className += ' ' + this.classTabHide;     
  }     
  this.navClearActive(tabberIndex);     
  return this;     
};     
tabberObj.prototype.tabShow = function(tabberIndex)     
{     
  var div;     
  if (!this.tabs[tabberIndex]) { return false; }     
  this.tabHideAll();     
  div = this.tabs[tabberIndex].div;     
  div.className = div.className.replace(this.REclassTabHide, '');     
  this.navSetActive(tabberIndex);     
  if (typeof this.onTabDisplay == 'function') {     
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});     
  }     
  return this;     
};     
tabberObj.prototype.navSetActive = function(tabberIndex)     
{     
  this.tabs[tabberIndex].li.className = this.classNavActive;     
  return this;     
};     
tabberObj.prototype.navClearActive = function(tabberIndex)     
{     
  this.tabs[tabberIndex].li.className = '';     
  return this;     
};     
function tabberAutomatic(tabberArgs)     
{     
  var     
    tempObj,     
    divs,     
    i;     
  if (!tabberArgs) { tabberArgs = {}; }     
  tempObj = new tabberObj(tabberArgs);     
  divs = document.getElementsByTagName("div");     
  for (i=0; i < divs.length; i++) {     
    if (divs[i].className &&     
    divs[i].className.match(tempObj.REclassMain)) {     
      tabberArgs.div = divs[i];     
      divs[i].tabber = new tabberObj(tabberArgs);     
    }     
  }     
  return this;     
}     
function tabberAutomaticOnLoad(tabberArgs)     
{     
  var oldOnLoad;     
  if (!tabberArgs) { tabberArgs = {}; }     
  oldOnLoad = window.onload;     
  if (typeof window.onload != 'function') {     
    window.onload = function() {     
      tabberAutomatic(tabberArgs);     
    };     
  } else {     
    window.onload = function() {     
      oldOnLoad();     
      tabberAutomatic(tabberArgs);     
    };     
  }     
}     
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */     
if (typeof tabberOptions == 'undefined') {     
    tabberAutomaticOnLoad();     
} else {     
  if (!tabberOptions['manualStartup']) {     
    tabberAutomaticOnLoad(tabberOptions);     
  }     
}     
//]]>     
</script>
5. Cuối cùng, tìm trong template dòng <div id='sidebar-wrapper'> và chèn đoạn code sau vào trên\dưới hoặc trước thẻ đóng </div> của nó :
<div style='clear:both;'/>    
<div class='tabber'>     
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>     
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>     
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>     
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>     
</div>
6. Lúc này, bạn chỉ việc quay trở lại Phần tử trang và thêm bất kỳ widget nào vào trong nó.
Multi Tabble Widget - Thủ thuật tạo Tabs View chuyển nội dung khi click cho Blogger
Trên đây đã giới thiệu đến các bạn 2 Style của tiện ích Multi Tabbed Widget do Mohammad Mustafa Ahmedzai phát triển. Nếu các bạn biết thêm các Style nào khác độc đáo và chất lượng hơn nữa, xin vui lòng để lại phản hồi bên dưới.

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công