Código HTML e Gadget para Colocar Slides no Blog
Entre na pagina editar HTML do Blogger e faça um backup do template, assim se ocorrer algum erro nos códigos do blog você poderá voltar ao seu layout atual com facilidade.
Agora use o ctrl + F para achar no HTML do blog a linha: </head> e cole o seguinte código antes dela (veja no final deste tutorial como alterar o tamanho das imagens dos slides no blog).
<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<script style='text/javascript'>
//<![CDATA[
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
var img_width = 550;
var img_height = 250;
function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}if(random_posts==true){indexPosts.sort(function(){return 0.5-Math.random()})}if(numposts_gal>numPosts){numposts_gal=numPosts}for(i=0;i<numposts_gal;++i){var entry_gal=json.feed.entry[indexPosts[i]];var posttitle_gal=entry_gal.title.$t;for(var k=0;k<entry_gal.link.length;k++){if(entry_gal.link[k].rel=='alternate'){posturl_gal=entry_gal.link[k].href;break}}if("content"in entry_gal){var postcontent_gal=entry_gal.content.$t}s=postcontent_gal;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!="")){var thumburl_gal=d}else var thumburl_gal='http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');document.write(posttitle_gal+'</h2>');var re=/<\S[^>]*>/g;postcontent_gal=postcontent_gal.replace(re,"");if(showpostsummary_gal==true){if(postcontent_gal.length<numchars_gal){document.write(postcontent_gal);document.write('</span>')}else{postcontent_gal=postcontent_gal.substring(0,numchars_gal);var quoteEnd_gal=postcontent_gal.lastIndexOf(" ");postcontent_gal=postcontent_gal.substring(0,quoteEnd_gal);document.write(postcontent_gal+'...');document.write('</span>')}}document.write('<a href="'+posturl_gal+'"><img src="'+thumburl_gal+'" width="'+img_width+'" height="'+img_height+'"/></a></div>');document.write('</li>')}document.write('</ul>')}
//]]>
</script>
<style type='text/css'>
#slide-container {position: relative;height: 250px;width: 550px;font-family: calibri;}
.slide-desc {background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
.slide-desc h2 {display: block;}
#slider li {width: 550px;height: 250px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
#nextBtn{left: 550px !important;top: -225px;}
#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;}
#nextBtn a {background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;}
</style>
<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->
Clique para salvar e entre na pagina layout do Blogger. Clique em adicionar gadget > HTML/javascript, cole esse outro código:
<div id="slider"><script src="http://www.dicasparablogs.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script></div>
Na primeira linha deste segundo código tem:
http://www.dicasparablogs.com.br/feeds....
Então troque pelo endereço do seu blog (não altere a parte /feed....) e clique para salvar.
Personalizar os Slides no Blog
Na primeira parte do código você poderá achar o trecho:
var numchars_gal = 150; - Numero de caracteres da descrição do post
var numposts_gal = 10; - Quantidade de posts que aparecem nos slides
var img_width = 550; - largura das imagens
var img_height = 250; - altura das imagens
Sobre Redimensionar Imagens você verá que a altura e largura das imagens também aparecem em outras partes do código com os mesmos números 250px e 550px, então altere da mesma forma que fez nesta configuração, ou seja, se alterar a largura das imagens para 400 neste código que falamos você precisa mudar todos os 550px que achar para 400px.
Outras opções que você encontrará no código é o tipo de letra (font-family: calibri;), cor da letra (color: #FFFFFF;) que você também poderá alterar como desejar. Veja aqui algumas dicas para ajudar a entender e modificar esses códigos:
O que é CSS? Para que Serve e Como usar o CSS
Espaçamento entre Linhas, Letras ou Palavras usando CSS/HTML
Código das Cores
Imagens das Setas para Navegar entre os slides
No código você pode achar 3 imagens hospedadas no photobucket que são as setas de navegação dos slides e o fundo semitransparente que aparece embaixo do titulo e resumo da postagem. Nós recomendamos que salve essas imagens e hospede no Blogger ou qualquer outro lugar que use para armazenar suas imagens, pois usar do jeito que está no código é correr o risco da imagem se excluída e você não poder recuperar.
Claro que você pode criar suas próprias setas para avançar ou retroceder os slides e assim personalizar como quiser os slides do seu blog. Veja alguns programas e dicas para editar imagens:
Site para Fazer Imagens Online e Criar Banners com Efeitos
Hospedar Imagens no Blogger - Hospedagem Grátis
Criar Banner para Blogs: Programas e Sites para Editar Imagens
Abaixo temos as imagens, o endereço de cada uma delas no código e o que cada uma delas faz. Assim você poderá trocá-las com facilidade.
http://i195.photobucket.com/albums/z105/dantearaujo/prev.png - seta voltar slide.
http://i195.photobucket.com/albums/z105/dantearaujo/next.png - seta avançar slide.
http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png - fundo semi transparente por baixo do texto.
Veja outras dicas de Gadgets úteis para blogs:
Gadget de Posts Aleatórios com Imagens no Blogger
Mostrar Lista de Postagens mais Compartilhadas em Redes Sociais
Colocar Gadget com Slides das Postagens Recentes do Blog
Encontramos esse código para colocar slides com as imagens ou fotos dos posts recentes no blog no site: EXEIdeas (em inglês). Achamos que esses scripts e html que ele usou neste sistema de apresentação de slides no blog bem simples de instalar e por isso publicamos aqui no Dicas para Blogs, esperamos que gostem e compartilhem essa idéia com outros blogueiros.
Fabiano sei que aqui nao tem nada haver com a minha pergunta.... mas me ajuda pelo amor de Deus ... do nada meu blog ficou doido... o sidebar saiu do lugar e foi lá pra baixo e o fundo que era branco ficou cinza :(
ResponderExcluirsabe me dizer oq houve? e nao mexi no html do blog
olha aí: http://ouvir-pagoneja.blogspot.com.br/
me ajudaaaa ;/
e engraçado que no template de que tinha salvo está direito....mas qnd fiz o upload dele ficou errado tb ;/
já consegui resolver rsrs
ResponderExcluirentrei no seu blog agora e pareceu normal (a sidebar está do lado do conteúdo)
ResponderExcluireu também vou dar uma opinião sobre outro assunto que você não mencionou: aquele seu pop up (janela flutuante) com anuncio talvez possa gerar problemas pois os visitantes e o google pode não gostar de um pop up abrindo em cada pagina
Fabiano, essas setas em todas suas postagens, são imagens ou são tipo uma fonte? Obrigado
ResponderExcluirJoão as setas que estão em nosso menu e também nos subtítulos dentro dos posts?
ResponderExcluirnão é uma fonte é uma imagem de fundo, veja o link abaixo:
Imagem no título da postagem
Fabiano, tem como fazer o meu blogger enviar mensagens automaticamente para e-mail de quem faz alguma coisa no meu blog? Por exemplo: "Alguém vai e segui meu blog" ai no e-mail dela vai aparecer uma mensagem tipo: "Obrigado por se inscrever em nosso blogger, Voltem Sempre" ou quando alguém vai comentar e ... Obrigado
ResponderExcluirJoão acho que não tem como fazer esse tipo de mensagem para quem clica em seguir o blog.
ResponderExcluirmas na maioria das vezes essas mensagens não tem grande utilidade e não fazem diferença, afinal se a pessoa já clicou para seguir o blog ela tem grande chance de voltar mesmo sem mensagens deste tipo.
eu entendo sua idéia de ser gentil e criar mais ligação com a pessoa, mas não tenho esse tipo de código
É só comigo que nenhum desses sliders de postagens recentes funciona? Já é o quarto ou quinto que eu tento num blog de testes e nenhum dá certo. O container aparece, mas fica um espação em branco.
ResponderExcluirschreiyαrαi ۞
ResponderExcluirnão faltou nada quando você trocou o endereço do blog?
tem que colocar o http://
veja se não colocou duas ou nenhuma barra no final do endereço do blog antes do trecho feed...
qualquer letra ou sinal errado neste trecho não deixa o código funcionar
src="http://www.dicasparablogs.com.br/feeds/posts/default.....
No meu Blog ñ deu certo , abaixo do slide aparece um espaço muito grande BRANCO , ''sem nada '' , fora isso o slide aparece normal .
ResponderExcluirveja se a configuração do seu feed está correta.
ResponderExcluiresse código usa o feed do blog para criar os slides
Olá Fabiano.. Adorei o Slide..mas no meu blog ficou com um fundo escuro e e as imagens praticamente não aparecem..só as letras.. Por favor, me diz onde mexer para o fundo ficar claro e dinâmico.. :)
ResponderExcluirObrigada.
é estranho acontecer isso o código não era para alterar a cor das imagens.
ResponderExcluirse usar um template dinâmico talvez ele gere erros no código, se for esse o caso não tem como resolver.
Fabiano,
ResponderExcluirantes de mais nada agradeço as suas dicas que muito me ajudaram a construir o meu blog.
Este é uma gadjet que já procuro há muito tempo e gostei do aspecto que mostra na imagem, mas no entanto nno meu blog ficou completamente diferente, não existindo qualquer forma de slide, nem aparecendo as setas.
Será que me poderia ajudar?
http://lusocarpediem.blogspot.pt/
Muito agradecido,
Rodrigo Afonso Silva
Rodrigo na pagina editar html você colocou o código antes de < head >
ResponderExcluirveja no tutorial o certo é colocar antes de < / head >
esse detalhe da barra que gerou o problema pois do jeito que você fez o código ficou fora do head.
O problema mantêm-se mesmo tendo alterado essa parte.
ResponderExcluiroutro detalhe é na hora de colocar o endereço do seu blog:
ResponderExcluirsrc="http://www.dicasparablogs.com.br/feeds/posts/default?orderby=published
qualquer letra ou sinal faltando dá erro.
Ei me expliquem ai como deixar ele só na página inicial
ResponderExcluirveja aqui
ResponderExcluirConteúdo diferente nas paginas do blog
nao tem como por um ao lado do outro nao?
ResponderExcluirCaique para as imagens ficarem uma do lado do outro não precisa de código de slides. Pode usar um código para imagens comuns (banners). Veja aqui:
ResponderExcluirOrganizar Banners
deu certo só que o seguinte, eu queria botar uma imagem diferente para passar nos slides de cada postagem, tem como? Falae
ResponderExcluiresse código não tem como trocar as imagens.
ResponderExcluirsó se alterar a imagem de cada postagem
Gostei muito deste post...
ResponderExcluirGostei muito desse post...
ResponderExcluirPerfeito ^^ Muito Obrigado
ResponderExcluirGosto muito das suas postagens, eu não entendo muito de blog, o pouco que sei aprendi aqui com você!
ResponderExcluirDeu tudo certo no meu slide, só que em baixo dele ficou uma faixa muito grande sem nada, fui em configuraçoes e alterei ( Configurações>>Outro>>Permitir feed de blog>>Completa>>Salvar Configurações.)
mas aida nao deu certo o que eu faço?
qual o endereço do blog?
Excluirtalvez seja algum outro código que está gerando o espaço vazio
é esse o endereço http://kamylasacomori.blogspot.com.br/
Excluirtem um trecho do código que está no lugar errado.
Excluir<style type='text/css'>
#slide-container {position: relative;height: 300px;width: 230px;font-family: calibri;}
.slide-desc {background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
.slide-desc h2 {display: block;}
#slider li {width: 230px;height: 300px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
#nextBtn{left: 550px !important;top: -225px;}
#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;}
#nextBtn a {background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;}
</style>
onde você colocou esse trecho? tente achar e apagar, depois coloque novamente pela pagina design, veja aqui:
Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog
Ooooi, Fabiano *0*
ResponderExcluirMds, demorei um ano pra conseguir botar isso + consegui '/-/'
#SouNubVlwFlw
Bom, msm assim eu tenho uma duvida o.O
#SouNubVlwFlw²
Não sei se você pois nesse post enorme, não vi, axo qe n botou, + tipo, qeria saber se tem alguma forma, maneira, algum jeito, de colocar segundos temporários para a troca de imagens!
Por exemplo..
Aparece uma imagem tisc tsc *
Passa _ segundos tisc tsc *
Aparece outra imagem tisc tsc *
Passa _ segundos tisc tsc *
Aparece outra imagem tisc tsc *
E assim vai indo x.x
Ou não tem como controlar os segundos entre cada imagem ?
'-'
' - '
' - '
Vlw pela ajuda *oo*
Abrazzos e obrigado por criar esse blog lindo maravilhoso espetacular que me ajuda mtt
Fuizz o/
neste código não tem como controlar o tempo (segundos)
ResponderExcluirQue triste '-'
ResponderExcluirOi,
ResponderExcluirO Slide nã está funcionando. espero que volte, é muito legal!
Obrigada!
esse slide depende de alguns códigos externos por isso as vezes pode haver falhas
ResponderExcluirOi!
ResponderExcluirFaz um temponho os tenho nos meus blogs, recebo e-mails de vocês, sempre com novidades.
Sempre estou atualizada com as novidades. Achei muito estranhos o slide não funcionar, nada mudei, apenas não funciona em todos os blog.
Me dê uma dica, como faço para que funcione????
Obrigada!!!
houve um problema com os scripts externos... se eles não voltarem a funcionar então será necessário trocar o código completo pois não tem como corrigir
ExcluirOi!
ExcluirCopiei o seu código, postei novamente .e não funciona.
Veja como pode me ajudar. Não sei onde está o erro.
Obrigada!
Ficou um espaço muito grande entre o slide e os itens abaixo dele. Tem como diminuir? http://diariode-escritora.blogspot.com.br/
ResponderExcluirnão achei o erro no código, mas pode tentar uma coisa.
Excluirprocure a linha position: relative;height: 400px;width: 700px;font-family: arial; e adicione o codigo !important
assim:
position: relative;height: 400px !important; width: 700px;font-family: arial;
Simplesmente AMO seu blog Fabiano!
ResponderExcluirAcompanho à tempo...
Considero um dos melhores aparatos que existe (se não o melhor).
Tudo que aprendo é sensacional, fiz até um banner daqui e coloquei no meu blog.
Fiz tudo direitinho e etá alterei o tamanho, só que as imagens não passam (mudam) como slides :(
Grande abraço.
as imagens que você usa no blog estão no blogger ou copiou endereços de imagens hospedadas em outros lugares?
ResponderExcluiras imagens tem que estar no blogger.
se tiver muitas coisas (gadgets, imagens, gif animado...) no seu blog ele pode travar o código.
Cara como faço para centralizar o Slides no blogger ?
ResponderExcluirdepois da linha: < style type='text/css' >
Excluircoloque este código:
#slider {margin:auto;text-align:center}
mas esses slides usando vários códigos então não dá pra ter certeza se funcionará antes de testar
Muito bom o post....masa conseguiram resolver o problema do espaco em baixo do slide ?
ResponderExcluirvou fazer alguns testes e procurar um novo código para slides
ResponderExcluirOlá Fabiano, fiz isso no meu blog, você pode acessar ele e me responder se tá lento?
ResponderExcluirEle é esse http://www.newsfoco.blogspot.com
ResponderExcluirRetirei o slides
ResponderExcluirslides geralmente deixa o blog mais lento...
Excluirveja se dá diferença no seu numero de visitas e tempo de carregamento da pagina no google analytics
Olá, boa noite, pode me ajudar? como faço para colocar um slide para aparecer postagens só de uma TAG ou marcador?
ResponderExcluirno tutorial falamos para adicionar um gadget com o código
Excluir< div id="slider" >< script src="http://www.dicasparablogs.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"......
altere o trecho http://www.dicasparablogs.com.br/feeds/posts/default colocando o nome do marcador que você quer deste jeito: /-/CSS
então o código ficará assim:
< div id="slider" >< script src="http://www.dicasparablogs.com.br/feeds/posts/default/-/CSS?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"......
as /-/ são parte do código, mas o CSS é o nosso marcador que usamos para demonstração, portanto coloque o nome do marcador que você quiser usar, mas tem que ser escrito exatamente igual é o seu marcador, inclusive as letras maiúsculas. Em nosso exemplo se eu usar css com letra minúscula não vai funcionar.