Ακολουθήστε μας στο Google News

Ένα όμορφο και εύκολο 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
Αν έχετε ερώτηση η  κάποιο πρόβλημα , αφήστε τα σχόλια σας !



                                                                        ΠΗΓΗ
Δημοσίευση σχολίου (0)
Νεότερη Παλαιότερη