NIVO slider

Απλο nivo slider για τον blogger

Εδώ έχω ένα slider για τον blogger πολύ όμορφο και πρακτικό. Μπαίνει σα gadget πάνω από τις αναρτήσεις σας η στο sidebar μικραίνοντας το μέγεθος του, και αλλάζει τις εικόνες που θα του υποδείξετε. Είναι πολύ χρήσιμο ιδιαίτερα για blog συνταγών και όχι μόνο. Για να βάλετε τις δικές σας φωτογραφίες πρέπει να αλλάξετε τα link με τα κόκκινα γράμματα με τα λινκ των δικών σας φωτογραφιών.



Αν θέλετε να προσθέσετε και άλλη εικόνα τότε πρέπει να προσθέσετε το παρακάτω κωδικό ακριβώς πάνω από τα 2 τελευταία </div> του κώδικα και βεβαίως να βάλετε το δικό σας λινκ από τη φωτό σας.

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUKb3-EVd2SHx-znWkZStAR4quVnCn5NrrjpqXb5ByP84BZeLBhoueNGualB1JOpuO002MMaWfsOdqLwMGnv9AxNTExymjywjjC5r7QJH2ZgqjV561Mie4zMt8JvdDzLUrJin6zaDd-1k/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/AVvXsEjCMGl7YEAsQjag8_FY_sT7IvzX3zm9UXLP03OhMGgd5ktBu3fRuJ2_Sla-RAoHjOY59UfHh9b3w_eIYUR3zRWiqesICOuWINJKxvui3zx0F77HECv77W6UBzcEqWaQgZcSXElTxGhaLID4/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/AVvXsEhlBZHKpExEqMAQ_jWLgkdAdfXhDUQx5qfJLOGY16ga3P3Y_vY4YV8EuTzZcdhfNl0801NFAr_fH9IMfI-A3WPrfmiUPcDL8kWZBvxMqSTcs-uHuRaq45Rcyrlli9GZKkTkLrZQc-AZAAoL/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/AVvXsEhRs4bTYVmYrKUz81FAe_5O_Oy6fwh68VnrZyy9FLKsv06cVviX6_rdr0RI44dGfSQOdAZEB_nWIEiDx1pjrqSMFwyLIy9vBwsTekfeEEE5HRKRdOyxEVXqag9xR3fi5_AWyOPPajkJ_-wc/s1600/image-slider-1.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnpeUGSU09mkN8_pmjE4CDYYh7oB-zplz2i8SrDCliXQ7PxyllNsoLkd0bk0R-0tfRHBos63yXPwpw4VpohkGpezU0NNLHS7kxcdFI2m5HchMrLIUjKeWC9gHubRmbfdZ0pNVun58UYi7/s1600/image-slider-2.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jyTZGHu0roCpbxXf3n2IS4odMgfE-ntFDB9DRk3bcVEuNW23S9Vapy7jMu3EoHHMkKDOoME_Lwwmb1byy9g9ro2-gKO-PUCPXiZVt4UO1aviUwOjbxSIz6QL-e_n_2tR6MayGsSvPOIV/s1600/image-slider-3.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2gF77D_VewCdqO3DnYEFMp8phaVaIa_w-OmSmLtpRXhNMgVyDB_w62JpSePKYidzfoINm-XLwbIrmGKulik9fUc393B8SJePAEN_rLfLhMPsJEEvJl6_zc_wNIf8FEaHvFiam-9AOHCkd/s1600/image-slider-4.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUKb3-EVd2SHx-znWkZStAR4quVnCn5NrrjpqXb5ByP84BZeLBhoueNGualB1JOpuO002MMaWfsOdqLwMGnv9AxNTExymjywjjC5r7QJH2ZgqjV561Mie4zMt8JvdDzLUrJin6zaDd-1k/s1600/image-slider-5.jpg" alt=""/></a>
</div>
</div>

http://posftiaxnoblog.blogspot.gr/2014/11/nivo-slider-blogger.html#more