ΠΩΣ ΒΑΖΩ ΠΟΛΛΑ WIDGETS ΜΕΣΑ ΣΕ TABS (ΚΑΡΤΕΛΕΣ) No 2

ΠΩΣ ΒΑΖΩ ΠΟΛΛΑ WIDGETS ΜΕΣΑ ΣΕ TABS (ΚΑΡΤΕΛΕΣ) No 2
Με τον παρακάτω κώδικα μπορούμε να βάλουμε πολλά widgets μέσα σε καρτέλες (tabs). Ο κώδικας αυτός μπαίνει απλά σαν gadget οπουδήποτε θέλετε, στις πλαϊνές μπάρες, στο υποδέλιδο και μέσα στην ανάρτηση. Βάλτε τους δικούς σας τίτλους στις καρτέλες #tabs-1, #tabs-2, #tabs-3, #tabs-4, αντικαθιστώντας τους δικούς μου με τα κίτρινα γράμματα.
Μετά διαγράψτε τους δικούς μου τους κώδικες που βρίσκονται ανάμεσα στα <div id="tabs-1"> και το </div>, <div id="tabs-2"> και το </div>, <div id="tabs-3"> και το </div>, <div id="tabs-4"> και το </div>, και βάλτε τους κώδικες των δικών σας widgets. Αν έχετε ανοιχτόχρωμο πρότυπο αλλάξτε την γραμμή κώδικα του stylesheet που βρίστετε στην 4^η γραμμή με την παρακάτω γραμμή κώδικα.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css" type="text/css" />

ΔΕΙΤΕ ΤΟ ΕΔΩ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ►

▼ ΑΝΤΙΓΡΑΨΤΕ ΑΥΤΟΝ ΤΟΝ ΚΩΔΙΚΑ ΕΚΕΙ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΕΜΦΑΝΙΖΕΤΑΙ ΤΟ TABS WIDGET.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>$(document).ready(function() {$("#tabs").tabs();});</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" />

<div id="tabs">

<ul><li><a href="#tabs-1">ΡΟΗ</a></li>

<li><a href="#tabs-2">MY POSTS</a></li>

<li><a href="#tabs-3">MY LINKS</a></li>

<li><a href="#tabs-4">MY WIDGETS</a></li></ul>

<div id="tabs-1">

<ul style="width: 920px; height: 600px; overflow: auto;">

<div id='bp_recent'></div>

<script style='text/javascript' src='http://yourjavascript.com/13188148569/recent-posts-scroll.js'></script>

<script style='text/javascript'>

var numberOfPosts = 178;

var showPostDate = true;

var showSummary = true;

var summaryLength = 400;

var titleLength = 100;

var showCommentCount = true;

var showThumbs = true;

var showNoImage = true;

var imgDim = 80;

var imgFloat = 'left';

var myMargin = 5;

var mediaThumbsOnly = true;

var showReadMore = false;

</script>

<script src='http://the-best-widgets.blogspot.gr/feeds/posts/summary?max-results=178&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script></ul>

</div>

<div id="tabs-2">

<iframe frameborder="0" width="930" height="760" src="https://docs.google.com/spreadsheets/d/1250n3upxFNUwA50hSL73OZK0fvXv0CHmFF1OTE_443M/pubhtml?gid=1951055053&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

</div>

<div id="tabs-3">

<iframe frameborder="0" width="930" height="760" src="https://docs.google.com/spreadsheets/d/1mdEE_FkslrVn_TEgWRdVUdp7g4rnJ9r4ge4jgglv_YA/pubhtml?gid=25900094&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

</div>

<div id="tabs-4">

<iframe frameborder="0" height="760" src="https://docs.google.com/spreadsheets/d/1aLXP3gygj2TILXQkEmfF-CBe5sqp7y5zlLk92pQU1tE/pubhtml?widget=true&amp;headers=false" width="930"></iframe>

</div></div>