Slideshow automático com os últimos artigos para Blogger

Olá amigos Mult-focos, temos aqui um slideshow automático com os últimos artigos para Blogger. Simplesmente fantástico este slideshow, vai embelezar seu blog com certeza. Veja seu desempenho ao vivo clicando no botão abaixo.

Como colocar efeito deslizante no sublinhado da sua frase

DEMO
Como adiciona-lo em seu blog?

I - Vá ao painel do Blogger->Modelo->Editar HTML->use Ctrl+F e localize esta tag

]]></b:skin>

Acima desta tag copie ecole o código CSS abaixo

(Clique na seta para ver o código)

/*! SlidesMF para Blogs por Mairink Oemes */
/* Main */
.slidesJS-frame {
width:739px;
height:341px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQREUb9pkFwhhHOGJscYcUNGtOvgkwuMjlSAGvkJCPGC6qBkesqe7ADWg2JUTNFcQkj19FZ9OPMWOyIw5gBlx146Syi8knPejefKj7Yz6vsZBHqVa_jEL16AM3PP5uJpghnUae_n2g4HU/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAlQjKDWU8QCWw576BEULWC2z-lRWKX5lzlFVJ0FlsxNQ45EhslENfxgLVa_yT5ZjjWWBRaMMWx7fDVbH310BFXHunQXdH7RIGQIr1Q-BKCu9qPG1xUJQO4uBeu8MHb078QY8qsQYAHG8/s1600/slidesJS-arrow-prev.png') no-repeat 50% 50%;
display:block;
overflow:hidden;
text-indent:-9999px;
}
.slidesJS-next {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGtivvAlj3L3RT-ze93TIX5ffjLGY9tE3nirMNuPkzfT8YSJBWY5n7Fst3FxmPTA_3XVkX-z_rNYoYfDSKZUfsHJES-uDYsHMNsflYJLUpCqeCQZMjOcStlUKPO8fqUwr60AMi7KY2oA/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKqhNJD13CuQyondUm9WYJYdY_Fkp6k5Ivege8fp_EaJjBWJujCHrhDjI6wpHnf_rRVyKYW8t3kpi3ToExpgxEIJA498w2Yqkp92zbX9uUloVO9KW7hRNHaCZpvj5wTe2cn2sOvr_CWU/s1600/slidesJS-pagination.png') 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;
text-decoration:none;
}
.slidesJS-title a:focus,
.slidesJS-title a:hover {text-decoration:underline}
.slidesJS-meta:before {content:" - "}
.slidesJS-meta-comment {display:none}
/* Ribbon */
.slidesJS-ribbon {
display:block;
/* display:none; <= Retire de (/* a 0;) para eliminar fita */
width:112px;
height:112px;
position:absolute;
top:-19px;
left:-19px;
z-index:500;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4uPv3LVchsU8JpI2gxLD2WiEA6RcrLrppmwAcSJVviqWYkNLKTNPoWYjOTIYvBdydg-h0v0WRu0bO1xFU8dfae96UDkETrnHkPYqMI-r4Z6TB4AS-6Y6QzwEq4S63cOeH2ThDlPLuAY/s1600/slidesJS-ribbon.png') no-repeat 0 0;
/* Ribbon */
.slidesJS-ribbon {
display:block;
/* display:none; <= Retire de (/* a 0;)para eliminar fita NEW) */
width:112px;
height:112px;
position:absolute;
top:-19px;
left:-19px;
z-index:500;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4uPv3LVchsU8JpI2gxLD2WiEA6RcrLrppmwAcSJVviqWYkNLKTNPoWYjOTIYvBdydg-h0v0WRu0bO1xFU8dfae96UDkETrnHkPYqMI-r4Z6TB4AS-6Y6QzwEq4S63cOeH2ThDlPLuAY/s1600/slidesJS-ribbon.png') no-repeat 0 0;
}

II – Copie o código javascript abaixo e cole em um bloco de notas e coloque a URL do seu blog.

(Clique na seta para ver o código)

<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: 'AQUI A URL DO SEU BLOG',
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvjhudc1N8P8OS7ibV-AqOvTfi10ezL9EWavB-7-fAcOtHLMy9lf3fZA0we53PrjCeTbqPFBjxmfuJQmp64ZvaRVN6qkSvl5eUAbP9zNEipCJkdlAQ5Ez6w4-bB70_VM6Qcek5YAJ5w7V/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>

III – Agora com o código configurado em mãos vá ao painel do Blogger -> Layout->adicionar um gadget->HTML/javascript->na janela que abrir cole o código em conteúdo->salve.

Isto é tudo.

---

---