Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




33 Περιστρεφόμενο Content Slider για Blogspot


Φίλοι bloggers γεια σας !!!Σήμερα σας παρουσιάζω ένα content slider κυκλικά περιστρεφόμενο, με περίληψη κειμένου επάνω στις εικόνες που προβάλει..... Είναι λίγο δύσκολο για τους νέους bloggers, γι αυτό ας το δοκιμάσουν μόνον όσοι έχουν πείρα σε τέτοιου είδους αναρτήσεις...

DEMO 
1ο.  Πάμε λοιπόν Σχεδίαση => Επεξεργασία HTML (ΜΗ τσεκάρετε το "Επέκταση προτύπων γραφικών στοιχείων") και με ctrl F ψάχνουμε τη φράση:   ]]></b:skin>
ΑΠΟ ΠΑΝΩ ακριβώς βάλτε τον κώδικα :
/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(https://lh4.googleusercontent.com/-GpWD8uOVBa4/U0bmhDSFpeI/AAAAAAAAKjM/DJtAalBWPXc/s5/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:480px;
height:360px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(https://lh5.googleusercontent.com/-EVcCgvB9BBQ/U0bmhC-iusI/AAAAAAAAKjE/VdpDecVh-1I/s77/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(https://lh6.googleusercontent.com/-uSEkWO1yBOI/U0bmhBATq0I/AAAAAAAAKjA/s2GqZNcrG1k/s77/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/

2ο.  ...με ctrl F ψάχνουμε τη φράση:   </body>
και βάλτε τον παρακάτω κώδικα ΠΡΙΝ από αυτήν....


<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>

3ο.  Βάλτε τον παρακάτω κώδικα σαν "Προσθήκη gadget" όπως στην εικόνα που δείχνει πως βάζουμε ένα gadget :


<div id="slider">
<script style="text/javascript" src="http://pantel.googlecode.com/files/galleryposts-easySlider-min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://www.dr-blogger.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

      
***Στο πρώτο κώδικα,  είναι οι διαστάσεις του slider...
***Στο δεύτερο κώδικα,  είναι αυτοματισμός...
***Στο τρίτο κώδικα με κόκκινα γράμματα είναι : ο αριθμός των αναρτήσεων, αν θέλετε τυχαίες αναρτήσεις (false / true ), και (πολύ σημαντικό) η διεύθυνση του blog σας....
***ΠΡΟΣΟΧΗ όταν βάλετε τη διεύθυνση του blog σας, μη βάλετε 2 // (καθέτους)
ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!


{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

33 σχόλια:

Ανώνυμος είπε...

Από τίς καλύτερες αναρτήσεις!!

ΣΤΑΥΡΟΣ ΠΑΠΑΓΕΩΡΓΟΠΟΥΛΟΣ είπε...

εκει που βαζουμε το blog μας μπορουμε να βαλουμε το link απο το feedburner?αν οχι τι θα βαλουμε?το blog μου ειναι το www.s-tavros.blogspot.com και θελω να μου πειτε τι πρεπει να βαλω

pandelees karagiann είπε...

Σταύρο, το λεει ξεκάθαρα η ανάρτηση...εκεί που είναι τα κόκκινα γράμματα, θα αντικαταστήσεις τη διεύθυνση του κατασκευαστή, με τη δική σου (του blog σου)...αντί λοιπόν για "http://abu-farhan-demo.blogspot.com", θα βάλεις http://www.s-tavros.blogspot.com/ κλπ,κλπ, και θα δείχνει εικόνες από τις αναρτήσεις σου...(πρόσεξε, θα αλλάξεις το κόκκινο σημείο μόνον, και θα βάλεις τη διεύθυνσή σου....και πρόσεξε μη βάλεις 2 κάθετες (//)

Ανώνυμος είπε...

Ακολουθώ κατά γράμμα τις οδηγίες αλλά δεν μου βγάζει τις δικές μου αναρτήσεις. Τι λάθος μπορεί να κάνω?

pandelees karagiann είπε...

...να εισαι σιγουρος / η , οτι εαν μπορουσα να μαντεψω τι λαθος εχεις κανει και δεν πετυχε, χωρις να εχεις βαλει τη διευθυνση του blog σου, που το έβαλες, και χωρις να ξερω τιποτα αλλο, για τη περιπτωση σου, τοτε θα μπορουσα να μαντεψω και τα νουμερα του "τζοκερ", και να ειμαι τωρα σε καποιο τροπικο νησι, να πινω τα κοκταιηλ μου, και να μην απανταω σε ανώνυμα σχόλια....

Sambar Masoud Tasos είπε...

το έβαλα το slider(πολύ καλό) αλλά θέλω να το μικρύνω. άλλαξα και το 1ο και το 2ο κώδικα με κόκκινα γράμματα αλλά δεν άλλαξε το μέγεθος της εικόνας...
ευχαριστώ για τον χρόνο σου...

pandelees karagiann είπε...

Τασσο, θα αλλάξεις (ισόποσα) ολες τις διαστασεις στον ΠΡΩΤΟ κωδικα (δηλαδη στο css)...οπου βλεπεις width:480 (ειναι το πλατος) και height:360 (ειναι το υψος) ...και επισης πρεπει να αλλαξεις και τις τιμες υψους-πλατους στο μεγεθος του κειμένου στο τριτο κωδικα (var numchars_gal = 150).... αλλά και στην απόσταση που έχουν τα 2 βελάκια....
είναι πολλες οι τιμες που πρεπει να αλλαχθουν ...ψαξε και βρες ολα τα υψη και πλατη...

ZiseMaziMas είπε...

Θα ήθελα αν μπορείς να μου εξηγήσεις με ποιο τρόπο αλλάζει το μέγεθος. Δηλαδή εγώ θέλω να το μεγαλώσω σε πλάτος και να το μικρύνω λίγο σε ύψος. Με ποιο τρόπο μπορώ να το κάνω. Γιατί προσπάθησα πειραματικά χωρίς να γνωρίζω ακριβώς να κάνω κάποιες αλλαγές στα νούμερα, αλλά είχα κάποια προβλήματα. Να μου εξηγήσεις κάθε κώδικας ως τι λειτουργεί δηλαδή στο περίπου αν μπορείς.

pandelees karagiann είπε...

...σου ειπα τι κανεις...οπου βλεπεις width:480 (ειναι το πλατος) και height:360 (ειναι το υψος)...δεν νομιζω οτι μπορω τωρα να κατσω να κανω αλλη μια αναρτηση (γιατι μονο ετσι θα καταλαβεις τι κανει το καθε κομματι του κωδικα) τι σημαινει το καθε τι στο κωδικα...μου ζητας κατι που θελει χρονο, και εγω δεν προλαβαινω να απαντησω σε 16 email που εχω με ερωτησεις...πάλεψε το λιγο παραπανω και θα τα βρεις...βαλε και τις γνωσεις σου στα αγγλικα, για να δεις ποσο απλο ειναι...

pandelees karagiann είπε...

ωχχχχ !!! συγγνωμη...κεκτημενη ταχυτητα...νομισα οτι ησουν ο απο πανω (ο Τασσος)...χιλια συγγνωμη για την παρεξηγηση...ισχυουν ομως αυτα που σου ειπα...

Χαράλαμπος Δαμαλάς είπε...

Πως μπορώ να εφαρμόσω το τρίτο κομμάτι του κώδικα μέσα στο πρότυπο? ώστε το slider να εμφανίζεται πάνω από τις αναρτήσεις και όχι στη δεξιά στήλη!!!

pandelees karagiann είπε...

...απλα θα συρεις το gadget (που θα βαλεις το 3ο μερος του κωδικα) προς τα αριστερά, στα gadgets πάνω απο τις αναρτήσεις.....και θα πατήσεις οπωςδήποτε αποθήκευση...

Χαράλαμπος Δαμαλάς είπε...

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

Ο a-kalyptos είναι... είπε...

όταν βάζω true στο random post, δεν εμφανίζονται καθόλου αναρτήσεις. Καμιά ιδέα;

pandelees karagiann είπε...

akalyptos....δουλευει αψογα....μολις το δοκιμασα....αλλαζεις μονο τη λεξη
false ολα τα αλλα θα μεινουν ως εχουν....

Ο a-kalyptos είναι... είπε...

kale mou anthrwpe den xerw giati, se mena den emfanizei anarthseis otan to kanw, mono ta velakia sto plai.

anyway, thnx gia thn apanthsh, keep blogging!

Ο a-kalyptos είναι... είπε...

telika xanadokimasa meta apo wres, kai doulevei... peristasiaka. eite den emfanizei tpt, eite fortwnei 1-3 anarthseis. alla kyriws tpt. krima...

dimosthenis Dimokritos είπε...

μπράβο για όλα αυτά που μας προσφέρεται. σε μένα δουλεύει άψογα, μια ερώτηση θα ήθελα να κάνω, Υπάρχει τρόπος να ελαττώσουμε την ταχύτητα του Slider; Ευχαριστώ εκ των προτέρων.

pandelees karagiann είπε...

Δημοσθενη, η ταχυτητα αλλαγης εικονων, υπάρχει μεσα στο easySlider1.7.js....
Θα πρεπει να το κατεβασεις , να αλλαξεις το speed:800 και να το ξανα-ανεβασεις σε δικη σου σελιδα φιλοξενειας javascript....

betlibero είπε...

Καλησπερα, εχω ενα μονο προβλημα ενω ολα τα αλλα δουλευουν αψογα! Καθως οι εικονες αλλαζουν, τα σχολια η αν θελετε η επικεφαλιδα του αρθρου μενει σταθερη. Δηλαδη δειχνει εικονες απο αλλα αρθρα και την επικεφαλιδα απο το πρωτο μονο.

pandelees karagiann είπε...

καποιο λαθος θα εχεις κανει, η ο κωδικας css του εν λογω gadget θα συγκρουεται με τους υπολοιπους κωδικες του blog σου...
Δεν εχεις προφιλ, ουτε έβαλες τη διευθυνση του blog σου, οπότε δεν μπορώ να βοηθησω...

betlibero είπε...

Το blog μου ειναι http://betlibero.blogspot.gr/, αν μπορουσες να μου πεις και τα βελλακια πως αλλαζουν θα ηταν καλο. Ευχαριστω παντως για την γρηγορη απαντηση σου.

pandelees karagiann είπε...

ο κωδικας λειτουργει σωστα....αλλα επηρεαζεται απο τους κωδικες του προτυπου σου και με καποιο script...θελει χρονο, και εγω δεν τον εχω...
τα βελακια αν θες να τα αλλαξεις ειναι στο κωδικα css: prev.png) και next.png) ...βαλε αλλες εικονες αν θες να τα αλλαξεις...

betlibero είπε...

ευχαριστω πολυ για τον χρονο σου .η δουλεια σου ειναι παρα πολυ καλη!!!

Νίκος Τσότσος είπε...

Παρα πολυ καλη αναρτηση.
Το προβλημα που μου παρουσιαζεται εμενα ειναι πως οταν παταω και ανοιγει μια φωτογραφια(μεγενθυνει),φαινεται απο πισω και το slider.Υπαρχει τροπος να μην φαινεται?
Η ιστοσελιδα ειναι η http://ntsotsos.blogspot.com
Ευχαριστω.

pandelees karagiann είπε...

Νίκο, απ' οτι είδα, σου το κάνει όταν η φωτογραφία και το slider είναι στην ίδια ευθεία...(σε μια φωτογραφία, και όχι πάντα...)η αναρτηση αυτη είναι παλιά (σχεδον 2 χρονια)...πάντως δεν φαίνεται άσχημα !!!κοίτα όμως μια πιο πρόσφατη, και πιο εύκολη μήπως σου κάνει...
http://www.dr-blogger.com/2013/10/post-slider.html

Panos Kava είπε...

Φίλε μου καλησπέρα.

Αυτό που έψαχνα όμως θέλω μία βοήθεια. Αν μπεις μέσα σε κάποιο άρθρο το φέρνει επίσης το slider. Πώς μπορώ να το έχω μόνο στην κεντρική σελίδα;
Αυτή είναι η σελίδα μου http://taprotanea.blogspot.gr/
Σε ευχαριστώ πολύ εκ των προτέρων

pandelees karagiann είπε...

...Πανο, αυτο που ζητάς θα το βρεις εδώ...http://www.dr-blogger.com/2011/09/widgets.html

Διάλεξε :
Δείξτε Το Widget Μόνον στην Αρχική Σελίδα:

Charis Alexandres είπε...

καλησπέρα σας

το παρακάτω δεν λειτουργεί

pandelees karagiann είπε...

Λειτουργει...ολα ειναι δοκιμασμενα...δες το demo...http://find-difference.blogspot.gr/ .

Charis Alexandres είπε...

είχα κατεβάσει ένα template και δυσλειτουργούσε γενικότερα!
Εχετε δίκιο είναι άψογο. Συγχαρητήρια

Charis Alexandres είπε...

το έβαλα έπαιξε μπάλα για δέκα μέρες και τωρα ΡΟΜΠΑ... ούτε καν ψαχνομαι για κάτι εγκυρότερο!

pandelees karagiann είπε...

charis, μπηκα στο blog σου και ειδα οτι λειτουργει σωστα....Να ξερεις οτι πολλες φορες ισως βαλουμε καποιο gadget που συγκρουεται (το srcript) με καποιο αλλο που εχουμε ηδη στο blog μας...ειδικα αν υπαρχει ηδη το ιδιο η παρομοιο .js !!!!!