SACPB

Slideshow automático com posts Blogger

by Mairink Oemes

HTML

<div class="slidesJS-frame" id="slidesJS-frame">
    <div class="slidesJS" id="slidesJS"></div>
</div>
<div style="clear:both;"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var slidesJS_config = {
    url: 'http://mult-focos.blogspot.com.br/',
    numPost: 7,
    labelName: null,
    monthArray: [
        "Janeiro",
        "Fevereiro",
        "Março",
        "Abril",
        "Maio",
        "Junho",
        "Julho",
        "Agosto",
        "Setembro",
        "Outubro",
        "Novembro",
        "Dezembro"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    newTabLink: false,
    containerId: 'slidesJS',
    slider: {
        width: 570,
        height: 270,
        preload: true,
        preloadImage: "https://lh3.googleusercontent.com/-GHqdrNkyXHg/UgzSnQnlBSI/AAAAAAAAAHE/HBadDYJ7CcY/s24-no/loadinfo.net.gif",
        generateNextPrev: true,
        nextText: "Berikutnya",
        prevText: "Sebelumnya",
        pagination: true,
        generatePagination: true,
        prependPagination: false,
        fadeSpeed: 350,
        fadeEasing: "",
        slideSpeed: 350,
        slideEasing: "",
        start: 1,
        effect: "slide",
        crossfade: false,
        randomize: false,
        play: 5000,
        pause: 0,
        hoverPause: true,
        bigTarget: false,
        animationStart: function(current) {
            $('.slidesJS-caption', '.' + this.container).slideUp(100);
        },
        animationComplete: function(current) {
            $('.slidesJS-caption', '.' + this.container).slideDown(200);
        },
        slidesLoaded: function() {
            $('.slidesJS-caption', '.' + this.container).slideDown(200);
        }
    }
};
</script>
<script src="https://sites.google.com/site/multfocosjavascript/slide---s3slider/Slidejs.js"></script>

CSS

/*! SlidesMF para Blogs por Mairink Oemes  */

/* Main */
.slidesJS-frame {
  width:739px;
  height:341px;
  background:transparent url('https://lh6.googleusercontent.com/-NN9K0mFt--I/VA-zr8n967I/AAAAAAAAG14/PSGzCUNN7Mc/w739-h341-no/slidesJS-frame.png') no-repeat 50% 50%;
  margin:0 auto;
}
.slidesJS {
  background-color:#F0F0F0;
  position:relative;
  top:18px;
  left:84px;
}
.slidesJS-container {
  position:relative;
  overflow:hidden;
  display:none;
}

/* Next & Prev */
.slidesJS-next,
.slidesJS-prev {
  position:absolute;
  top:50%;
  left:-39px;
  width:24px;
  height:43px;
  margin-top:-21px;
  background:transparent url('https://lh5.googleusercontent.com/-qyYJfbGoX9g/VA-0DWp-iUI/AAAAAAAAG2Q/4-PrSdp-OHA/w24-h43-no/slidesJS-arrow-prev.png') no-repeat 50% 50%;
  display:block;
  overflow:hidden;
  text-indent:-9999px;
}
.slidesJS-next {
  background-image:url('https://lh5.googleusercontent.com/-N2ifSSSY6Po/VA-0OYBIdbI/AAAAAAAAG2o/rJ5OndqtyMs/w24-h43-no/slidesJS-arrow-next.png');
  right:-39px;
  left:auto;
}

/* Pagination */
.slidesJS-pagination {
  list-style:none;
  margin:26px auto 0;
  padding:0;
  width:auto;
  text-align:center;
}
.slidesJS-pagination li {
  display:inline-block;
  *display:inline;
  margin:0 1px;
  padding:0;
  list-style:none;
}
.slidesJS-pagination a {
  display:block;
  width:12px;
  height:12px;
  background: transparent url('https://lh5.googleusercontent.com/-jG_-4lkF6MI/VA-0djXM21I/AAAAAAAAG3A/VyrioxdmIl4/w12-h25-no/slidesJS-pagination.gif') 50% 0;
  text-indent:-999px;
  overflow:hidden;
}
.slidesJS-pagination li.current a {background-position:0 -12px}

/* Caption */
.slidesJS-caption {
  display:none;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:500;
  padding:5px 20px 10px;
  background-color:black;
  background-color:rgba(0,0,0,.5);
  font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
  color:white;
  border-top:1px solid black;
  text-shadow:none;
}
.slidesJS-title a {
  color:white;
 ...