Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τρίτη, Απριλίου 27

4

Jquery Featured Post Slideshow για Blogger - Updated!


FEATURED CONTENT SLIDESHOW

                                                 Δείτε το Demo

Σε αυτήν την ανάρτηση θα δούμε πώς να προσθέσουμε ένα όμορφο featured content slideshow στο blog μας , για να για να δείξουμε τις πιο πρόσφατες αναρτήσεις η  εικόνες μας  στους αναγνώστες μας .
Είναι παρόμοιο με αυτό που χρησιμοποιώ στο δικό μου blog ,μόνο που έχει απλοποιηθεί και έχει υποστεί ελαφριά μετατροπή , για να είναι εύκολο στην χρήση και στην προσαρμογή   

Το αρχικό  script δημιουργήθηκε από  Boban Karišik και μπορείτε να δείτε εδώ

Είναι πολύ εύκολο στην εγκατάσταση και μπορείτε εύκολα να διαχειριστείτε το πλάτος και το ύψος και να προσαρμόσετε το slideshow  σε αναλογίες που ταιριάζει στα template σας.
Προκαθορισμένο πλάτος  είναι 400px και Προκαθορισμένο ύψος είναι 200px.


Νομίζω ότι θα αγαπήσετε πολύ αυτό το slideshow.

Ας δούμε τώρα πως θα κάνουμε εγκατάσταση στο blog μας :

1. Κάνετε Login στο Πίνακα Ελέγχου του blogger σας –> Διάταξη –> Επεξεργασία HTML


2. Πλοηγηθείτε στο HTML του Προτύπου σας προς τα κάτω μέχρι να βρείτε την ετικέτα :  </ head>


3.  Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον ακριβώς  πάνω από την ετικέτα :  </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #000033;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 400px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 21px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 400px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fefefe;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

Προσαρμογή :

background:#000000; – >  Το χρώμα υπόβαθρου του slider , στην προκείμενη περίπτωση είναι το μαύρο
border:1px solid #000033; –> Το χρώμα πλαισίου του slider ,στην προκείμενη περίπτωση είναι το σκούρο μπλε
width: 400px; –> Το πλάτος  του slider
height: 200px; –> Το ύψος  του slider
font: 21px Trebuchet MS, sans-serif; –> Το μέγεθος και το στυλ της γραμματοσειράς στην διαφάνεια πληροφοριών
background-color: #000; –> Το χρώμα υπόβαθρου  της διαφάνειας πληροφοριών
color: #fefefe; –> Το χρώμα κειμένου   της διαφάνειας πληροφοριών του slider

4.  Κάνετε τις προσαρμογές που θέλετε και αποθηκεύετε το πρότυπο σας

5.  Τώρα  πηγαίνετε  Διάταξη -> Στοιχεία Σελίδας και κάντε κλικ στο « Προσθήκη gadget ->HTML/JavaScript ».
Αντιγράψτε τον παρακάτω κώδικα  και επικολλήστε  τον μέσα  και πατήστε το κουμπί Αποθήκευση  .

Σημειωση : Μετά από μικρή ασυμβατότητα που παρουσίασε ο παρακάτω κώδικας , έχει γίνει ενημέρωση του κώδικα και είναι πλέον πλήρως λειτουργικός 

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/04/wooden-zigzag-free-premium-blogger.html">
<img style="width:400px;height:200px;" src="http://lh6.ggpht.com/_L116RpGjEMY/S8uZzfjxoAI/AAAAAAAABgc/G3ql4z3HWdI/wzigzag_thumb%5B15%5D.png?imgmax=800" />
<span> Download Wooden ZigZag Blogger Template</span></a>
</li>
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/04/garden-free-premium-artistic-blogger.html">
<img style="width:400px;height:200px;" src="http://lh6.ggpht.com/_L116RpGjEMY/S8WrJzyZ8NI/AAAAAAAABdY/1SvcbDuIcTg/144201035031_thumb6.png?imgmax=800" />
<span>Download The Garden Blogger Template</span></a>
</li>
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/04/worn-wall-free-blogger-template.html">
<img style="width:400px;height:200px;" src="http://lh5.ggpht.com/_L116RpGjEMY/S7ukCYk05kI/AAAAAAAABdA/lki35S3qGYA/snap_2_thumb%5B2%5D.png?imgmax=800" />
<span>Download Worn Wall Blogger Template</span></a>
</li>
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/03/wish-tree-blogger-template.html">
<img style="width:400px;height:200px;" src="http://lh4.ggpht.com/_L116RpGjEMY/S5O5qV1f4_I/AAAAAAAABVM/gLWae0gXWy0/snap_10_thumb%5B5%5D.png?imgmax=800" />
<span>Download Wish Tree Blogger Template</span></a>
</li>
<li class="s3sliderImage"> </li> </ul>
</div>
<div class='clear'></div>



Σημειωση : Αλλάζετε τα Links και τις εικόνες με τα δικά σας και αποθηκεύετε

Τώρα πλέον έχετε εγκαταστήσει με επιτυχία το featured content slideshow στο blog σας

4:

mavros gatos είπε...

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

bloggertrics είπε...

Καλησπερα σου  :-D  να εισαι καλα !!!

Οκ .θα το δω αυτο που λες και θα κανω ενημερωση τον κωδικα !

mavros gatos είπε...

Βρήκα το λάθος, προς το τέλος στο γκάτζετ ήταν κάποια στοιχεία αλλαγμένα, έκανα σύγκριση με τον κώδικα που έχεις εδώ και είδα την διαφορά. Και πάλι ευχαριστώ.

Fingolfin είπε...

Καλησπέρα. Μόλις εγκατέστησα το slideshow και δείχνει πάρα πολύ καλό. Έχω όμως το εξής πρόβλημα. Μέχρι 4 φωτογραφίες δουλεύει άψογα. Από 5 και πάνω ενώ σαν κώδικας φαίνεται σωστός δεν μου τα εμφανίζει. Καμιά ιδέα για το τι μπορεί να φταίει?

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS