JavaScript Image Slider

Φίλες και φίλοι γειά σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ λειτουργικό slider
για τα blog μας!Είναι πολύ εύκολο στην εγκατάσταση του αλλά και στις ρυθμίσεις που
πρέπει να γίνουν για την λειτουργία του όπως εμείς την θέλουμε!!Μπορείτε να παρουσιάσετε
δημοφιλείς αναρτήσεις σας,φωτογραφίες,διευθύνσεις που θέλετε να επισκεφτούν οι αναγνώστες
σας κτλ κτλ!!

Για να το εγκαταστήσετε

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--> 
........................................................................................................................................

<style type="text/css"> /* JavaScript Image Slider By SafeTricks.Net/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 500px;margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px;height: 111px;position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat; 
z-index: 7;} #slider { width: 500px; height: 218px;background: #fff url(https://lh6.googleusercontent.com/-dUlRL_1uvb8/UeukrC4KLdI/AAAAAAAADGI
/BPMUH-Ky3PM/s50/load.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover{ color: #DA0; } div.navBulletsWrapper { top: 250px; left: 190px;width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://lh4.googleusercontent.com/-5lXfFwjn3Zc/Ueuk9-
d55YI/AAAAAAAADGQ/f-BPiMxCK9M/s22/slider-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: 
translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="https://googledrive.com/host/0B_1mqJd2tC8qLXpKRHhzd2RXTlU" type="text/javascript"></script>  <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider">
<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ" 
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ" 
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ" 
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ" 
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a><a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ">
<img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ" 
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a> </div></div><br/><br/><br/> 
.................................................................................................
ΑΛΛΑΓΕΣ

width: 500px;  Εάν αυξήσουμε το 500 μεγαλώνει το πλάτος του slider,αν το μειώσουμε μικραίνει height: 218px; και εάν αυξήσουμε το 218 αυξάνεται το ύψος του slider και το αντίστροφο αν
μειώσουμε το 218!ΠΡΟΣΟΧΗ οι φωτογραφίες μας πρέπει να είναι στο ίδιο μέγεθος όπως το slider!


ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ Εδώ μπαίνει το λινκ της διεύθυνση μας!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ Εδώ μπαίνει η διεύθυνση της φώτο που θα φαίνεται!

ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ Εδώ γράφουμε τι θέλουμε να φαίνεται!

Τα δύσκολά τελίωσαν!!

Εάν θέλετε να προσθέσετε και άλλες αναρτήσεις τότε πριν το </div> στο τελος του κώδικα
προσθέστε επιπλέον

<a href="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟ URL ΤΗΣ ΔΙΕΥΘΥΝΣΗ ΜΑΣ"><img src="ΕΔΩ ΒΑΖΟΥΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΜΑΣ" 
alt="ΕΔΩ ΒΑΖΟΥΜΕ ΤΟΝ ΤΙΤΛΟ ΜΑΣ"/></a>

Εάν αυξήσετε το μέγεθος του slider τότε πρέπει και να πειράξετε και το

top: 250px; left: 190px; είναι η θέση των σφαιρών(Bullets)που πρέπει να είναι στο κέντρο
οπότε θα πειράξετε το 250 και το 190 για να τις κεντράρετε!

Όποιος δεν θέλει το whats hot όπως θα δείτε στο DEMO αφαιρέστε από τον κώδικα αυτό..

#ribbon { width: 111px;height: 111px;position: absolute; top: -4px; left: -4px; background: url(https://lh4.googleusercontent.com/-PaZmF2DqE1I/UeukDrceUkI/AAAAAAAADGA/
PeEmTauoA9I/s109/slider-ribbon.png) no-repeat; 
z-index: 7; 


Αυτά ήταν όλα πατήστε Αποθήκευση και είστε έτοιμοι!!

Καλή επιτυχία!!!!


Πηγή κώδικα

Demo βλέπετε στην αρχική σελίδα του Tech Time στην πάνω πλευρά στο οποίο έχω κάνει
όλες τις αλλαγές που περιέγραψα πιο πάνω και ατόφιο το slider όπως είναι στον κώδικα
μπορείτε να το δείτε ΕΔΩ



EDIT BY VAIOL!!!!