Το πιο ευκολο tabbed content ~ BlogyTricks

Επειδή έχω καιρό να σας δείξω κάνα ωραίο widgetaki λόγου του διαγωνισμού που είχαμε είπα να σας δείξω αυτή τη φόρα ένα πολλή χρήσιμο και ωραίο widget για τους Bloggers που θέλουν να τα έχουν όλα τακτοποιημένα.

Αυτό το widget ονομάζεται tabbed content ευτυχώς δεν είναι από εκεί καινά τα δύσκολα widgets για tabs είναι το πιο εύκολο σε αυτήν την κατηγορία. Για πάμε να δούμε...

1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.
2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Προσθήκη Gadget/HTML/Javascript.

3) Αφηστε τον τιτλο κενο.

4) Και επικολουμε τον παρακατω κωδικα:

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/c

reate-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

5) Η θεση που πρεπει να μπει το widget:

-Και πατηστε αποθηκευση.

Σημιωσεις
Απλα αλλαζετε τα παραπανω κοκκινα γραμματα με τα δικα σας χρωματα και τον αριθμο για το ποσα tab θελετε.

- Για το Demo ειναι το παρακατω Link:

Demo

- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.

- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή πατηστε παρακολουθηση.

Ευχαριστω.

Πηγη κωδικα: bloggersentral