Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Σάββατο, Μαρτίου 27

20

Ένα όμορφο και εύκολο 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 πρόσφατα  σχόλια .

Καλή επιτυχία σε όλους smile_teeth
Αν έχετε ερώτηση η  κάποιο πρόβλημα , αφήστε τα σχόλια σας !

20:

gatodiakritikos είπε...

Σουπερ! Ευκολος τροπος απλα εμενα το πρωτο απο τα 3 tabs, που βαζω εγγραφη και share this, μου τα βγαζει στην ακρη του tab 1, εντελως αριστερα! Δεν μου κακυπει δηλαδη ολη την επιφανεια, δεν βγαινει στη μεση! Μαλλον πρεπει να φτιαξω μηκος κκι πλατος. Αν κι για να πω την αληθεια, εψαχνα εδω κι καιρο κατι σαν αυτο που εχεις κι εσυ! Απλα το προβλημα ειναι οτι δεν μπορω να το εφαρμοσω στη πλαινη μπαρα γτ το μπλογκ μου εχει πολυ μικρες τις sidebar. Anyway, πολυ χρησιμο. Θα πειραματιστω εν καιρω, να δω τι μπορω να καταφερω!!

gatodiakritikos είπε...

εσενα οι διαστασεις σου προσαρμοστηκαν αυτοματα??

Johnpatra είπε...

Bravo ρε Σοφία και εγώ το έψαχνα αυτό.Το είχα βρει σε κατι ξενα sites αλλά και πάλι δεν μπόρεσα να το εφαρμόσω.Αυτό που έχεις βάλει πάνω που λέει "Αναγνωστες-αρχειοθηκη-για μενα" τι διαφορα εχει με αυτο?

Johnpatra είπε...

α βλακεια ρωτησα.απλα το εχεις αλλαξει με βαση τις προτιμησεις σου.οκ.
και κατι αλλο θελω να ρωτησω.
πες πως εχεις φτιαξει αυτο το widget με 3 καρτέλες.
όταν ο επισκέπτης μου πατήσει την τρίτη καρτέλα θα φορτώσει εκείνη τη στιγμή το περιεχόμενό της ή θα έχει ήδη φορτώσει όλο μαζί.Δηλαδή αυτό φορτώνει όλο μαζί ή κάθε καρτέλα διαφορετικά?

Δημήτρης είπε...

Ohhhhhh να σαι καλά Σοφία, πολύ καλό και σίγουρα πολύ θα το βρούνε πρακτικό, 5 αστεριά!!!!

Θεόδωρος είπε...

Μπορουμε να βάλουμε και τη λίστα με τα ιστιολογια που παρακολουθούμε;

bloggertrics είπε...

@ gatidiakritikos

Δυστυχώς έχεις πολύ μικρές πλαϊνές μπάρες , όμως μπορείς τα το βάλεις στο footer του blog σου

Οσο για τις διαστάσεις , οχι δεν προσαρμόζονται αυτόματα . Οι διαστάσεις ειναι :πλάτος 310 px και ύψος  250px

Για να εμφανιστούν στην μεση των tabs τα gadgets , απλά κάνεις το εξής :

Στην αρχή του κώδικα του καθε  gadget και στο τέλος θα βάλεις  τα <center> ....</center>

δηλαδή ετσι :

<center>
Το ΠΕΡΙΕΧΟΜΕΝΟ του tab1
</center>

Θα το προσαρμοσω σε κάποια  επόμενη μου ανάρτηση σε πιο μικρο μέγεθος και θα το αναρτήσω, γιατι περισσότεροι εχουν μικρές πλαϊνές μπάρες απ'οτι παρατηρώ

bloggertrics είπε...

@ Johnpatra

Καλησπερα σου

1 .Αυτό που έχω στην αρχή είναι διαφορετικό  από αυτό ,εκεί δεν χρειάζεται να εισάγεις μονος σου τα gadgets , μπαίνουν αυτόματα . Σε κάποια επόμενη μου ανάρτηση θα το γράψω και αυτο .

2 .Οι καρτέλες και το περιεχόμενο τους φορτώνουν όλα μαζί , ενεργοποιημένη είναι η πρώτη καρτέλα και το περιεχόμενο απο άλλες δυο καρτέλες φαίνεται όταν πατήσεις πάνω στην καρτέλα

bloggertrics είπε...

@ Δημήτρης

Όντως είναι χρήσιμο γιατί γλυτώνει πολύ χώρο στο blog μας !!
Να είσαι καλά και σ'ευχαριστω πολύ :* :-D  

bloggertrics είπε...

@ Θεόδωρος

Μπορείς να το βάλεις σαν Blogroll , δηλαδή σαν μια λίστα από συνδέσμους από τα ιστολογια που παρακολουθεις 

gatodiakritikos είπε...

Καλησπερα κι παλι. Θα το δοκιμασω με το τροπο στο σχολιο που μου αφησες κι θα σου πω. Όντως μονο στο κατω μερος του μπλογκ μου μπορω να το βαλω!! Ειναι παντως πολυ καλο το γκατζετ, πολυ βολικο, κι πολυ μα πολυ λειτουργικο.

rdeco είπε...

Γεια σου Σοφάκι και εγώ όπως και ο John patra το πρώτο θέλω. Εκτός όμως αυτού τον κώδικα για τα widget από που τον παίρνεις από το βlog soυ; To βρήκα στο βασικό κώδικα του blog αλλά από που μέχρι που είναι;

post2.soo είπε...

Ααααα! Αυτό μου αρέσει πολύ!! Αν τα καταφέρω θα σου στείλω μήνυμα@ :-P

post2.soo είπε...

Αν και δεν φαίνεται δύσκολο :-P :-P

bloggertrics είπε...

Καλησπερες  O:-)

Οχι , δεν ειναι καθολου δυσκολο !!!!! απλα αντιγραφεις τους κωδικους των widgets και τους κολλας στα σημεια που περιγραφω και αυτο ειναι ολο !

Θα περιμενω το μηνυμα σου  :*

bloggertrics είπε...

Οκ . Θα περιμενω τα νεα σου  :-D

bloggertrics είπε...

@ rdeco Kαλησπερα σου 

Στις επομενες μου αναρτησεις θα κανω ενα post και για το πρωτο  :-D

Οσο για τον κωδικα του widget , να σου πω οτι καταλαβα τι εννοεις , ψεματα θα σου πω !!!!

post2.soo είπε...

Το κατάφερα αλλά έχω ένα πρόβλημα...Δεν μπορώ να καταλάβω γιατί σε κάθε tab εμφανίζεται scroll bar..Καμιά ιδέα:-S

post2.soo είπε...

Άσε που για κάποιο λόγο δεν εμφανίζονται και οι αναγνώστες γκρρ

bloggertrics είπε...

Καλησπερα  :-D

Αν εμφανιζεται το scroll bar ειναι γιατι το περιεχομενο του tab ειναι μεγαλο μαλλον .

Το ειδα το blog σου και δεν προσεξα τα tabs να εχουν scroll bar 
Οσο για τους αναγνωστες δεν μπορω να εξηγησω  γιατι δεν εμφανιζονται <img></img>

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS