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

Tab Widget (widget πλοήγησης με καρτέλες) είναι ένα widget που πρέπει να υπάρχει σε κάθε blog , γιατί δεν είναι μόνο όμορφα , αλλά είναι και πολύ χρήσιμα !
Πρώτα απ’ολα εξοικονομεί πολύ χώρο στην πλαϊνή σας μπάρα και δεύτερων είναι κατά πολύ πιο εύκολος τρόπος να οργανώσετε τα gadget σας .
Υπάρχουν εκατοντάδες διαθέσιμα Tab Widget στο internet , τα οποία περιλαμβάνουν CSS και javascrpts αλλά αυτό που θα δούμε τώρα είναι ο πιο σίγουρος και ο πιο απλός τρόπος να το βάλετε στο blog σας .
Για να το δείτε σε λειτουργία , απλά ρίξτε μια μάτια στην πλαϊνή μπάρα του blog μου , στο “MY STATS” .
Λοιπόν ας ξεκινήσουμε …….
ΟΔΗΓΙΕΣ :
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 πρόσφατων αναρτήσεων σας , κάθε γραπτό κείμενο, κλπ….

Για παράδειγμα, μπορείτε να προσθέσετε widget πρόσφατα σχόλια στην πρώτη καρτέλα, ΟΝΟΜΑ ΤΑΒ 1 θα γίνει Σχόλια και θα αντικαταστήσετε ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 με τον κώδικα HTML του widget πρόσφατα σχόλια .

ωραιος
θα το βαλω και εγω

(βάση των κανονισμών του φορουμ σε περίπτωση που αντιγράφετε κάποιο κείμενο πρέπει να αναφέρετε
πάντα και την προέλευση του κειμένου - πηγή, εκτος αν ειναι δικη σου η παραπανω παρουσιαση οποτε οκ)

πω το ξέχασα!!Λοιπόν το κείμενο είναι μεταφρασμένο απο την σελίδα BloggerStop.Net

αν θέλω να βάλω το "αρχείο αναρτήσεων", τις "δημοφιλείς αναρτήσεις" κλπ πως θα βρω τους κώδικες?

lavaloves έγραψε:αν θέλω να βάλω το "αρχείο αναρτήσεων", τις "δημοφιλείς αναρτήσεις" κλπ πως θα βρω τους κώδικες?

στο συγκεκριμενο κωδικο δεν ξερω τι μπορει να δεχεται και τι οχι ..
πχ ενας ειναι αυτος

Κώδικας:

http://YOURSITE.blogspot.com/feeds/posts/default .

το φτιαχνεις αναλογα με τι χρωμα θες η ποσες αναρτησεις θες να περιεχει κτλ κτλ κτλ

μπορεις αν θες να σου δειχνει μονο αυτα που λες να κανεις και αυτο
Aυτόματο slider με τις πρόσφατες αναρτήσεις ή
Εμφάνιση προσφάτων αναρτήσεων ( recent posts ) ή
Εμφάνιση δημοφιλών αναρτήσεων ( popular posts )

θα ήθελα να βάλω αυτά που με παρέπεμψες αλλά σε ένα κουτάκι όπως αυτό που έχει πάνω. αλλά δεν μπορώ να βρω τον κώδικα για το καθένα....
αυτό που έβαλες http://YOURSITE.blogspot.com/feeds/posts/default . εκτός απο το μπλογκ μου στη θέση του "yoursite" συμπληρώνεται και με κάποιο άλλο στοιχείο. δεν κάνει τίποτα έτσι!
σορυ που σας ζάλισα πάλι....

μήπως γνωρίζετε κάποιο άλλο widget παρόμοιο?

αναφερεται πιο πανω παρομοιο widget σουε χω βαλει το λινκ ..
Aυτόματο slider με τις πρόσφατες αναρτήσεις

αυτο σου εξηγω δεν μπορω να γνωριζω ποιον τυπο κωδικο θα δεχτει και τι επεξεργασια θα θελει διοτι χρειαζεται να πειραματιστεις πανω σε αυτον αναλογα το τι θες να κανεις ..δεν υπαρχει ενας μπουσουλας ή ενας γενικος τυπος