Πρώτα απ’ολα εξοικονομεί πολύ χώρο στην πλαϊνή σας μπάρα και δεύτερων είναι κατά πολύ πιο εύκολος τρόπος να οργανώσετε τα 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>
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 πρόσφατα σχόλια .
Καλή επιτυχία σε όλους

Αν έχετε ερώτηση η κάποιο πρόβλημα , αφήστε τα σχόλια σας !
Σουπερ! Ευκολος τροπος απλα εμενα το πρωτο απο τα 3 tabs, που βαζω εγγραφη και share this, μου τα βγαζει στην ακρη του tab 1, εντελως αριστερα! Δεν μου κακυπει δηλαδη ολη την επιφανεια, δεν βγαινει στη μεση! Μαλλον πρεπει να φτιαξω μηκος κκι πλατος. Αν κι για να πω την αληθεια, εψαχνα εδω κι καιρο κατι σαν αυτο που εχεις κι εσυ! Απλα το προβλημα ειναι οτι δεν μπορω να το εφαρμοσω στη πλαινη μπαρα γτ το μπλογκ μου εχει πολυ μικρες τις sidebar. Anyway, πολυ χρησιμο. Θα πειραματιστω εν καιρω, να δω τι μπορω να καταφερω!!
εσενα οι διαστασεις σου προσαρμοστηκαν αυτοματα??
Bravo ρε Σοφία και εγώ το έψαχνα αυτό.Το είχα βρει σε κατι ξενα sites αλλά και πάλι δεν μπόρεσα να το εφαρμόσω.Αυτό που έχεις βάλει πάνω που λέει "Αναγνωστες-αρχειοθηκη-για μενα" τι διαφορα εχει με αυτο?
α βλακεια ρωτησα.απλα το εχεις αλλαξει με βαση τις προτιμησεις σου.οκ.
και κατι αλλο θελω να ρωτησω.
πες πως εχεις φτιαξει αυτο το widget με 3 καρτέλες.
όταν ο επισκέπτης μου πατήσει την τρίτη καρτέλα θα φορτώσει εκείνη τη στιγμή το περιεχόμενό της ή θα έχει ήδη φορτώσει όλο μαζί.Δηλαδή αυτό φορτώνει όλο μαζί ή κάθε καρτέλα διαφορετικά?
Ohhhhhh να σαι καλά Σοφία, πολύ καλό και σίγουρα πολύ θα το βρούνε πρακτικό, 5 αστεριά!!!!
Μπορουμε να βάλουμε και τη λίστα με τα ιστιολογια που παρακολουθούμε;
@ gatidiakritikos
Δυστυχώς έχεις πολύ μικρές πλαϊνές μπάρες , όμως μπορείς τα το βάλεις στο footer του blog σου
Οσο για τις διαστάσεις , οχι δεν προσαρμόζονται αυτόματα . Οι διαστάσεις ειναι :πλάτος 310 px και ύψος 250px
Για να εμφανιστούν στην μεση των tabs τα gadgets , απλά κάνεις το εξής :
Στην αρχή του κώδικα του καθε gadget και στο τέλος θα βάλεις τα <center> ....</center>
δηλαδή ετσι :
<center>
Το ΠΕΡΙΕΧΟΜΕΝΟ του tab1
</center>
Θα το προσαρμοσω σε κάποια επόμενη μου ανάρτηση σε πιο μικρο μέγεθος και θα το αναρτήσω, γιατι περισσότεροι εχουν μικρές πλαϊνές μπάρες απ'οτι παρατηρώ
@ Johnpatra
Καλησπερα σου
1 .Αυτό που έχω στην αρχή είναι διαφορετικό από αυτό ,εκεί δεν χρειάζεται να εισάγεις μονος σου τα gadgets , μπαίνουν αυτόματα . Σε κάποια επόμενη μου ανάρτηση θα το γράψω και αυτο .
2 .Οι καρτέλες και το περιεχόμενο τους φορτώνουν όλα μαζί , ενεργοποιημένη είναι η πρώτη καρτέλα και το περιεχόμενο απο άλλες δυο καρτέλες φαίνεται όταν πατήσεις πάνω στην καρτέλα
@ Δημήτρης
Όντως είναι χρήσιμο γιατί γλυτώνει πολύ χώρο στο blog μας !!
Να είσαι καλά και σ'ευχαριστω πολύ :* :-D
@ Θεόδωρος
Μπορείς να το βάλεις σαν Blogroll , δηλαδή σαν μια λίστα από συνδέσμους από τα ιστολογια που παρακολουθεις
Καλησπερα κι παλι. Θα το δοκιμασω με το τροπο στο σχολιο που μου αφησες κι θα σου πω. Όντως μονο στο κατω μερος του μπλογκ μου μπορω να το βαλω!! Ειναι παντως πολυ καλο το γκατζετ, πολυ βολικο, κι πολυ μα πολυ λειτουργικο.
Γεια σου Σοφάκι και εγώ όπως και ο John patra το πρώτο θέλω. Εκτός όμως αυτού τον κώδικα για τα widget από που τον παίρνεις από το βlog soυ; To βρήκα στο βασικό κώδικα του blog αλλά από που μέχρι που είναι;
Ααααα! Αυτό μου αρέσει πολύ!! Αν τα καταφέρω θα σου στείλω μήνυμα@ :-P
Αν και δεν φαίνεται δύσκολο :-P :-P
Καλησπερες O:-)
Οχι , δεν ειναι καθολου δυσκολο !!!!! απλα αντιγραφεις τους κωδικους των widgets και τους κολλας στα σημεια που περιγραφω και αυτο ειναι ολο !
Θα περιμενω το μηνυμα σου :*
Οκ . Θα περιμενω τα νεα σου :-D
@ rdeco Kαλησπερα σου
Στις επομενες μου αναρτησεις θα κανω ενα post και για το πρωτο :-D
Οσο για τον κωδικα του widget , να σου πω οτι καταλαβα τι εννοεις , ψεματα θα σου πω !!!!
Το κατάφερα αλλά έχω ένα πρόβλημα...Δεν μπορώ να καταλάβω γιατί σε κάθε tab εμφανίζεται scroll bar..Καμιά ιδέα:-S
Άσε που για κάποιο λόγο δεν εμφανίζονται και οι αναγνώστες γκρρ
Καλησπερα :-D
Αν εμφανιζεται το scroll bar ειναι γιατι το περιεχομενο του tab ειναι μεγαλο μαλλον .
Το ειδα το blog σου και δεν προσεξα τα tabs να εχουν scroll bar
Οσο για τους αναγνωστες δεν μπορω να εξηγησω γιατι δεν εμφανιζονται <img></img>