Add Multi-Tabbed Section to Blogger.

Εδώ θα σας δείξουμε, πως πολύ απλά κι εύκολα, μπορείτε να ενσωματώσετε 3 gadgets σε 1, με την δυνατότητα επιλογής σε καρτέλες μενού (Tabs) για να εξοικονομήσετε χώρο στο ιστολόγιό σας.
Αφού κρατήσετε backup το template σας καλού-κακού....
θα μπείτε στο Πίνακα ελέγχου σας & μετά >>> Πρότυπο >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με με το Ctrl + F για το.....

</head>

Μόλις το βρείτε θα κάνετε επικόλληση τον παρακάτω κώδικα ακριβώς πριν από το κλείσιμο του head και κατόπιν θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ
Εδώ το css (η εμφάνισή του) του Multi-tab.

<!--Multi-Tab-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<style type='text/css'>
h2 { font-size:11px;}
.tabberlive .tabbertabhide {
display:none;
}
.tabber { font-size:11px;
}
.tabberlive {
}
ul.tabbernav
{
padding: 3px 0;
}
ul.tabbernav li
{
list-style: none;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-right: 3px;
border-bottom: none;
background: #eeedea;
text-decoration: none;
}
ul.tabbernav li a:link {}
ul.tabbernav li a:visited { }
ul.tabbernav li a:hover
{
color: #000;
background: #f8f8f4;
}
ul.tabbernav li.tabberactive a
{
background: #f8f8f4;
}
ul.tabbernav li.tabberactive a:hover
{
color: #333;
background: #f8f8f4;
}
.tabberlive .tabbertab {
padding:5px;
border-top:0;
background:#f5f5f3;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
.tabbertab p { padding-bottom:10px; line-height:140%; }
.tabbertab ul { padding:0; margin:0;}
.tabbertab ul li { padding:5px 0 6px 0; font-size:11px; }
.tabbertab ul li { background:url(http://i46.tinypic.com/334r8jl.jpg) no-repeat 0 7px; padding-left:16px; border-bottom:1px solid #eeedea;}
</style>
<!--Multi-Tab-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Σημείωση:
Σ'αυτά τα σημεία που είναι μαρκαρισμένα με χρώμα μπορείτε να αλλάξετε τους κώδικες των χρωμάτων (hexadecimal code (#------) βάζοντας κάποιους της αρεσκείας σας ή αυτούς που ταιριάζουν στα χρώματα του template σας.
Περισσότερες πληροφορίες για τα χρώματα, εδώ και εδώ

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-right: 3px;
border-bottom: none;
background: #eeedea; Το χρώμα που θα χουν οι καρτέλες σας, εδώ έχω βάλει το #333333;
text-decoration: none;
}
ul.tabbernav li a:link {}
ul.tabbernav li a:visited { }
ul.tabbernav li a:hover
{
color: #000;
background: #f8f8f4; Το χρώμα που θα χουν οι ανενεργές καρτέλες σας όταν περάσετε τον κέρσορα από πάνω τους, εδώ έχω βάλει το #666666;
}
ul.tabbernav li.tabberactive a
{
background: #f8f8f4; Το χρώμα που θα χει η κλικαρισμένη καρτέλα σας, εδώ έχω βάλει το #cc0000;
}
ul.tabbernav li.tabberactive a:hover
{
color: #333;
background: #f8f8f4; Το χρώμα που θα χει η κλικαρισμένη καρτέλα σας όταν περάσετε τον κέρσορα από πάνω τους, εδώ έχω βάλει το #990000;
}
.tabberlive .tabbertab {
padding:5px;
border-top:0;
background:#f5f5f3; Το χρώμα που θα χει όλο το παράθυρο των gadgets, εδώ έχω βάλει το #000000;
}

Εδώ το script με τις ρυθμίσεις & τις παραμέτρους.

<!--Multi-Tab-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<script type='text/javascript'>
//<![CDATA[
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;
}
}
/*----- Methods for tabberObj-----*/
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};
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);
};
}
}
/*====================*/
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>
<!--Multi-Tab-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Τώρα κάνετε αποθήκευση στο πρότυπο σας & θα πάτε στον Πίνακα ελέγχου σας --> Διάταξη --> Προσθήκη gadget --> HTML/JavaScript
και θα κάνετε αντιγραφή & επικόλληση τον παρακάτω κώδικα μέσα στο HTML/JavaScript gadget.

<!--Multi-Tab-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<div id="tab">
<div class="tabber">
<div class="tabbertab">
<h2>...Η Ετικέτα σας για το Tab 1...</h2>
<ul>
ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB 1
</ul>
</div>
<div class="tabbertab">
<h2>...Η Ετικέτα σας για το Tab 2...</h2>
<ul>
ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB 2
</ul>
</div>
<div class="tabbertab">
<h2>...Η Ετικέτα σας για το Tab 3...</h2>
<ul>
ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB 3
</ul>
</div>
</div></div>
<!--Multi-Tab-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Στα σημεία ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB-1,2,3
Θα προσθέσετε ότι είδους widget θέλετε εσείς.
Παράλληλα μπορείτε ν' αλλάξετε τα σημεία "Η Ετικέτα σας για το Tab 1,2 & 3" με τις ονομασίες που θέλετε ΕΣΕΙΣ ως ετικέτες.
μόνο μην βάλετε καμιά πρόταση.....γιατί δε θα χωρέσει.
Αυτάαααα.....Κι είστε έτοιμοι.
αααα ξέχασα τη...

Πηγή: Μπερναμπούκο
Μετάφραση:
Από την τοπική αποικιακή γλώσσα του Μπερναμπούκο, χωρίς επίσημο στάτους, ίσως με τους δυσκολότερους ιδιοματισμούς στον πλανήτη έρθ, αλλά, & χωρίς την δυνατότητα από διαθέσιμες υπηρεσίες online μετάφρασης, εις την Ελληνική.

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!