Slide que insere automaticamente as postagens recentes do blog exibindo-as em estilo carrossel.
Bastante procurados na Blogosfera, os slides com posts recentes permitem aos donos dos blogs uma “tranquilidade” em não ter trabalho com edição e assim poder dedicar a outras tarefas. Fora esse trabalho a menos, com esses slides, disponibilizamos já imediatamente as postagens recém publicadas, e, normalmente é o que interessa a muitos visitantes principalmente aqueles que já conhecem o blog.
Anteriormente já publicamos aqui no blog um Slide com Posts Recentes Automático, porém esse slide que apresentamos nessa postagem, tem lá suas particularidades. Como já dito, ele é totalmente automático e inserirá as postagens recentes do blog com imagem (se a postagem conter), título, data da publicação e comentários até o momento. Tudo isso, com um efeito chamado carrousel (carrossel), caso você ainda não conheça, ele faz com que o slide “corra” lateralmente mostrando uma quantidade determinada pela largura, retornando ao estágio inicial e sempre repetindo o processo.
Outro ponto importante a ser citado, é que você poderá colocar em qualquer local de seu blog, bastando é claro que você conheça bem as áreas do template determinadas pelos códigos, pois, o slide se adequa automaticamente ao local (menos se for muito pequeno). No nosso tutorial, após a conclusão, o slide ficará logo abaixo do cabeçalho, espaço esse mais comum e propício para ser utilizado.
Slide Carrossel com Posts Recentes no Blog
Anteriormente já publicamos aqui no blog um Slide com Posts Recentes Automático, porém esse slide que apresentamos nessa postagem, tem lá suas particularidades. Como já dito, ele é totalmente automático e inserirá as postagens recentes do blog com imagem (se a postagem conter), título, data da publicação e comentários até o momento. Tudo isso, com um efeito chamado carrousel (carrossel), caso você ainda não conheça, ele faz com que o slide “corra” lateralmente mostrando uma quantidade determinada pela largura, retornando ao estágio inicial e sempre repetindo o processo.
Outro ponto importante a ser citado, é que você poderá colocar em qualquer local de seu blog, bastando é claro que você conheça bem as áreas do template determinadas pelos códigos, pois, o slide se adequa automaticamente ao local (menos se for muito pequeno). No nosso tutorial, após a conclusão, o slide ficará logo abaixo do cabeçalho, espaço esse mais comum e propício para ser utilizado.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Colocar Slide Carrossel no Blog
>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>
>> Logo ACIMA da tag encontrada, cole o seguinte código:
/* CSS Slider */
#featured-wrap{background:#4b5557;position:relative;height:225px;margin:0 auto;margin-bottom:20px;margin-top:10px;}
#featured{outline:none;position:relative;width:88%;height:200px;overflow:hidden;top:10px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:150px;display:inline-block;float:left;height:200px;background:#40484a;}
.thumb-featured{width:150px;height:150px;margin:5px auto;overflow:hidden;}
.thumb-featured img{opacity:0.7;display:block;width:135px;height:135px;padding:5px;background:#5b686a;transition:all .3s linear;}
.thumb-featured img:hover{opacity:1;background:#363c3e;transition:all .3s linear;}
.title-featured{text-align:center;position:relative;margin-top:-5px}
.title-featured a{color:#d5d9dc;}
.title-featured a:hover{color:#fff;transition:all .3s linear;}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#4b5557 url(http://3.bp.blogspot.com/-fD6n0KkLQAE/U4nnStRGPkI/AAAAAAAADhE/5nOTxqken-o/s1600/arrow.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:85px;text-indent:-9999px;}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{display:none;background-image:none;background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}
>> Logo ACIMA da tag encontrada, cole o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
var numpostx = 12,
thumbSize = 140,
contjumlah = 0,
cmtext = "Comentarios",
pBlank = "http://4.bp.blogspot.com/-GTi1qJI5XEQ/U4nnmPWZGaI/AAAAAAAADhc/L3g0KV4hoRo/s1600/no-image2.png",
pkBlank = "http://3.bp.blogspot.com/-zkU-NPD-TGk/U4nnlyy_8_I/AAAAAAAADhY/V51m4qNLTZM/s1600/avatar.png",
numcomment = 5,
thumbcsize = 140,
cmsumm = 50;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumb-featured"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"title="'+b+'" /></span></a></div><div class="title-featured"><h4><a href="'+k+'" title="'+b+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#featured").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#featured-wrap").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#featured-wrap").trigger("next")}},8000)}else{$("#featured").html("<span>No result!</span>")}},error:function(){$("#featured").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+m+'"><span><img src="'+a+'" title="'+g+'" alt="'+g+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'" title="'+g+'" class="tooltip">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Erro ao carregar</strong>")}})});
//]]>
</script>
* Destacado em AMARELO, quantidade de posts que aparecerão no slide.
>> Pesquise agora por </header>
>> Logo ABAIXO da tag encontrada, cole o seguinte código:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>Loading...</span>
</div>
</div>
</b:if>
* Com essa configuração, o slide aparecerá apenas na página inicial do blog. Caso desejar que apareça nas outras páginas, retire a primeira e a última linha do código.
>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".
>> Vá em seu blog e veja como ficou.
Com a conclusão do processo o slide automático com posts recentes estilo carrossel já estará totalmente adaptado a um local importante de seu blog, e, a partir de agora já exibindo todas as atualizações com design panorâmico e moderno, assim, chamando a atenção e atraindo cada vez mais cliques e adeptos as suas novas publicações.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
Comentários