13 Ένα όμορφο και εύκολο Tab Widget για το blog σας

Νέοι bloggers γεια σας ! Ενα όμορφο  Tab Widget για το blog σας θα σας δείξω σήμερα...Μου το είχε στείλει πριν από μέρες ο φίλος white pigeon και το παρουσιάζω γιατί είναι εύκολο, (για νέους αλλά και για παλιούς bloggers) και το παρουσίασε πρώτο το blog  http://bloggertrics.blogspot.com/ ( η καταπληκτική Σοφία)...Είναι ένας κώδικας που μπαίνει σαν gadget και δεν μπλέκετε καθόλου με το "Επεξεργασία HTML"....

1 . Πηγαίνετε Διάταξη – > Στοιχεία Σελίδας  - > Προσθήκη gadget –> HTML/JavaScript
έπειτα , αντιγράφετε τον παρακάτω κώδικα και τον κολλάτε εκεί 

<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i   = 0;
  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i    = 0;
  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>
<style type="text/css">
div.TabView div.Tabs
{
    height: 24px;
    overflow: hidden;
}
div.TabView div.Tabs a
{
    float: left;
    display: block;
    width:  90px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid black;     border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Serif;
    font-weight: 900;
   color: #000000; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
    background-color:#404040; 
    color: #ffffff; }
div.TabView div.Pages
{
    clear: both;
    border: 1px solid #404040;     overflow: hidden;
}
div.TabView div.Pages div.Page
{
    height: 100%;
    padding: 0px;
    overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
    padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 310px;">
<a>ΟΝΟΜΑ ΤΑΒ 1</a> <a>ΟΝΟΜΑ TΑΒ 2</a> <a>ΟΝΟΜΑ ΤΑΒ 3</a> </div>
<div class="Pages" style="width: 310px; height: 250px;">
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2 
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3 
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
    tabview_initialize('TabView');
</script>

2 . Επεξεργαστείτε το ανάλογα με τις ανάγκες σας :
border: 1px solid black;  - είναι το χρώμα και το πάχος περιγράμματος / frame γύρο από τα links του  Tab Widget , το επιλεγμένο χρώμα πλαισίου σε αυτήν την περίπτωση είναι το μαύρο και το πάχος είναι το 1px
color: #000000;  - είναι το χρώμα της γραμματοσειράς , το προεπιλεγμένο χρώμα είναι το μαύρο
background-color:#404040;   - είναι το hover χρώμα  του περιγράμματος / frame του Tab Widget , όταν από πάνω  περνάμε το ποντίκι μας
color: #ffffff; - είναι το hover χρώμα της γραμματοσειράς του Tab Widget , όταν από πάνω  περνάμε το ποντίκι μας 
border: 1px solid #404040; – είναι το χρώμα περιγράμματος / frame γύρο από το κύριος σώμα του  Tab Widget , το επιλεγμένο χρώμα πλαισίου σε αυτήν την περίπτωση είναι το μαύρο και το πάχος είναι τι 1px
Μπορείτε να αλλάξετε τα χρώματα ανάλογα με τις ανάγκες σας , για να δείτε όλα τα χρώματα 
ΟΝΟΜΑ ΤΑΒ 1, ΟΝΟΜΑ ΤΑΒ 2 , ΟΝΟΜΑ ΤΑΒ 3  - Αντικαταστήστε τα με τους τίτλους των tab σας
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 , ΤΑΒ 2 , ΤΑΒ 1 - Εδώ πηγαίνουν οι κωδικοί περιεχομένου σας / widgets, τα οποία μπορει να ειναι  widget πρόσφατων  αναρτήσεων  σας , κάθε γραπτό κείμενο, κλπ….

ΟΝΟΜΑ ΤΑΒ 1 ΟΝΟΜΑ TΑΒ 2 ΟΝΟΜΑ ΤΑΒ 3

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3

Επειδή όμως σε αυτό το blog κάνω σχεδόν πάντα μια επέκταση μιας εφαρμογής, σας έχω και κάτι ακόμα...Το tab αυτό είναι για τη sidebar και για αυτό έχει μόνο 3 tab (3 χώρους που μπορείτε να αξιοποιήσετε)...μπορείτε όμως να το βάλετε στα gadget πάνω η κάτω από τις αναρτήσεις όπου υπάρχει αρκετός χώρος και να βάλετε περισσότερα tab....Δείτε παρακάτω....



<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i   = 0;
  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i    = 0;
  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>
<style type="text/css">
div.TabView div.Tabs
{
    height: 24px;
    overflow: hidden;
}
div.TabView div.Tabs a
{
    float: left;
    display: block;
    width:  120px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid black;     border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Serif;
    font-weight: 900;
   color: #000000; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
    background-color:#404040;
    color: #ffffff; }
div.TabView div.Pages
{
    clear: both;
    border: 1px solid #404040;     overflow: hidden;
}
div.TabView div.Pages div.Page
{
    height: 100%;
    padding: 0px;
    overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
    padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 500px;">
<a>ΟΝΟΜΑ ΤΑΒ 1</a> <a>ΟΝΟΜΑ TΑΒ 2</a> <a>ΟΝΟΜΑ ΤΑΒ 3</a> <a>ΟΝΟΜΑ ΤΑΒ 4</a></div>
<div class="Pages" style="width: 500px; height: 250px;">
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 4
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
    tabview_initialize('TabView');
</script>

...αρκεί να επαναλάβετε και τοποθετήσετε σωστά τις 2 κόκκινες φράσεις του κώδικα, και να αλλάξετε τα μεγέθη width: 500px;  ανάλογα με τον χώρο που έχετε στο πλάτος
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!

***(Apdate):Το δεύτερο tab που βλέπετε πιο κάτω, δεν λειτουργεί, γιατί υπακούει στην ίδια εντολή με το από πάνω, που είναι το    tabview .......για να λειτουργήσει και δεύτερο tab στην ίδια σελίδα, στον δεύτερο κώδικα που θα εφαρμόσετε, αλλάξτε όλες τις φράσεις  tabview  με τη φράση   stabview   και  θα λειτουργήσει και το 2ο tab....

ΟΝΟΜΑ ΤΑΒ 1 ΟΝΟΜΑ TΑΒ 2 ΟΝΟΜΑ ΤΑΒ 3 ΟΝΟΜΑ ΤΑΒ 4

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 4