Aυτόματο slider με τις πρόσφατες αναρτήσεις

Εγώ πάλι ψάχνω πώς να βάλω ένα αυτόματο slider με τις πρόσφατες αναρτήσεις που να δείχνει τίτλο, φωτογραφία, περίληψη, "read more" όπως έχει πχ αυτό το site http://www.bloggerblogtemplates.com/.

Βρήκα οδηγίες ΕΔΩ αλλά δεν καταλαβαίνω πού πρέπει να κολλήσω τι! τα έβαλα στη σειρά αλλά έτσι στο τέλος δεν μου σώζει τον κώδικα... βρίσκει λέει ανοιχτό < a>.

Έπειτα όσα βρήκα ήταν slider για θέματα που επιλέγω εγώ κι όχι για τα πρόσφατα...


Αν ξέρει κάποιος... με διαφωτίζει!!

Ευχαριστώ

ειναι αρκετα πολυπλοκη η διαδικασια και δεν την εχω δοκιμασει ποτε
αν θες διαβασε εδω ισως βοηθηθεις πιο πολυ Make a Slide Show with thumbnails on Blogger ( λεει οτι οι οδηγιες ειναι για Recent posts)

το οτι σου βρισκει ανοιχτο < a>σημαινει ότι ειτε ο κωδικας ειναι λαθος ειτε εσυ εχεις κανει λαθος σε ενα κομματι στην αντιγραφη του διοτι συνηθως το κομματι κωδικου που αρχιζει με < a> κλεινει με < /a>

μπορω να μπω στην διαδικασια να κανω ενα τεστ να δω αν μπορω να τα καταφερω και υστερα να στο περιγραψω οπως μπορω καλυτερα αλλα θελει χρονο...

σημ. το λινκ που παραθετεις ειναι το part 1 ελπιζω να συνεχισες την διαδικασια και με το part 2
(step 1 : Using jquery and javascript to make slider effect in blogspot
step 2 : Use javascript to get information on recent posts such as title ,images ,post summary and show them all in slider)

Kαταρχήν ευχαριστώ για την άμεση απάντηση!

Το part2 δεν μπόρεσα να το συνεχίσω γιατί δεν έσωζε τον κώδικα και δεν ξέρω που έμεινε ανοιχτός... πρέπει να ξαναδοκιμάσω τα βήματα...

Το link που μου δίνεις θα το μελετήσω!

Αν όντως θες να κάνεις πρόβα... έχω τον κώδικά για τα επιλεκτικά άρθρα, δεν ξέρω αν παίρνει αλλαγή ώστε να βλέπει τα πρόσφατα!!

οχι δεν με ενδιαφερει το λινκ που εβαλες διοτι δεν μπορω να τροποποιω αλλωνων δουλειες ... και δεν ειναι και σωστο ..ελπιζω να καταλαβαινεις  
( οποτε αφαιρεσα το λινκ αποτο ποστ σου )


παμε λοιπον στην σελίδα που μας εδωσες αρχικα  ΕΔΩ  

στο part 1αυτο που βγαινει σαν αποτελεσμα ειναι αυτο σε μενα ...





και το part 2 βγαινει ετσι





μπορω να σου δωσω οποιον απο τους 2 κωδικους θες ετσι οπως τα βλεπεις φτιαγμενα με title test και εσυ θα πρεπει προφανως να αλλαξεις τα δεδομενα με τους τιτλους και να προσθεσεις τα Url των εικονων ( εγω δεν εχω βαλει   url για αυτο και το μαυρο φοντο)

ισως να χρειαστει να κανεις και αλλες αλλαγες οποτε καλο ειναι να διαβασεις και το Part 1 και 2 διοτι αναφερει καποια δεδομενα οπως ποσα ποστ θες να εμφανιζονται , θα πρεπει να προσθεσεις το Url του blog σου κτλ κτλ

