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.

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.


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.


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.