BACKGROUND SLIDER FOR BLOGGER

BACKGROUND SLIDER FOR BLOGGER

Με τον παρακάτω κώδικα μπορείτε να προβάλετε όσες εικόνες θέλετε να εναλλάσονται σαν slides στη θέση του background του ιστολογίου σας. Την ταχύτητα εναλλαγής μπορείτε να την ρυθμίσετε αλλάζοντας το {speed: 400} ενώ το χρόνο που θα παραμένει κάθε φωτογραφία μπορείτε να τον ρυθμίσετε αλλάζοντας το [index]);}, 4000); Μπορείτε να αντικαταστήσετε τα πορτοκαλί links των εικόνων με τα δικά σας link εικόνων,

τα οποία καλό είναι να έχετε ανεβάσει στο Google+ για να έχετε την δυνατότητα να αλλάξετε τις διαστάσεις τους μέσα από τα link τους όπως έχω κάνει εγώ στα παρακάτω links εικόνων και τις έχω βάλει όλες σε μία μέση διάσταση 1600pxΧ1000px. Ο κώδικας πρέπει να μπεί μέσα στο πρότυπο πρίν την ετικέτα </head>.

ΔΕΙΤΕ ΤΟ BACKGROUND SLIDER ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΑΥΤΟ ΤΟ DEMO BLOG

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

<script src='https://googledrive.com/host/0B8GeBeRdN9NsYUM4RDJybkpyVkk' type='text/javascript'></script>

<script>

var images = [

"https://lh3.googleusercontent.com/-jp0Au6w08ZI/UiiJX-w2XqI/AAAAAAAAJNU/hphvolf0pxk/w1600-h1000-no/KERKYRA-01.jpg",

"https://lh3.googleusercontent.com/-xoRjaryAc9g/UiiJQylwIqI/AAAAAAAAJMU/pmISgNnhBIw/w1600-h1000-no/KERKYRA-16.jpg",

"https://lh6.googleusercontent.com/-ikhiPRWC_q4/VPgSk6MnQ0I/AAAAAAAAPsU/HOME07eX2xE/w1600-h1000-no/SKOPELOS-30.jpg",

"https://lh6.googleusercontent.com/-5OnOCD_nSW0/VPgSnAHejeI/AAAAAAAAPso/aWtQQQIgO60/w1600-h1000-no/SKOPELOS-35g.jpg",

"https://lh5.googleusercontent.com/-LNyox8qqU10/UiiK7dhOtlI/AAAAAAAAJRw/77ETxxQDWAg/w1600-h1000-no/ZAKYNTHOS-13.jpg",

"https://lh4.googleusercontent.com/-qKRUbH5mgwM/VPgSrhKjprI/AAAAAAAAPtg/Sjk5fqDS__c/w1600-h1000-no/ZAKYNTHOS-18.jpg",

"https://lh5.googleusercontent.com/-o50M8GFbcJM/VPgVav9EGOI/AAAAAAAAPuw/z-6HM_7nQ7w/w1600-h1000-no/LEYKADA-42.jpg",

"https://lh6.googleusercontent.com/-WIP_q6utLFg/VPgR-BhpoxI/AAAAAAAAPlY/xYAY4MfvAIE/w1600-h1000-no/LEYKADA-24.jpg",

"https://lh5.googleusercontent.com/-U3GvEa1JsHs/VPgYOIvV73I/AAAAAAAAPyo/wZOD01Mo1xQ/w1600-h1000-no/POROS-31.jpg",

"https://lh5.googleusercontent.com/-kgDf8G9RKC4/UiiJ4GclhbI/AAAAAAAAJN8/De2MiS7qo8c/w1600-h1000-no/POROS-13.jpg",

"https://lh4.googleusercontent.com/-WC6LtVBeoGw/VPgSnJu1M_I/AAAAAAAAPsw/cFO-vpDMCoU/w1600-h1000-no/Santorini-18.jpg",

"https://lh4.googleusercontent.com/-HoY-3TZhjDU/VPgSSq3YeLI/AAAAAAAAPpA/nm6n4xPogJw/w1600-h1000-no/SANTORINI-58.jpg",

"https://lh4.googleusercontent.com/-SPuGH_Icarw/VPgSM5P_d6I/AAAAAAAAPos/fcFqaHci9Kg/w1600-h1000-no/SANTORINI-112.jpg",

"https://lh4.googleusercontent.com/-gek8LsMmPHw/VPgSNQUYS6I/AAAAAAAAPoA/9SYmk3Y1ujc/w1600-h1000-no/SANTORINI-2.jpg"];

$(images).each(function(){

$('<img/>')[0].src = this;});

var index = 0;

$.backstretch(images[index], {speed: 400});

var slideshow = setInterval(function() {

index = (index >= images.length - 1) ? 0 : index + 1;

$.backstretch(images[index]);}, 4000);

</script>

http://the-best-widgets.blogspot.gr/2015/09/background-slider-for-blogger.html