Αυτόματα Τabs στην Sidebar σου

Πριν ξεκινήσεις καλό θα ήταν να κάνεις Λήψη του Προτύπου σου.

Ακολουθήστε τα παρακάτω βήματα:

1) Σύνδεση στον blogger
2) Σχεδίαση
3) Επεξεργασία HTML
4) Επέκταση προτύπων γραφικών στοιχείων
5) Με CTRL + F βρείτε το </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){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>

6) Τώρα βρείτε το ]]></b:skin> και από πάνω του επικολλήστε το παρακάτω:

/*-- tabbed section starts --- */.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;}/*-- tabbed section ends---*/

7) Κάνε Αποθήκευση Προτύπου

8) Πήγαινε πάνω-πάνω τώρα και βρες τα Variable Definitions

9) Ψάξε το σημείο που τελιώνουν τα Variable Definitions

Άμα το ψάξεις σιγά-σιγά θα βρείς το μέρος που τελιώνει. Είναι εκεί που έχει ένα */




10) Μόλις βρείς το τέλος των 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">

11) Τώρα βρείτε το <div id='sidebar-wrapper'>
Αν δεν το βρείς ψάξε για:
div id="sidebar"
div id="sidebar-wrapper"

Αλλιώς μπορείς να το προσθέσεις σε ένα HTML/JAVASCRIPT που θα βρεις απο την Προσθήκη Gadget. (2η επιλογή, αλλά χρειάζεται κάποια γνώση πάνω στα blogs)

Ο κώδικας που θα προσθέσεις είναι ο παρακάτω:

<div class="tabber"><section class="tabbertab" id="tab1" maxwidgets="9"></section><section class="tabbertab" id="tab2" maxwidgets="9"></section><section class="tabbertab" id="tab3" maxwidgets="9"></section><section class="tabbertab" id="tab4" maxwidgets="9"></section></div>

12) Αποθήκευση Προτύπου

13) Τέλος, όμως πάτα "Σχεδίαση" για να τα δείς.



14) Πρόσθεσε ή Μετακίνησέ τα Gadgets σου, εκεί που θέλεις και ΤΕΛΟΣ !


ΠΗΓΗ