Αυτόματα Tabbed section στο sidebar σας

               Δείτε τα Tabs σε λειτουργία 


Μετά από πολλές ερωτήσεις που δέχτηκα, για το πως έβαλα τα Tabs που έχω στην πλαϊνή μου μπάρα , σήμερα αποφάσισα να δούμε, πως μπορούμε να δημιουργήσουμε ένα καινούργιο τμήμα στο sidebar μας .
Ένα Αυτόματο tabbed section , όπου μπορούμε να συμπεριλάβουμε διάφορα gadgets .

Για παράδειγμα , Αναγνώστες , αρχειοθήκη και ότι άλλο θέλετε εσείς !

Τα συγκεκριμένα Tabs χρησιμοποιούν την δυνατότητα variables , δηλαδή , περιλαμβάνει τη χρήση μεταβλητών που μας δίνει την δυνατότητα να επεξεργαστούμε τους χρωματικούς συνδυασμούς , από την καρτέλα ελέγχου του Blogger.

ΑΣ ΔΟΎΜΕ ΤΏΡΑ ΠΩΣ ΘΑ ΤΟ ΕΓΚΑΤΑΣΤΉΣΟΥΜΕ ΣΤΟ BLOG ΜΑΣ :

1 . Συνδεθείτε στο Blogger λογαριασμό σας και πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων 

2  . Εντοπίστε στο πρότυπό σας την ετικέτα </ 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) 
{ 
  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>

  

3 . Τώρα εντοπίστε στο πρότυπό σας την ετικέτα ]]></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---*/

4 .  Αποθηκεύετε όλες τις αλλαγές που έχετε κάνει μέχρι τώρα .

5 . Αφού σώσατε τις αλλαγές που κάνατε , τώρα θα εντοπίσετε στο πρότυπό σας το τμήμα οπού περιλαμβάνονται τα Variable definitions 
Πάντα αυτό το τμήμα βρίσκετε στο ξεκίνημα του προτύπου μας .

Θα μοιάζει κάπως έτσι :

Βρείτε το σημείο που τελειώνουν τα 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">

6 .  Για να ενεργοποιήσετε τα Tabs , εντοπίστε στο πρότυπό σας την γραμμή :

<div id='sidebar-wrapper'>

Και επικολλήστε από κάτω τον παρακάτω κώδικα :

<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 . Εφόσον έχετε τελειώσει την εγκατάσταση , τώρα πηγαίνετε στην καρτέλα Στοιχεία Σελίδας και βλέπετε στο sidebar σας , αν υπάρχουν  Προσθήκη gadget επιλογές για τα Tabs .

Θα φαίνονται κάπως έτσι :

Τώρα μετακινήστε μέσα στις καρτέλες των tabs όποια gadgets θέλετε να συμπεριλάβετε και αποθηκεύετε .

Όταν θα μεταφερθείτε στην αρχική σας σελίδα θα δείτε να φορτώνουν τα Tabs  .

ΓΙΑ ΝΑ ΠΡΟΣΑΡΜΌΣΕΤΕ ΤΟΥΣ ΧΡΩΜΑΤΙΚΟΎΣ ΣΥΝΔΥΑΣΜΟΎΣ ΤΩΝ TABS :

 Πηγαίνετε στην καρτέλα Σχεδιαστής προτύπων και  από εκεί επιλέγετε την ετικέταΠροηγμένη .
Κοιτάξτε προς το τέλος των επιλογών και εκεί θα δείτε τις επιλογές για τα Tabs .

Επιλέγετε από εκεί τους χρωματικούς συνδυασμούς που ταιριάζουν στο πρότυπό σας και αποθηκεύετε τις αλλαγές !

Αυτό ήτανε όλο ... Τώρα έχετε ένα υπέροχο Αυτόματο tabbed section στο sidebar σας !

Καλή επιτυχία σε όλους !!

bloggertrics