12:21
LazyHacker
In this tutorial I will teach you how to add a multitab widget to blogger blogs. Multitab widget is very useful and common widget. You can place four widgets in a place of one widget using multitab widget. There are many types of multitab widgets. I am giving you a 4 Tab widget. You can see the picture of multitab widget I am giving you on the left side. Below are the steps on how to add multitab widget to blogger.
Note: Don't save your template until the last step is completed.
1. Go to Blogger.com.
2. Login to your Blogger account.
3. Go to your Blogger Layout > design > Edit HTML.
4. Click the box of expand widget templates.
5. Now find </head>.
6. Just below </head>, paste the following code.
<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){varchildNodes,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){varrVal,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){vartempObj,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. Now find ]]></b:skin> and paste the following code before it.
You can change the style of widget by changing the given code.
8. Now find Variable Definitions and paste the following code below the 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">
9. If you don't find Variable Definitions then paste the following code below #navbar-iframe .
/* 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">*/
10. Now find <div id='sidebar-wrapper'> and paste the following code below it.
<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>
11. Now save your template and go to page elements and check your multitab widget. It will look like the picture below.
If you are facing any problem related to this post, then comment me below.
Posted in: BLOGGER HACKING
0 comments:
Post a Comment