Featured Images Slideshow-Slider

Featured Images Slideshow+Slider

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

 

Smooth Featured Post Slideshow

Smooth Jquery Featured Post Slideshow For Blogger

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.

Create JQuery Featured Content Slideshow

How To Create JQuery Featured Content Slideshow

Create JQuery Featured Content Slideshow

Image Slider

JavaScript Image Slider For Blogger

Today I am sharing another cool slider which works with JavaScript and no jQuery and flash is needed.This slider contains a ribbon at the left top corner of slider and it is named as "What's Hot" also it contains a beautiful slice effect which slices image into 12 parts,these main features increase beauty of the slider.Another great feature of this slider is it is highly customizable so that to edit it as you wish and which will perfectly suits to your blog.This slider is created by menucool.com and I have created a bloggerized version of this slider to works perfect with blogger blog.See the demo of the slider by clicking on the demo button below,

Live Slider Demo

Simple Image Gallery SlideShow

  Simple Image Gallery With Easy Customization Options

Image gallerys,slideshows are the best ways to show off your photos,featured posts,images and any other material as you wish.Previously we published a tutorial about adding nivo slider to blogger but many of you gets the problems while adding it to blogger blog.That's why I considered to share a fully and easily customizable image slider/gallery.This is a simple image slider with lots of customizing options such as dimensions,play,pause,interval between next and previous slide and some other options.The script of this gallery is taken from dynamicdrive and I have made some changes so that you can easily add it to your blog.The installation is one step installation,you just have copy and paste the code inside content section of HTML/JavaScript widget i.e you can add it as HTML/JavaScript widget.Press the red button below to see live demo of the slider.

Live Slider Demo  

SlideShow

ΠΩΣ ΒΑΖΩ ΑΠΛΟ SLIDESHOW

Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshowχωρίς κουμπιά εναλλαγής μεταξύ των εικόνων, αλλά με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε, και με όποια ταχύτητα εναλλαγής των εικόνων επιλέξουμε. Αλλάξτε τα μώβ links των εικόνων με τις δικές σας εικόνες. Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας τα γαλάζια νούμερα. Αλλάξτε την ταχύτητα εναλλαγής των εικόνων αλλάζοντας το πορτοκαλίνούμερο. Βάλτε το σωστό αριθμό εικόνων που έχει το slideshow σας αντικαθιστώντας το πράσινο νούμερο (step<9).

<script type="text/javascript">

var slideimages = new Array()

slideimages[0] = new Image()

slideimages[0].src = "https://lh5.googleusercontent.com/-K7auwzq2lPk/UiiIvU7QHPI/AAAAAAAAJLI/c5aQs1DrUUw/w1208-h755-no/LEFKADA-03.jpg"

slideimages[1] = new Image()

slideimages[1].src = "https://lh3.googleusercontent.com/-iHpUXMPF_2U/UiiIviNxdII/AAAAAAAAJLM/7Q8ShXmAat0/w1208-h755-no/LEYKADA-24.jpg"

slideimages[2] = new Image()

slideimages[2].src = "https://lh4.googleusercontent.com/-LB8zka6NnYA/UiiIxk_UOSI/AAAAAAAAJLU/YTAWF35UMF8/w1208-h755-no/LEYKADA-33.jpg"

slideimages[3] = new Image()

slideimages[3].src = "https://lh4.googleusercontent.com/-RA6WwNSgQZs/UiiI00-Hd4I/AAAAAAAAJLk/wAesP7BV1XY/w1208-h755-no/LEYKADA-40.jpg"

slideimages[4] = new Image()

slideimages[4].src = "https://lh6.googleusercontent.com/-rYFEmmnBIPc/UiiIsH-kt3I/AAAAAAAAJK0/wxyhIm00mb4/w1208-h755-no/LEYKADA-15.jpg"

slideimages[5] = new Image()

slideimages[5].src = "https://lh5.googleusercontent.com/-xoRjaryAc9g/UiiJQylwIqI/AAAAAAAAJMU/pmISgNnhBIw/w1208-h755-no/KERKYRA-16.jpg"

slideimages[6] = new Image()

slideimages[6].src = "https://lh3.googleusercontent.com/-iOVUvdDaKYs/UneTpxlN0_I/AAAAAAAAJtg/WwRlzagKsmQ/w1208-h755-no/KEFALONIA-27.JPG"

slideimages[7] = new Image()

slideimages[7].src = "https://lh5.googleusercontent.com/-HVjJAI6w9oo/UneTzBuu6UI/AAAAAAAAJuA/Fl47Ee-i42A/w1208-h755-no/KEFALONIA-30.jpg"

slideimages[8] = new Image()