εγω απλα ακολουθησα την διαδικασια που αναφερει χωρις να αλλαξω τα στοιχεια για αυτο και εμφανισιακα βγαινει με Title test , βεβαια ετσι οπως εχει κανει την αναρτηση ειναι δυσκολο να κατανοηθει η σειρα που πρεπει να ακολουθησει καποιος για να δημιουργησει τον σωστο κωδικο..ειναι πολυ μπερδεμενο...κοβεις ..ραβεις κτλ


σημ . η ολη διαδικασια γινεται με προσθηκη Gadget HTML/JavaScript απο την καρτελα στοιχεια σελίδας και οχι με επεξεργασια του κωδικα Html που πιθανολογω ετσι δοκιμασες εσυ  

skouliki έγραψε:μπορω να σου δωσω οποιον απο τους 2 κωδικους θες ...ισως να χρειαστει να κανεις και αλλες αλλαγες

βεβαια ετσι οπως εχει κανει την αναρτηση ειναι δυσκολο να κατανοηθει η σειρα που πρεπει να ακολουθησει καποιος για να δημιουργησει τον σωστο κωδικο..ειναι πολυ μπερδεμενο...κοβεις ..ραβεις κτλ

θησαυρέ μου εσύ!!! Κοίτα, με ενδιαφέρει η 2η περίπτωση όπου φαντάζομαι μέσα από τον κώδικα θα μπορώ να αλλάξω χρώματα, γραμματοσειρές κλπ... κι ελπίζω να βγάλω άκρη του που κολλάω τι!!!

Στειλ' τα, θα κάνω πρόβες κι αν τα καταφέρω θα σου δείξω το αποτέλεσμα!!!

σημ . η ολη διαδικασια γινεται με προσθηκη Gadget HTML/JavaScript απο την καρτελα στοιχεια σελίδας και οχι με επεξεργασια του κωδικα Html που πιθανολογω ετσι δοκιμασες εσυ  

Μέσα έπεσες!! σε πρώτη φάση αυτό έκανα... αλλά έναν άλλο κώδικα που βρήκα για τα επιλεκτικά ποστ το εξηγούσε και έτσι εκεί το πέτυχα  

αυτος ειναι ο κωδικος

Κώδικας:

<style>
body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}


/* ---------[ Slideshow ]--------- */

#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}



.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>
<script type="text/javascript">

$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,  // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: 'fade',  // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $('#slideshow');

 // set tabs to current hard coded navigation items
 this.tabs = $('ul.slides-nav li', this.context);

 // remove hard coded navigation items from DOM
 // because they aren't hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $('div.slides > ul', $slideshow.context).cycle({
    fx: $slideshow.fx,
    timeout: $slideshow.timeout,
    speed: $slideshow.slideSpeed,
    fastOnEvent: $slideshow.tabSpeed,
    pager: $('ul.slides-nav', $slideshow.context),
    pagerAnchorBuilder: $slideshow.prepareTabs,
    before: $slideshow.activateTab,
    pauseOnPagerHover: true,
    pause: true
 });   
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
    // remove active styling from all other tabs
    $slideshow.tabs.removeClass('on');

    // add active styling to active button
    activeTab.parent().addClass('on');
 }   
}   
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
}); 

</script>
<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">

<!--code of the left part : image ,title and post summary -->

<div class="slides">
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>
</div>
<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>

</div>
</div>

βεβαια δεν ειμαι σιγουρη οτι θα παιξει με τα recent posts αλλα δοκιμασε το και παμε βημα βημα

manoula έγραψε:θα μπορώ να αλλάξω χρώματα

οι κωδικοι των χρωματων HTML color codes

Λοιπόοοοοοοοοοοοοον...
μετά από ώρες επί ωρών πρόβες... κατάφερα μια τρύπα στο νερό!

