TUTORIAL : Slide de Postagens Recentes em Miniatura
Hey guys , estou um pouco sumida né? ando muito sem tempo, e com encomendas para entregar o que acaba me deixando bem cansada e quando tenho um tempinho já quero dormir, confesso que andei pensando ate em abandonar o blog esses dias, mas já passou. Ufa!
Hoje vim ensinar UM MEGA tutorial de "slide" de postagens recentes para o blog, diferente desses mais comuns, acho que você já viram em alguns blogs por ai, ele fica assim, como em quadrados separados, eu chamo de Grid! com esse "slide" você pode exibir quantas postagens quiser no blog, e você pode decidir entre mostrar as ultimas postagens, ou que o código selecione entre as postagens quais ficaram aparecendo lá.
Se você souber mexer com css você pode deixar redondinho como o do blog Não Provoque.
 |
| EFEITO OPACIDADE QUANDO O MOUSE ESTÁ NA FOTO |
Olhem que lindo fica <3 , Tem como fazer de muitas maneiras, com códigos adicionados no HTML do blog, CSS , a baixo de algumas tags. Mais isso deixaria a instalação dele mais complicado para a pessoas que não manjam muito disso né? por isso decidi ensinar a maneira mais fácil de fazer e editar , pois vou deixar tudo explicadinho do lado e não iremos mexer dentro do código do seu layout ! vamos aprender?
Vá no Painel do blogger >Layout> Adicionar Gadget > HTML/JavaScript
No Gadget Adicione o Código a baixo :
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1300px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#000; /*==COR AREA DE TITULO==*/
display: block;
clear: left;
font-family: 'georgia', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:13px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
text-align: center; /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFM8P8R-TtwvMZ5l1t8ZHqtldBoQJuImwxtrRJB0GxRVv83fWy-sbKTUMJDkhjwGp0H9C-jS6smEEO02H2uw34IndbOehYyctc43w_LEi6fQPC03QJ9u4OR3w5-C6-jEHZu4SfKMN1d1ka/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts =1
var bsrpg_thumbSize = 255;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
Onde tem as partes indicadas em vermelho é onde você pode alterar !
A parte destacada "numposts =1 " está indicado que mostrará as postagens recentes e a
quantidade de miniaturas . quando não mudar por ele, tente no 4&orderby que vai, troque o 4 por o numero que de miniaturas que quiser!
quantidade de miniaturas . quando não mudar por ele, tente no 4&orderby que vai, troque o 4 por o numero que de miniaturas que quiser!
Mas se preferir que o gadget as postagens aleatórias substitua essa parte por : numposts = (1 +(hoje.getSeconds())) .
Onde tem : var bsrpg_thumbSize = 255; É o tamanho das fotos .
As imagens do layout usado como modelo é um que estou fazendo e estará disponível para compra na site da Poderon Design !
Espero que tenham gostado do tutorial e deixem seus blogs lindos !
A cópia total ou parcial dessa postagem é proibida.
Me encontre:
97 comentários
Já testei no meu blog acho que vai ficar legal, sempre tentei colocar mais nunca consegui, só uma pergunta onde defino a quantidade de slides no teste que fiz apareceu uns 10 post? Beijos
ResponderExcluirwww.paularibeiromoda.com.br
oi paula! já atualizei no post mostrando como ajeitar! tenta e me diz!
Excluiro meu também aconteceu isso. apareceu 10 caixinhas com posts. tentei mudar e não deu certo
ResponderExcluirwww.comoserdiva.com
Futuramente vou querer isso. heheheh Ameiii. *-*
ResponderExcluirAdoro seu blog lindona.
Vc esta na lista dos meus favoritos.
uhuuu! fica lindo né?! obg amoreeeeeee <3
ExcluirBoa tarde!! ate que nao e dificil..vou fazer no meu tb!
ResponderExcluirobrigada pelo tutorial!
besos y buena semana
www.cosasde-ladydiva.com
não é dificil mesmo ! tenta ai!
Excluiroi dimas! que bom que gostou! <3
ResponderExcluirSerio, muito obrigada, estou há um seculo querendo botar isso no meu Blog hahaha ♥ Se quiser visita lá. www.aalamari.blogspot.com.br
ResponderExcluirque bom amore! <3
ExcluirEstava procurando esse tutorial a muito tempo mesmo! Obrigada, você me ajudou muito. Já está lá no blog. Seu blog é lindo! Sucesso e obrigada mais uma vez <3
ResponderExcluirBeijinhos com açúcar! Camila lá do http://mypaperskies.blogspot.com.br/
oi linda! fico tão feliz em ter ajudado!
ExcluirAmei o tutorial <3
ResponderExcluirhttp://toobege.blogspot.com.br/
obrigado amore!
ExcluirGenteeeee, eu tava louca procurando por esse tutorial, mas nunca dava certo. Amei esse e já coloquei. Obrigada <3
ResponderExcluirhttp://prazerjessica.blogspot.com.br/
olhei lá no teu blog e ficou tudo lindo!
ExcluirRecém que fui conhecer teu blog Jana!! E ameiiii, parabéns pelo trabalho, mesmo! Sucesso sempre!
ResponderExcluirwww.gabitarabal.com
Ah que linda! obg, esses dias estava visitando o seu também e gostei muito !
ExcluirMeninaaaaa amei os post bem explicadinhooo vou tentar bjoooooos
ResponderExcluirhttp://divinabelezamulher.blogspot.com.br/
tenta e me mostra como ficou amore!
ExcluirMeninaaaaaaaaaa, amei o post, me ajudou muito, estava procurando isso esses dias, mas não encontrei em lugar nenhum :( Você me salvou o/
ResponderExcluirMas eu tenho uma duvida, como faz para ele ficar em formato de retângulo, como a gente sempre vê no blogs? Obrigado :)
http://vaidadeparatodas.blogspot.com.br
é dificil de achar ensinando mesmo! por isso vim mostrar pra vocês <3
ExcluirAdorei quero muito mudar meu lay, justamente pondo esse eslaid, obrigado aorei teu post já seguindo sucesso flo!!,
ResponderExcluirhttp://polianehenrique.blogspot.com.br/
obrigado linda!
ExcluirAiw Jana que tutorial Perfeito, Amei demais *-*
ResponderExcluirFica um amor no Blog nê?!
Beijos
http://www.omelhordemim.com/
oi linda! vai te ajudar muito né! é bem legal isso!
ExcluirNossa quue perfeito ,voou fazer no meeu :) Beijos , Evelyn :D
ResponderExcluirfaz sim evelyn!
ExcluirOi Jana, o post é explicadinho muito fácil. Pena que não funcionou no meu blog, é bug do meu lay eu acho. Depois vou tentar resolver. Esse post seu é super de utilidade pública!
ResponderExcluirBeijinhos
www.carolneumann.com.br
lindona ! deve ser algo mesmo ! tenta de novo , fica lindo no blog !
ExcluirOi Jaaana!!
ResponderExcluirEu queria fazer isso mas meu blog já tem slide, dai eu iria desconfigurar tudo :((( mas quero ver se no futuro consigo trocar um pelo outro!
Beijoo
www.vitaminatrendy.com
vai ficar lindo au <3
ExcluirAeee deu super certo! *-* supeeeeer amei <3
ResponderExcluirObrigada pelas dicas!
Beijos
www.todaonca.com.br
Jana, olha o meu como ficou :( Ficou muito afastado do menu, e muito em cima da parte de post.
ResponderExcluirPode me ajudar como concerta?
http://testemodahoje.blogspot.com.br/
hahahah fiz no meu Jana!!! Adorei sua linda!
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirSeu post é muito útil, até compartilhei no meu blog ♥
ResponderExcluirJá faz um tempinho mas só agora tive um tempinho de avisar ^-^ Bjs
http://www.adolecentro.com/2014/10/os-melhores-links-de-setembro.html
que bom linda, muito obg!
ExcluirJana que post ótimo! Você sabe me dizer como colocar um efeito rotativo, ou até mesmo o da Paula Buzzo que o nome do post só aparece e fica em hover quando o cursor esta em cima da foto?
ResponderExcluirdá pra fazer tbm, porem notei que as imagens perdem a resolução :/
ExcluirComo eu mudo a cor da área do título?
ResponderExcluirSó eu que não consegui? :'( Fiz tudo certinho mas no meu blog não aparece nada! Já tentei vários tutoriais, e apesar do seu estar mais explicado e mais fácil nenhum aparace :/
ResponderExcluirObrigado janaina aqui deu super certo. Vou ver se consigo retirar os espaços superiores e inferiores, gosto tudo juntinho, seu eu conseguir deixo ele e coloco os créditos. bjos
ResponderExcluirEi tudo bem? Amei o tutorial, estava procurando um deste tipo (que desse certo!). Só queria saber se há como fazer alguma modificação no código para que o título da postagem apareça em fade, como no seu. Se puder me dar uma ajuda, muito obrigada desde já! : *
ResponderExcluirolá amore, tem sim, me manda email que te mando o codigo!
Excluirjanainapoderon13@gmail.com
Mds, SABE QUANTOS MIL ANOS demorei para encontrar aqui? hjahahaha moça! Obrigado mesmo, de coração. Ajudou meu blog ficar mais LINDO <3
ResponderExcluirEsse post salvou meu layout :) :) Estava procurando esse algo assim desde quando comecei a fazer o layout do blog.
ResponderExcluirJanaína, poderia explicar como faz para ele ficar com efeito igual ao do seu?
Bjuss
Obrigada e parabéns pelo blog :)
oii jana! amei o tutorial, me ajudou muito!
ResponderExcluirEu só gostaria de saber se tem como deixar as imagens redondas?
Gostei muito....
ResponderExcluirMeu blog é o www.bandas.mus.br e precisava muito desse código!
Deixa eu perguntar mais uma coisa, será que é possível colocar para aparecer por categoria/marcadores?
Não sei nem como agradecer! Fazia tempo que eu procurava mas estava procurando errado rs, obrigada!!!!
ResponderExcluirJana! Obrigada por isto! Mas tenho uma dúvida: dá para pôr este slide debaixo de cada post (de preferência só aparecer quando clicarmos no post para o ler todo)? Era capaz de ficar giro :D
ResponderExcluirBeijinhos de Portugal :*
Conseguir, muito obrigada.
ResponderExcluirwww.meninadofuturo.com.br
Segui seu tutorial e amei :)
ResponderExcluirParabéns pelo Blog :)
Beijos da Rabêlo :*
Deixe Apenas Fluir ♥
Jana meu amor, adoro esse tutorial e uso ele a bastante tempo no meu blog. Queria saber se tem como deixar o slide redondo ?
ResponderExcluirBeijão <3
http://cafeamargoblog.blogspot.com/
Adorei o tutorial ,foi o unico que consegui fazer! mas no meu blog ficou mais para a direita, tem como centralizar?
ResponderExcluirhttp://filosofandoentrela.blogspot.com.br/
Olá querida.
ResponderExcluirAmei o slide! Vou testar no meu blog e volto pra contar!
Obrigada!
Luciana Pessoa
www.decoralternativa.com.br
Oi Jana, testei no meu, deu certo, adorei esse post, obrigada! *-*
ResponderExcluirhttps://thecorbal.blogspot.com.br/
Oh jana.Boa noite! como você fez para deixar o formato do slide arrendonado.como o seu temcomo você dizer por favor Help me!
ResponderExcluirflor, eu usei o seu código em praticamente todos os blogs que eu tive( e te garanto que é muito útil)!
ResponderExcluirEu tava vasculhando o meu face e eu achei uma postagem que tem esse mesmo tutorial(ou muito parecido) e você disse que a copia total ou parcial é proibida e por isso eu vim aqui avisar:3
o link do blog: http://taiinara-oliveira.blogspot.com.br/2015/06/repaginando-o-blog-post-recentes.html
Eu tenho quase certeza que é o mesmo ( seria muito complicado checar o código inteiro)
tchau :3
http://exalandopurpurina1.blogspot.com.br/
janaaaaa, não dá certo de jeito nenhum :( Meu modelo base é o maca d'água, é por isso?
ResponderExcluirlindo, lindo, lindo..... estava muito procurando esse tutorial, super obrigada por disponibilizar!
ResponderExcluirhttp://believetempodeacreditar.blogspot.com.br/
Oi acabei de conhecer seu blog e amei. Estou personalizando meu blog sozinha e queria muito esse gadget, só que os outros tutoriais que vi tinha que mexer no html e fiquei meio insegura rs. Se não for pedir muito faz um tutorial de como por assinatura personalizada tipo a sua :D
ResponderExcluirOI LINDA! proximo post então ensino isso!
ExcluirComo faz pra aumentar a largura das imagem e não do slide?
ResponderExcluirMuito obrigada, era tudo o que eu precisava!
ResponderExcluirBeijos,
Rafaella.
http://imperioretro.blogspot.com.br
Querida, funcionou! Mas ele não está ficando acima das postagens, está ficando em cima do meu perfil, ou seja do lado esquerdo da tela.
ResponderExcluirComo faço?
JANAAAA, TU É FODA MIA FIA, TXI LOVU ♥♥♥♥
ResponderExcluirQue amor você por aqui <3 <3
ExcluirJANI...Coloquei no meu blog, só aparece as postagens recentes queria que mostra-se as mais antigas. Como faço pra mudar ???
ResponderExcluirhttp://vitoriabarbosablog.blogspot.com.br/
ExcluirTô tentando colocar ele na parte superior do blog e não aparece :( o que faço?
ResponderExcluirBeijos,
www.destemidagarota.com
Melhor tutorial ! amei !
ResponderExcluirEu não consegui
ResponderExcluirAdorei o tutorial tentei tantos outros e não consegui e finalmente encontrei seu blog e segui seu tutorial,beijos linda!
ResponderExcluirJanaina, acabei encontrando esse post de um blog quase identico ao seu! http://heydezoito.blogspot.com.br/2015/04/tutorial-slide-de-postagens-recentes-em.html?showComment=1443136224593#c1375010395190736013
ResponderExcluirObrigado por avisar Geovana!
ExcluirQueria alterar o tamanho das miniaturas e não consegui, Como faz?
ResponderExcluirOlá.
ResponderExcluirfiz e ficou perfeito, mas queria diminuir a area preta onde fica o titulo como faço?:
Adorei !
ResponderExcluirdezesseisdiasdepois.blogspot.com
E se eu quiser que apareça os posts de um determinado marcador, tem como?
ResponderExcluirE se eu quiser que apareça os posts de um determinado marcador, tem como?
ResponderExcluirnão consigo fazer :(
ResponderExcluirComo que eu faço para centralizalo? Pois não estou conseguindo :/
ResponderExcluirhttp://deixagata.blogspot.com.br/
Ótimo tutorial! No meu deu certinho! Quer dizer... Quase! A qualidade das minhas imagens do blog são ótimas por sinal, pena que quando coloco esse slide, as imagens perdem a qualidade ://
ResponderExcluirFique com Deus!
obrigada pelo tutorial. ficou perfeito. seria possível fazer ele mudar os posts automaticamente?
ResponderExcluirOlá Janaina,
ResponderExcluirEu gostaria de uma dica. Para que ao invés das postagens recentes apareçam as postagens de uma determinada categoria, qual mudança deve ser feita?
Olá, bom dia!
ResponderExcluirJan, muito obrigada pelo tutorial, me ajudou bastante!
Um abraço, fique com Deus
http://estaimerecidagraca.blogspot.com.br/
Olá Janaína! Adorei o seu post, me ajudou demais, sou meio lesada pra mexer em códigos html, então fujo deles..Rs. Facilitou muito, obrigada!
ResponderExcluirDeus abençoe!!! Muito obrigada <3
ResponderExcluirhttp://akayjk.blogspot.com/
Ficou muito bom, além de fácil instalação e customização, e bem melhor que o estilo redondo que eu vinha usando no +40BC.
ResponderExcluirGrato pela dica!
www.mais40bemcuidado.com.br
Estou usando no meu blog e já creditei. Muito obrigada...amei!
ResponderExcluirOlá, gostaria de saber se tem como fazer em wordpreess? Beijos
ResponderExcluirMuito obrigado, ajudou bastante, já estou usando no meu...
ResponderExcluirJá começei a seguir se blog, beijos e sucesso pra você!
http://girlswholoveparis.blogspot.com.br/
valew!!!
ResponderExcluirOlá jana tudo bem?? . Nossa que legal esse post , adorei e o que é melhor consegui utilizar!!!!!!! Estava atras disso, mas não encontrava. Jan preciso de uma ajida tem como escolher a foto que vai aparecer na miniatura ?? como se faz ?
ResponderExcluirhttps://pequenosinfinitosz.blogspot.com.br/#uds-search-results
Obrigada por ensinar!!
Amei, super deu certo aliás foi o único q deu certo no blog q estou editando obrigadaaaa
ResponderExcluirOlá, ficou tudo certinho. Mas ao invés de quadrado, apareceu redondo. :/
ResponderExcluir