Como Colocar Slides no Blogger: Slides das Postagens Recentes

Colocar slide em destaque no blog com as postagens recentes pode atrair a atenção dos seus visitantes e manter as pessoas mais tempo no seu site. Usar slides de postagens no blog para mostrar links e imagens dos seus últimos posts é um gadget útil para reduzir a taxa de rejeição e divulgar as novas postagens do seu blog e com isso conseguir mais compartilhamentos nas redes sociais. Além disso, os slides no blog são interessantes porque as imagens mudando automaticamente desperta mais interesse das pessoas que visitam o blog.

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.