Αρχικά εμφάνιζε το αποτέλεσμα πάνω πάνω στη σελίδα κι όχι εκεί που ήθελα εγώ! Με τα πολλά βρήκα άκρη και το έβαλα στη θέση του, αλλά, είτε από τη σελίδα που βρήκα εγώ, είτε από αυτή που μου έδειξες, είτε από τον κώδικα που μου έδωσες... άκρη δεν έβγαλα!
Κατάφερα μεν να τα κολλήσω στη σωστή θέση αλλά κάπου ή δεν δουλεύει σωστά ή εγώ δεν αντικαθιστώ τα πάντα σωστά με τα δικά μου γιατί στο τέλος μου εμφάνιζε απλά ένα κατάμαυρο κουτί! και στην τελευταία πρόβα-αλλαγή δεν έβγαζε απολύτως τίποτα παρά μόνο τον τίτλο που είχα δώσει εγώ στο gadget!!!

Τέλος πάντων! Μάλλον είναι πολύ δύσκολο και πολύπλοκο αυτό που θέλω να κάνω και το πράγμα δυσκολεύει ακόμη περισσότερο μιας που στην ουσία κώδικα δεν ξέρω παρά μόνο εμπειρικά

Αν νομίζεις πως μπορείς να με βοηθήσεις έχει καλώς... αλλιώς μην το παιδεύουμε και σε κουράζω κιόλας!! :Winking:

manoula έγραψε:Λοιπόοοοοοοοοοοοοον...
μετά  από ώρες επί ωρών πρόβες... κατάφερα μια τρύπα στο νερό!

Αρχικά εμφάνιζε το αποτέλεσμα πάνω πάνω στη σελίδα κι όχι εκεί που ήθελα εγώ! Με τα πολλά βρήκα άκρη και το έβαλα στη θέση του, αλλά, είτε από τη σελίδα που βρήκα εγώ, είτε από αυτή που μου έδειξες, είτε από τον κώδικα που μου έδωσες... άκρη δεν έβγαλα!
Κατάφερα μεν να τα κολλήσω στη σωστή θέση αλλά κάπου ή δεν δουλεύει σωστά ή εγώ δεν αντικαθιστώ τα πάντα σωστά με τα δικά μου γιατί στο τέλος μου εμφάνιζε απλά ένα κατάμαυρο κουτί! και στην τελευταία πρόβα-αλλαγή δεν έβγαζε απολύτως τίποτα παρά μόνο τον τίτλο που είχα δώσει εγώ στο gadget!!!

Τέλος πάντων! Μάλλον είναι πολύ δύσκολο και πολύπλοκο αυτό που θέλω να κάνω και το πράγμα δυσκολεύει ακόμη περισσότερο μιας που στην ουσία κώδικα δεν ξέρω παρά μόνο εμπειρικά  

Αν  νομίζεις πως μπορείς να με βοηθήσεις έχει καλώς... αλλιώς μην το παιδεύουμε και σε κουράζω κιόλας!!  

καταρχιν η θεση που θα το βαλεις εχει να κανει με το τι προτυπο εχεις
αν πας σχεδιαση - στοιχεια σελίδας ....εχεις ή οχι την δυνατοτητα να κανεις drag ενα gadget εκει που θες
πχ εμενα εχει αυτην την μορφη



πας σχεδιαση- σχεδιαστης προτυπων - διαταξη και απο εκει μπορεις να διαλεξεις μια διαταξη που σε βολευει (αναλογα με το προτυπο που εχεις)

παμε παρακατω ...για μενα το μηκος του παραθυρου ειναι πολυ μεγαλο που σημαινει οτι θα πρεπει να πειραξεις το "width" (και παλι θελει δοκιμες διοτι ολα τα στοιχεις εχουν ενα παχος οποτε θα πρεπει να πειραματιστεις )
απο εκει και περα οι αλλαγες ειναι ενα θεμα .δεν εχω κοιταξει να το κανω σε μενα .. να δω απο περιεργεια τι θα βγαλει ....
θα δω αν προλαβω μεσοβδομαδα και θα σου πω

