Εδω σα εχω ενα slider για τον blogger πολυ ομορφο και πρακτικο. Μπαινει σα gadget πανω απο τις αναρτησεις σας η στο sidebar μικραινωντας το μεγεθος του, και αλλαζει τις εικονες που θα του υποδειξετε. Ειναι πολυ χρησιμο ιδιαιτερα για blog συνταγων και οχι μονο. Για να βαλετε τις δικες σας φωτογραφιες πρεπει να αλλαξετε τα link με τα κοκκινα γραμματα με τα λινκ των δικων σας φωτογραφιων.
Αν θελετε να προσθεσετε και αλλη εικονα τοτε πρεπει να προσθεσετε το παρακατω κωδικο ακριβως πανω απο τα 2 τελευταια </div> του κωδικα και βεβαιως να βαλετε το δικο σας λινκ απο τη φωτο σας.
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gFt5HJ0BKp8YYPxihwfiQSk0KamHmHe7CoYYZUZqL2WsCTGUeKPZV9yazHyEm2ZTkHO99pD1r_gDYWTK1_hjOTDxQIhVDwcKxQy89jdt5uuVROKY05QywcFrcH9l_hOiolhsG5WteNr8/s1600/image-slider-5.jpg" alt=""/></a>Για να εμφανιζουν καποιο τιτλο οι φωτο σας πρεπι να γραψετε κατι αναμεσα στα "" που υπαρχουν στον παραπανω κωδικο.
Για να οδηγει καπου η καθε φωτογραφια πρεπει να αλλαξετε το # με το link του αρθρου σας.
Ακομα μπορουμε να το κανουμε μικροτερο η μεγαλυτερο αλλαζοντας τους αριθμους στη μπλε γραμμουλα Ομως αν το κανετε πιο μικρο θα μετακινηθουν οι τελιτσες πιο δεξια.
Για να το διορθωσουμε αυτο πρεπει να αλλαξουμε τους πρασινους αριθμους του παρακατω κωδικα. Τελος αν θελουμε να φενεται μονο στην αρχικη δειτε την αναρτηση μου
Προσοχη οι φωτο που θα βαλετε πρεπει να ειναι μεγαλες σε μεγεθος για να μην αφηνουν κενα.
Δειτε demo εδω
<style type="text/css">
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGb7rnWz6yiDTlsojx5ea6Jci9LGENR7I3yu_nyv-zKk0zYRqoIYmuoAP-ttDKUEII4I0qE79orKnWaygIWJxscAS6NCYgXFPD-noXj-Bf_94wKMYsT99WjeqLyn-iap6C21PouvbMuZne/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
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;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVIAtFJcKk61oyPvs3b5ChyjFkcnGVPrU7bt0Zimw46KeSCICRUIU-qV9mUZnm6SxXXA8ZEIH2xUawBhA7BNIxZRxDLrgldhxQCJ3uTvkdlPMW9WbQRPHMAh3zJXPGBD5i_V7z7U9utyDE/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5mFUmrsAYUHq98Cj6O1wpDx0up7vwuW6FJKM45rIrgeZmeguNSqcweNokjQUaXTg6f2LZWomi6gHU4C99nhlBV7Xw5375m3BErYXxzlvOCmA1lgOq9Sn6UJQXx0BkzNi4e3-Vg3DrarVZ/s1600/image-slider-1.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Ds6cqTVJytnKoUiB2s77KatIt_yPMvS74aqnkUs_xNvXcUKQuIbApsIPLSwQ_OKlzei7zpcr7mWhfYy6EfCnxClwahAbMiHyFqhwF4Az8b7ou-lWjkgWhtIP-wlM-VZ4DWiM1fp4I7sP/s1600/image-slider-2.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbir8omMytp1ImTUgQM6KdCM5YI17UgTTx8jCGUNQJv-d62u7wdPZ7ug3K6oXF5VkML8YK8XIWp4E45qCTfw_nLw-lZlWp6nD8FQ8nBL8dh1Yp12ALJR513aJ9BOL70TzWVl1nqI9Z1qk/s1600/image-slider-3.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yrJzlnsmv59t_WJ0S6CvfGayAW1min4uAy-OMqyl36Okimvra19tex-KzmUK2yLtZZFluXCJGAkru0b5KUZ3UpLD1iaPMoonv5RnlLkGptYzthyphenhyphenTyeIHnr5dALR-uR5ZIxwFYPcOx5v3/s1600/image-slider-4.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gFt5HJ0BKp8YYPxihwfiQSk0KamHmHe7CoYYZUZqL2WsCTGUeKPZV9yazHyEm2ZTkHO99pD1r_gDYWTK1_hjOTDxQIhVDwcKxQy89jdt5uuVROKY05QywcFrcH9l_hOiolhsG5WteNr8/s1600/image-slider-5.jpg" alt=""/></a>
</div>
</div>
