Dalam tutorial ini saya akan mengajarkan sobat bagaimana cara menambahkan widget ke blog blogger multitab. Multitab widget adalah widget yang sangat berguna dan umum. sobat dapat menempatkan empat widget di tempat yang satu widget menggunakan widget multitab. Ada banyak jenis widget multitab. saya memberimu sebuah widget Tab 4. sobat dapat melihat gambar contoh disampin ini. Berikut adalah langkah-langkah tentang cara menambahkan widget ke blogger multitab.
Catatan: Jangan menyimpan templatesobatsampai langkah terakhir selesai.
1. Pergi ke Blogger.com.
2. Login ke akun Blogger Anda.
3. Pergi ke Layout Blogger Anda> desain> Edit HTML.
4. Klik kotak Expand Template Widget.
5. Sekarang temukan </ head>.
6. Tepat di bawah </ head>, paste kode berikut :
<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>
7. Sekarang cari kode ]]></ b: skin> dan paste kode berikut di atasnya:
/*---------- Tabber Start-------- */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#fff;
}
.tabbernav {
margin-left: 3px;
margin-right: 6px;
padding: 3px 0;
border-bottom: 1px solid #dcdcdc;
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 #dcdcdc;
border-bottom:none;
background:#191919;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#191919;
background:#ffffff;
border-color:#dcdcdc;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#191919;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #dcdcdc;
border-top:0;
margin-left: 3px;
margin-right: 6px;
background:#ffffff;
}
.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 #dcdcdc;
margin:0 5px;
padding:2px 0 5px 0;
}
/*------- Tabber End--------*/
sobat dapat mengubah gaya widget dengan mengubah kode yang diberikan.
8. Sekarang cari Variable Definitions dan paste kode berikut di bawah Variable Definitions.
Name="tbbxbgcolor" <Variable description="Tab kotak Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
Name="tbbxbrcolor" <Variable description="Tab kotak Perbatasan Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable Name="tbbxcolor1" description="Tab kotak Warna 1" type="color" default="#ffffff" value="#ffffff">
<Variable Name="tbbxcolor2" description="Tab kotak Warna 2" type="color" default="#5588aa" value="#5588aa">
9. Jika sobat tidak menemukan Variable Definitions kemudian paste kode berikut di bawah ini # navbar-iframe
/ * Variable definitions
====================
Name="tbbxbgcolor" <Variable description="Tab kotak Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
Name="tbbxbrcolor" <Variable description="Tab kotak Perbatasan Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable Name="tbbxcolor1" description="Tab kotak Warna 1" type="color" default="#ffffff" value="#ffffff">
<Variable Name="tbbxcolor2" description="Tab kotak Warna 2" type="color" default="#5588aa" value="#5588aa">
* /
10. Sekarang cari <div id='sidebar-wrapper'> dan paste kode berikut di bawahnya.
<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' maxwidgets='1'/> id='tab4'
</ Div>
11. Sekarang save template sobat dan pergi ke elemen halaman dan periksa widget multitab Anda. Ini akan terlihat seperti gambar di bawah.
Selamat Mencoba, Semoga bermanfaat...!!!
Posts
0 komentar:
Post a Comment
"Komentar anda sangat bermanfaat untuk perkembangan blog ini. Jangan lupa adab berkomentar, dan jangan buang waktu untuk spam. Terima Kasih!!!."