Ναι, έχω τη δυνατότητα να βάλω το gadget εκεί που θέλω, απλά ψαχνόμουν αν κόλλαγα τα πράγματα στο σωστό σημείο στον κώδικα, αλλά όπως σου είπα, στο τέλος το πέτυχα (αυτό τουλάχιστον!)

Η αλήθεια είναι πως έχω πεισμώσει με το θέμα γιατί θα ήθελα πολύ να το έχω στη σελίδα μου... θα το ξαναψάξω μπας και βρω τίποτα... αν σου βγει κι εσένα κάτι... τα λέμε

λοιπον θα σου στειλω με προσωπικο μηνυμα το λινκ απο το τεστ blog που εχω
εκει θα δεις και εσυ την παρακατω εικονα σε εφαρμογη στο τελος της σελίδας

Πριν πατησεις τιποτα θα δεις οτι απο μονο του παει απο το ενα θεμα στο αλλο σαν "βιντεακι-παρουσιαση"

λοιπον πατωντας απο δεξια ..αυτοματα σου εμφανιζεται το ιδιο απο αριστερα με δυνατοτητα συνδεσμου και λινκ ....δες το και εσυ ..στο δεξιο κομματι δεν εχει λινκ διοτι το λινκ μαζι με κειμενο περιγραφης εμφανιζεται ταυτοχρονα απο αριστερα ....





επισης εφτιαξα το συνολικο μεγεθος το βλεπεις ? εισαι οκ ...?
εννοειται οτι μπορεις να προσθεσεις πανω απο 5 αναρτησεις / οσες θες

ολα αυτα θα στα γραψω αναλυτικα σε επομενο ποστ μου ... ωστε να μπορεις να επεξεργαστεις και εσυ των κωδικα αναλογως

το μονο που εχει μεινει ειναι οτι δεν δειχνει τις προσφατες αναρτησεις αλλα αυτες που εσυ εχεις καθορισει ( θα το βρω ομως και αυτο στην πορεια , ας το παμε βημα βημα )

απο τον κωδικο που σου εχω δωσει

Κώδικας:

<style>
body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}


/* ---------[ Slideshow ]--------- */

#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}



.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>
<script type="text/javascript">

$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: 'fade',   // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $('#slideshow');

 // set tabs to current hard coded navigation items
 this.tabs = $('ul.slides-nav li', this.context);

 // remove hard coded navigation items from DOM
 // because they aren't hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $('div.slides > ul', $slideshow.context).cycle({
     fx: $slideshow.fx,
     timeout: $slideshow.timeout,
     speed: $slideshow.slideSpeed,
     fastOnEvent: $slideshow.tabSpeed,
     pager: $('ul.slides-nav', $slideshow.context),
     pagerAnchorBuilder: $slideshow.prepareTabs,
     before: $slideshow.activateTab,
     pauseOnPagerHover: true,
     pause: true
 });    
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
     // remove active styling from all other tabs
     $slideshow.tabs.removeClass('on');

     // add active styling to active button
     activeTab.parent().addClass('on');
 }    
}    
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
});  

</script>
<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">

<!--code of the left part : image ,title and post summary -->

<div class="slides">
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>
</div>
<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>

</div>
</div>


τα κομματια που πρεπει να τροποποιηθουν αναλογως τα βλεπεις στις εικονες που ακολουθουν ( η εικονα 1 αφορα στην αρχη του κωδικου , οι εικονες 2,3 στο τελος του ) για να πετυχεις το αποτελεσμα που εχω στο παραπανω ποστ

Είσαι φοβερή μιλάμε!!!
μακάρι να βγάλεις άκρη και με τα πρόσφατα άρθρα!!!


όμως έχω απορία! τι προβλημα έχουν οι οδηγίες ΕΔΩ και δεν μπορούμε να εμφανίσουμε τα πρόσφατα; αφού γι' αυτά είναι στημένος ο κώδικας έτσι δεν είναι;

