Tạo một Tab chứa nhiều Widget cho blog ( style 2)

Đăng bởi Admin | 25/10/13 | 0 nhận xét

Tôi đã xuất bản một bài  Làm thế nào để thêm một widget đa tab cho blog của bạn và làm thế nào để tùy chỉnh nó cho phù hợp với bố trí blog của bạn. Vấn đề duy nhất với widget là nó không hoàn toàn widgetized nghĩa là bạn không thể thêm lưu trữ, nhãn, hồ sơ cá nhân tác giả hoặc các vật dụng chính thức khác, trừ khi bạn có mã số riêng biệt của họ với bạn. Thu thuat vi tinh sẽ thêm một widget tabber đẹp và linh hoạt hơn và nâng cao cách điệu bởi kiểu dáng mỏng như ba tít và biên kịch bởi Barelyfitz .Tôi đã sửa đổi mỏng như ba tít của hướng dẫn và đã thực hiện một số thay đổi mã như vậy để làm cho nó thậm chí còn đơn giản hơn. Bạn có thể xem tiện ích này ở hình bên.

Để thêm tiện ích đa tab dễ thương này đến các blog Blogspot của bạn theo các bước sau.

1. Tới Blogger > Layout > Edit HTML
2. Tìm kiếm thẻ  </ head>
3. Và dán mã dưới đây ngay trên nó:


<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>


4. Tìm tiếp thẻ  ]]> </ b: skin>   và chỉ ở trên nó dán mã này:



/*---------- Tabber Start-------- */

.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;
}

/*------- Tabber End--------*/


5. Không lưu mẫu của bạn. Bây giờ tìm kiếm định nghĩa biến (Variable definitions) và dán mã này với các định nghĩa biến :


<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">


Nếu bạn không thể tìm thấy định nghĩa biến  (Variable definitions)  hãy tìm kiếm # navbar-iframe và dán mã dưới đây # navbar-iframe {Một số văn bản ở đây}:



/* 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">
*/


PHẦN CẬP NHẬT:

6. Đây là phần cuối cùng . Tìm kiếm <div id='sidebar-wrapper'> và dán mã này ngay bên dưới 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>


7. Cuối cùng lưu mẫu của bạn và truy cập Giao diện > Page Elements để bắt đầu thêm các vật dụng đến các tab! Nó sẽ giống như thế này:

Các vật dụng được bố trí số lượng khôn ngoan. Bắt đầu từ Tab-1 và kết thúc tại Tab-4.Để thêm một tiện ích / widget tab bất kỳ chỉ cần nhấp vào liên kết Thêm một tiện ích và bắt đầu thêm bất cứ điều gì bạn muốn.

8. Cuối cùng xem mẫu của bạn để xem nó hiển thị như thế nào!

Hướng dẫn tùy biến để nhiều Tab Widget

Thay đổi Hãy nhìn và cảm nhận:

• Màu nền của widget có thể thay đổi bằng cách chỉnh sửa mã trong Bước # 5 . Tôi viết lại mã ở đây với một số mô tả.


<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="#289728" value="#289728">


Mã này có bốn phần chính trong đó các phần tbbxcolor1 : và  tbbxcolor2: là quan trọng nhất. Tôi sẽ mô tả từng chi tiết.

Phần quan trọng:
tbbxcolor1 : Đây là một phần quan trọng. Nó định nghĩa màu nền của widget này tab đa và cũng là màu trên di chuột. Màu mặc định là màu trắng tức là # FFFFFF
tbbxcolor2: Điều này đề cập đến màu nền của các tab và các văn bản bên trong các tab.màu mặc định là màu xanh lá cây. Bạn có thể thay đổi giá trị # 289.728 đến một giá trị màu sắc khác nhau của chúng tôi sử dụng bảng mã màu 

Thay đổi các chỉ khi bạn muốn:

tbbxbgcolor : Phần này đề cập đến màu nền của hộp tab. Theo mặc định màu sắc là màu xám. Nếu bạn muốn thay đổi nó với một màu sắc khác nhau chỉ đơn giản là thay đổi giá trị màu hệ thập lục phân # f8f8f8 một cái gì đó khác nhau sử dụng  Bảng mã màu của chúng tôi

tbbxbrcolor : Điều này đề cập đến màu đường biên giới trên các tab và hộp.

Đó là tất cả nhưng gì cần thiết để hoàn thành tiện ích này.

Cũng khong quá phức tạp phải không nào? Nếu thấy bài viết có ích, hãy cho Thu thuat vi tinh  1  like tại trang chủ nha.

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

Xem thêm:

Tạo một Tab tích hợp nhiều widget cho blog

Thêm Widget theo nhiều thẻ trong một Tab cho Blogger (style3)

                                                                                    Nguồn: mybloggertricks.com