Hôm nay là

Thủ thuật tạo Multi Tabbed Widget cho blog

Thứ Hai, 23 tháng 7, 2018 - - No comments - lượt xem
Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!



Multi Tabbed Widget là tiện ích đượ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ế mang phong cách báo chí (như iTechPlus.info chẳng hạn). 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 bài viết dưới đây, iTechPlus sẽ giới thiệu đến các bạn Style 2 của tiện ích này.

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,… )
Thực hiện :
A. Vào Thiết kế > Chỉnh sửa HTML
B. 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">
*/
Đoạn code trên nhằm xác định màu sắc cho các thành phần của widget như sau : 
  • #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
Để thay đổi thành màu khác, các bạn có thể sử dụng bảng mã màu tại đây.
C. 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;
}
D. 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>
E. 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>
Khi đó sẽ trông giống như hình dưới ( trường hợp chèn bên trong <div id='sidebar-wrapper'> )
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ó
F. 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ó 
 Quay trở lại Phần tử trang và thêm bất kỳ widget nào vào trong nó
Trên đây iTechPlus đã 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.
Chúc các bạn thành công !


Nguồn:
http://hocaothutcunghito.blogspot.com/2011/09/tien-ich-multi-tabbed-widget-for.html

Không có nhận xét nào:

Hướng dẫn viết nhận xét:
- Dán link ảnh trực tiếp vào khung nhận xét không cần dùng thẻ.
* Chú ý: Link ảnh phải đặt cuối cùng. Sau link ảnh đã dán, không gõ thêm bất kỳ ký tự nào nữa, kể cả nhấn Enter.
- Thêm một vài biểu tượng cảm xúc...

Tiện ích hướng dẫn comment và ký tự emoticons Zing

Hướng dẫn viết nhận xét:
- Gõ (hoặc copy và dán) ký tự bên phải biểu tượng cảm xúc muốn chọn vào khung nhận xét.
- Dán link ảnh trực tiếp vào khung nhận xét không cần dùng thẻ.
* Chú ý: Link ảnh phải đặt cuối cùng. Sau link ảnh đã dán, không gõ thêm bất kỳ ký tự nào nữa, kể cả nhấn Enter.
:)) :(( :) :-ss =)) :( :d @-) :p :-o [-( :-? :-t b-( =d>

Tiện ích hướng dẫn comment và ký tự emoticons Yahoo

Hướng dẫn viết nhận xét:
- Gõ (hoặc copy và dán) ký tự bên phải biểu tượng cảm xúc muốn chọn vào khung nhận xét.
- Dán link ảnh trực tiếp vào khung nhận xét không cần dùng thẻ.
* Chú ý: Link ảnh phải đặt cuối cùng. Sau link ảnh đã dán, không gõ thêm bất kỳ ký tự nào nữa, kể cả nhấn Enter.
:(( :( :)) ~X( :-h :-? b-) *-:) ~O) @};- >:D< =)) :) :-* :D [-X x( :-o =D> :@) :P :"> ;;) ;) :X =(( :-/