manoula έγραψε:Είσαι φοβερή μιλάμε!!!
μακάρι να βγάλεις άκρη και με τα πρόσφατα άρθρα!!!


όμως έχω απορία! τι προβλημα έχουν οι οδηγίες ΕΔΩ και δεν μπορούμε να εμφανίσουμε τα πρόσφατα; αφού γι' αυτά είναι στημένος ο κώδικας έτσι δεν είναι;

το Part 1 ειναι οκ ..το 2 εχει προβληματα και δεν βγαινει .... ετσι και εγω πηρα το πρωτο μερος και το αλλαξα μεχρι εκει που το 2 αλλαζει χωρις προβλημα
εκανα κολαζ δηλαδη ..αν παρατηρησεις και τα σχολια κατω απο το part 2 το αναφερουν οτι δεν παιζει ο κωδικας ..αντε βρες ακρη σε ποιο σημειο κολλαει και που...

ΟΚ! τουλάχιστον τώρα ξέρω πως δεν έχω κάνει εγώ πατάτα

σωστο εμενα δνε μου βγηκε οταν το εκανα ..αν βρω ακρη παραπερα θα σου πω ..

Καλησπέρα!

Ψάχνω εδώ και καιρό ένα content slider
Και επειδή είμαι λιγουλάκι κολλημένος με τη σχεδίαση θέλω να ρωτήσω μερικά πράματάκια για αυτό τον κώδικα που δίνεις παραπάνω... (για το part 2)
Κατ' αρχάς χαίρομαι ιδιαίτερα που δεν χρειάζεται επέμβαση στην επεξεργασία του html...
Κατα δεύτερον θα ήθελα να ξέρω πώς στην ευχή θα κάνω 1 pixel το πάχος του περιγράμματος και να μην είναι λευκό... θέλω ένα άλλο
Κατα τρίτον γιατί στην προεπισκόπηση μου κάνει το χρώμα του κειμένου των αναρτήσεων (ασχετο) από λευκό - γκρί;
Και βέβαια ήθελα να ξέρω πόσο είανι το μέγεθος των εικόνων που θα πάνε για url...

Πολλά έβαλα ε;
Anyway, ΚΑΛΗ ΑΝΑΣΤΑΣΗ...

ολα αυτα γινονται αν τροποποιησεις λιγο τον κωδικο πχ το Background color ή το width κτλ

αναλογα με τις δικές επιθυμιες ..οποτε θα πρεπει να "πειραξεις" τον κωδικο όλον στα σημεια που θες να αλλαξεις

( αν θες παντως μπορει να σε βοηθησει λίγο και αυτος ο οδηγος Δείτε τον οδηγό για την επεξεργασία html του Blog μας )

επισης το μεγεθος των εικονων ρυθμιζεται αναλογα απο τον κωδικο οπως αναγραφεται στον ηδη υπαρχον ειναι 150Χ 150 αλλα το κανεις οσο θες

Καλησπέρααα
κάποιος να με βοηθήσει πλιζζζζζ....

έχω δοκιμάσει σε ένα τεστ μπλογκ αυτό το template
αλλά δεν ξέρω για ποιο λόγο το slider (ή όπως αλλιώς λέγεται!) δεν μου βγάζει τις πρόσφατες αναρτήσεις.
α! και σε ένα άλλο που το δοκίμασα, βγάζει ο,τι αναρτήσεις θέλει εκεί μέσα.
*υπάρχει και πρόβλημα με το φόντο, αλλά αυτό δεν ξέρω αν πρέπει να το αναλύσω σε αυτό το τοπικ!

lavaloves έγραψε:Καλησπέρααα
κάποιος να με βοηθήσει πλιζζζζζ....

