GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

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

TABS WIDGET
ΠΩΣ ΒΑΖΩ ΠΟΛΛΑ 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>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".