E na procura por algumas coisas, encontrei este slide de post recente, muito fácil de instalar porque é colocado como um gadget não precisa mexer no HTML do Blog...
OBS: ele ter 960px de comprimento o que seria o ideal para usar, que então ele também mostraria uma lista com as postagem ao lado.
Más para mim ele ficou muito comprido então eu diminuir o comprimento dele para 500px...más assim ele não aparece a lista ao lado por estar menor...
Galera é o seguinte, por todos que eu já testei este mais prático, você não precisa ficar colocando url de post e imagem, ele vai encontrar automaticamente em seu Blog...basta colocar a URL de seu Blog.
Você acessa o painel de configuração de seu Blog , em seguida na guia Layout e adicionar um gadget, copie o código muda a url que vai estar em destaque na cor rosa... e colar no HTML/Javascript.
Copie o código aqui
<div class="widget-content">
<style>
#slideshow {
width: 960px; /*aqui o comprimento do slide*/
margin: 5px;
padding:0;
background:#fff;
height:270px;
overflow:hidden;
border:1px dashed #3A3B4C;
box-shadow: 0px 0px 1em #3A3B4C;
-webkit-box-shadow: 0px 0px 1em #3A3B4C;
-moz-box-shadow: 0px 0px 1em #3A3B4C;
margin: 6px 8px 6px 8px;
padding: 1px 2px 1px 2px;
}
#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
#slideshow .slides {
width:565px;
overflow: hidden;
float:left;
color: #000;
text-shadow: #fff 1px 1px 1px, #000 -1px -1px 1px;
}
#slideshow .slides ul {
float:left;
overflow: hidden;
width:565px;
height:270px;
}
#slideshow .slides li {
display:none;
left:-99999em;
width:565px;
height:270px;
display:block;
overflow: hidden;
background:#fff;
position:relative;
z-index:1;
}
.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:565px;
height:270px;
display:block;
overflow: hidden;
background:#fff;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {
width:565px;
height: 50px;/*area inscrição*/
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#585976;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#slideshow .slides li .entry p {
margin: 0;
}
#slideshow .slides li .entry h2 ,
#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size: 20px;
line-height: 1.1em;
margin:0;
color: #000;
text-shadow: #000 1px 1px 1px, #ccc -1px -1px 1px; !important;
margin: 0;
letter-spacing:0;
border:none !important;
}
#slideshow ul.slides-nav {
height:270px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}
#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
border-bottom: 1px dashed #3A3B4C;
border-left: 1px dashed #3A3B4C;
}
#slideshow .slides-nav li a {/*area slide menor*/
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:7px;
list-style-type:none;
display:block;
height:12px;
color: #000;
text-shadow: #fff 1px 1px 1px, #ccc -1px -1px 1px;
font-size:10pt;
overflow:hidden;
background: #fff;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:270px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {
background: #585976;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
text-shadow: #000 1px 1px 1px, #ccc -1px -1px 1px;
}
.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#000;
}
#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: -2px 10px 0 0;
padding:2px;
border: 1px solid #aaa;
width:70px;
height:18px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5nbDYwz0rISRvhh91geQSIWFOgFuLarLlr7LZNi0KfChuVSgH7nPhyNaDq9fAZYjQgkkRNzJLhlyyzqpmFdlOn2ILWG54DMZy2-OmeXWRY3_UlKEKAZgn7U3UyArAGMwozjBb5NxH07Gh/s320/templatesww.png";
showRandomImg = true;
aBold = true;
summaryPost = 300; //
summaryTitle = 250; //
numposts = 10; //
home_page = "URL DO SEU BLOG";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="slides-nav">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = ' <li id="post-'+i+'" class="clearfix"> <a href="#main-post-'+i+'" class=""><img height="150px" width="150px" class="post_thumbnail thumbnail thumbnail post_thumbnail" alt="" src="'+img[i]+'"/>'+posttitle+'</a> </li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="clearfix" style="position: relative;">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = '<li style="background: transparent url('+img[i]+')" id="main-post-'+i+'"><div class="entry"><h2 class="post-title"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div></li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
</script>
<script src="http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$slideshow = {
context: false,
tabs: false,
timeout: 7000,
slideSpeed: 1000,
tabSpeed: 1000,
fx: 'toss',
init: function() {
this.context = $('#slideshow');
this.tabs = $('ul.slides-nav li', this.context);
this.prepareSlideshow();
},
prepareSlideshow: function() {
$('div.slides > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $('ul.slides-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$slideshow.init();
});
</script>
<div id="slideshow" class="clearfix">
<div class="slides">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class="slides-nav">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
</div>
</div>
<script src='http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.cycle.js' type='text/javascript'/></script>
Destaquei também onde esta marcado comprimento do slide caso queira mexer no comprimento.
Qualquer dúvida só me perguntar ..um grande beijo ....
Muito legal essa dica, slide das postagens fica muito bem no blog e o melhor que ele chama a atenção das pessoas. Sol beijos.
ResponderExcluirObrigada Lucimar por sempre estar prestigiando beijos...
ExcluirEu gosto de slide e este é muito bom...
legal gostei
ResponderExcluirmais o link com o codigo não esta fucionando
ResponderExcluirIeadmsg eu troquei de template ontem , e esta dando erro nos link...tenho que ver o porque ...obrigada p0ela visita agora esta normal colocar o código aqui...no post
ExcluirMuito bom,Sol.
ResponderExcluirMas meu blog já lotou.
Beijos e linda sexta e fim de semana
Donetzka
Olá minha querida Done, meu carneiro machucar meus dedos com uma cabeçada .esta dificil para digitar ,,beijos passarei em seu Blog hoje minha amiga.
ExcluirAdorei Sol
ResponderExcluirbjs
tudoqueeuseiegosto.blogspot.com.br/
Linda Di que bom que gostou , bom ter você aqui querida , beijos e um grande domingo a vocÊ....irei te ver em breve,,,,,beijos
ExcluirOi Sol,
ResponderExcluirboa noite,
tu está em tudo!
Agora tu ajuda a colocar blogs mais bonito =D
Eu enviar-lhe um grande beijo
kkkkk Ariel eu encontrar este gadget para slide e achei prático e bonito....beijokas
ExcluirVlw lindaaaaaaaaaa!^^ Mas tem como tirar a lista do lado do slide?
ResponderExcluirOla Gótica .a unica maneira de você retirar a coluna lateral é diminuindo o tamanho dele, onde esta marcado em rosa o comprimento ...beijos ..qualquer coisa só dizer !!!
ExcluirObrigada lindaaaaaaaaaaa^^
ResponderExcluirHá mas..eu tentei fazer o que vc disse, mas ainda fica o espaço em branco, no lugar da quela lista!
ResponderExcluirEu entendi, talvez ele não é compativel com seu template ..olhar este em meu Blog de test, este voce pode mudar a cor da borda e por na sidebar também.
Excluirhttp://testtamalyn.blogspot.com.br/
você encontra como colocar aqui
http://videosdasol.blogspot.com.br/2013/08/slide-automatizado-para-blogger.html
eu coloquei mas fiaca apagada a legenda
ResponderExcluireu coloquei mas fiaca apagada a legenda
ResponderExcluirdesculpe mas isso é gadget.alguns template não aceitar o formato e dar erro .... sinto pela demora ...
ExcluirÓtima dica, no meu ficou a lista das publicações ao lado das imagens, tem alguma forma de exibir apenas as imagens?
ResponderExcluirGustavo ola bem vindo... onde esta escrito "comprimento do slide" em rosa tem o valor de 960px.. mudar para 500 então você não ter a lista ao lado .ok
ExcluirOlá obrigado pela dica, mas as imagens não estão aparecendo, aparece apenas a lista do lado o que devo fazer?
ResponderExcluiroi aqui é o douglas funciono, más parece uma imagem branca só me ajuda urgente
ResponderExcluiroi aqui é o douglas funciono, más parece uma imagem branca só me ajuda urgente
ResponderExcluiroi... no meu blog n esta a entrar bem
ResponderExcluirveja só
www.musicasyebahhh.com
Ola galera bom dia... eu estou um pouco sem tempo desculpe a demora , verei isto a tarde, mas o que pode estar errado é que o slide as vezes é incompativel com o seu template atual, pode tambem ter comflitos de gadgets ... tentar este por favor ... abraços...
ResponderExcluirhttp://videosdasol.blogspot.com.br/2013/08/slide-automatizado-para-blogger.html
Oi, adicionei o gadget do slide no meu blog, porém ficou o slide sem as postagens passando.. :( ja tava animado! q pena, o q pode ta acontecendo?
ResponderExcluirwww.garotolifestyle.blogspot.com.br
Ola Narciso, bom o que pode ter acontecido é que, se eu blog estava privado para vc testar o gadget do slide, ele realmente não irá passar as imagem. beijos gostei de seu blog , seu perfil é típico de um taurino ... tambm sou de touro..qualquer coisa diz aqui abraços!
ResponderExcluirOi querida! que bom que vc gostou! adoro pessoas de touro! seja bem vinda ao meu blog, disponha sempre! e valeu pela dica, vou tentar novamente. ;D
ResponderExcluirwww.garotolifestyle.blogspot.com.br
Oi , então espero que de tudo certo , visitarei mais vezes seu blog, um abraço!! estou sempre a disposição Narciso !
Excluir