έχω δοκιμάσει σε ένα τεστ μπλογκ αυτό το template
αλλά δεν ξέρω για ποιο λόγο το slider (ή όπως αλλιώς λέγεται!) δεν μου βγάζει τις πρόσφατες αναρτήσεις.
α! και σε ένα άλλο που το δοκίμασα, βγάζει ο,τι αναρτήσεις θέλει εκεί μέσα.
*υπάρχει και πρόβλημα με το φόντο, αλλά αυτό δεν ξέρω αν πρέπει να το αναλύσω σε αυτό το τοπικ!

 προφανως το συγκεκριμμενο εχει κολλημα θες να δοκιμασεις αυτο
βαλε εδω Add Widget → HTML/JavaScript
αυτο

Κώδικας:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "προσθηκη του url blog σου"
});
</script>

skouliki έγραψε:

lavaloves έγραψε:Καλησπέρααα
κάποιος να με βοηθήσει πλιζζζζζ....

έχω δοκιμάσει σε ένα τεστ μπλογκ αυτό το template
αλλά δεν ξέρω για ποιο λόγο το slider (ή όπως αλλιώς λέγεται!) δεν μου βγάζει τις πρόσφατες αναρτήσεις.
α! και σε ένα άλλο που το δοκίμασα, βγάζει ο,τι αναρτήσεις θέλει εκεί μέσα.
*υπάρχει και πρόβλημα με το φόντο, αλλά αυτό δεν ξέρω αν πρέπει να το αναλύσω σε αυτό το τοπικ!

 προφανως το συγκεκριμμενο εχει κολλημα θες να δοκιμασεις αυτο
βαλε εδω Add Widget → HTML/JavaScript
αυτο

Κώδικας:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "προσθηκη του url blog σου"
});
</script>

σκουλίκιιι σ ευχαριστώ για την άμεση απάντηση  
δεν μπορώ να κρατήσω το πρότυπο που σου έβαλα πιο πάνω και να το βάλω εκεί αυτό που μου προτείνεις? θα το δεχτεί?
το δοκίμασα σε κανονικό πρότυπο (του blogger) και το δέχτηκε. αλλά μήπως υπάρχει κάποιο που να μπαίνει κατα μήκος του τίτλου, πιάνοντας δηλαδή όλη τη σελίδα και να αλλάζει και μόνο του?

λογικα θα παιξει ναι..
εννοεισ να παιζει οριζοντια ? και οχι καθετα ... ισως να μπορουμε να το κανουμε edit αν εννοεις αυτο να το δω
αν σου επιτρεπει το προτυπο σου μπορεις απο τον πινακα ελεγχου να το τοποθετησεις οπου θελεις
δεξια αριστερα κατω απο τον τιτλο ..πανω κτλ

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

αν μπορούσες θα ήθελα να μου έλεγες "πώς" να το κάνω...
ψάχνω μέσα στον κώδικά του προτύπου που σου έβαλα μήπως έχει κάποιο τρόπο να το "ενεργοποιήσω" να παίζει τις πρόσφατες αναρτήσεις, αλλά ακόμα δεν έχω βρει κάτι.
αν μπει κάποιο άλλο slider σε αυτόν τον κώδικα, θα βγαίνει όπως αυτό του προτύπου? (οριζόντια)

αυτό που εννοώ όταν λέω "αυτόματο", εννοώ (εκτός από το να ανανεώνεται μόνο του), να μη χρειάζεται να πατάω εγώ τα βελάκια όταν θα μπαίνω στη σελίδα αλλά όσο είμαι εκεί να περνούν μόνες τους οι νέες αναρτήσεις κι ας έχει και τα βελάκια.
ελπίζω να μη σε κούρασα!!!  

κανονικα απο μονο του θα πρεπει να ανανεωνεται αφου ειναι αυτοματο...
αλλα ισως κολλανε ...:/

οσο για το αλλο ειναι συναρτηση του κωδικου του προσθετου με τον κωδικα του προτυπου σου
ουτε και ξερω απεξω τι και πως ψαχνωντας παω εφοσον καθε προτυπο εχει και αλλο κωδικα