slideimages[8].src = "https://lh6.googleusercontent.com/-xMrBsaQHZNo/UneT6wxUc8I/AAAAAAAAJuc/e8gRNK9YdRM/w1208-h755-no/KEFALONIA-35.jpg"

slideimages[9] = new Image()

slideimages[9].src = "https://lh6.googleusercontent.com/-J_Rk_piwwB0/UneUATS4u5I/AAAAAAAAJuw/6JcMeTQs1jI/w1208-h755-no/KEFALONIA-38.jpg"

</script>

<img src="https://lh3.googleusercontent.com/-jp0Au6w08ZI/UiiJX-w2XqI/AAAAAAAAJNU/hphvolf0pxk/w1208-h755-no/KERKYRA-01.jpg" id="slide" width="944" height="590" />

<script type="text/javascript">

var step=0

function slideit(){

if (!document.images)

return

document.getElementById('slide').src = slideimages[step].src

if (step<9)

step++

else

step=0

setTimeout("slideit()",4000)

}

slideit()

</script>

- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow.html#more

SlideShow Thumbnails

TH THUMBNAILS

Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του ορίσουμε όταν περάσουμε τον δείκτη του ποντικιού μας πάνω από τις μικρογραφίες των εικόνων που εμφανίζονται στο πάνω μέρος του slideshow. Περιέχει κώδικα css και html και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας τα γαλάζια νούμερα στη 5^ηκαι 6^η γραμμή του κώδικα. Οι διαστάσεις των μικρογραφιών των εικόνων αλλάζουν αλλάζοντας τα πράσινα νούμερα στη 43^ηκαι 44^η γραμμή του κώδικα. 



Η διάσταση της προβαλόμενης εικόνας αλλάζει αλλάζοντας το πορτοκαλί νούμερο στην 37^η γραμμή του κώδικα. Αντικαταστήστε τα μώβ links των εικόνων μου με τα δικά σας links. Το γαλάζιο link αντικαταστήστε το με ένα σύνδεσμο που θα οδηγεί είτε στην ίδια την εικόνα σας είτε σε ένα site που εσείς θέλετε.

- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow-with-thumbnails.html#more

SLIDESHOW WITH THUMBNAILS

SlideShow with Thumbnails

Το παρακάτω slideshow μας δείχνει τις εικόνες του στο μέγεθος που θα του ορίσουμε όταν περάσουμε τον δείκτη του ποντικιού μας πάνω από τις μικρογραφίες των εικόνων που εμφανίζονται στο πάνω μέρος του slideshow. Περιέχει κώδικα css και html και μπορεί να μπεί σαν gadget σε οποιοδήποτε σημείο του blog μας αρκεί να προσαρμόσουμε τις διαστάσεις του. Οι διαστάσεις του slideshow μπορούν να αλλάξουν αλλάζοντας τα γαλάζια νούμερα στη 5ηκαι 6η γραμμή του κώδικα. Οι διαστάσεις των μικρογραφιών των εικόνων αλλάζουν αλλάζοντας τα πράσινα νούμερα στη 43ηκαι 44η γραμμή του κώδικα.

Η διάσταση της προβαλόμενης εικόνας αλλάζει αλλάζοντας το πορτοκαλί νούμερο στην 37η γραμμή του κώδικα. Αντικαταστήστε τα μώβ links των εικόνων μου με τα δικά σας links. Το γαλάζιο link αντικαταστήστε το με ένα σύνδεσμο που θα οδηγεί είτε στην ίδια την εικόνα σας είτε σε ένα site που εσείς θέλετε.
- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/slideshow-with-thumbnails.html#more

Simple SlideShow

Simple Slideshow/Απλή Εναλλαγή Εικόνων

Νέοι bloggers γεια σας !!! Ξέρετε πια ότι έχω ιδιαίτερη αδυναμία σε widgets και gadgets για προβολές εικόνων...σας έχω παρουσιάσει ήδη αρκετούς κώδικες για προβολή εικόνων  !!! Βρήκα λοιπόν σε ένα forum έναν νέο κώδικα που είναι πολύ απλός και ελαφρύς για το blog σας, για ένα slideshow...έχω ήδη ένα DEMO ΕΔΩ, και μπαίνει εύκολα σαν gadget...

Slideshow

Amazing CSS Slideshow

Νέοι bloggers γεια σας...χωρίς πολλά λόγια, σας δίνω DEMO & DEMO , και σας δίνω το κώδικα που θα βάλετε σαν gadget HTML/JavaScript...Είναι ένα απίθανο slide show που θα αναδείξει τις εικόνες σας, και μπαίνει εύκολα, χωρίς να καθυστερεί το άνοιγμα της σελίδας σας....