Tabbed content-widget για Bloggers

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

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

.blogytricks.info/.bloggersentral.com