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).

<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>

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.

Páginas

terça-feira, 29 de julho de 2014