Hélou benhês.
Nesse tutorial vou ensinar vocês a colocarem um slider automático de postagens recentes em miniatura no blog. Acho super bacana, pois além de mostrar os últimos posts, ele facilita a identificação do estilo do seu blog aos novos leitores.
Logo acima tem um exemplo, ou você pode ver o slider funcionando clicando aqui.
Pois então, vamos ao tutorial. Apenax siga os passos abaixo.
Passo 1: No painel do blog vá em Layout e adicione um gadget de HTML/JavaScript.
Passo 2: Após, copie o código abaixo e cole dentro desse gadget.
Mas se você quiser alterar as cores, fonte e tamanhos também fique à vontade, eu deixei tudo explicadinho no código.
Obs 1: A única coisa que você vai alterar no código é o número 3, ele é a quantidade de miniaturas que vão ser mostradas no slider.<center><style type="text/css">.bsrp-gallery {margin-top:70px; /*==MARGEM TOPO, ALTERE SE QUISER==*/width:1000px; /*==LARGURA DO SLIDE==*/float:center;clear:both;}.bsrp-gallery:after {display: table;clear: both;}.bsrp-gallery .bs-item a { /*==NÃO ALTERE NADA==*/position: relative;float:left;margin: 0 10px 15px 0;text-decoration:none;}.bsrp-gallery .bs-item .ptitle {background:#7FFFD4; /*==COR DE FUNDO DA LEGENDA==*/text-transform: uppercase; /*==TODAS AS LETRAS MAIÚSCULAS (APAGUE SE QUISER)==*/display: block;clear: left;font-family: 'Open Sans', sans-serif; /*==FONTE DO SLIDE==*/font-size:18px; /*==TAMANHO DA FONTE==*/line-height:1.3em;position: absolute;left: 0%; /*==MARGEM ESQUERDA==*/bottom: -40%; /*==ALTURA DA LEGENDA, ALTERE SE QUISER==*/text-align: center; /*==POSIÇÃO DO TEXTO (LEFT/CENTER/RIGHT)==*/color:#fff; /*== COR DA FONTE==*/width:80%; /*==LARGURA DA LEGENDA==*/height:45%; /*==ALTURA DA LEGENDA==*/padding-top: 45%;padding-bottom: 10%;padding-left: 10%;padding-right: 10%;border-radius: 100%;word-wrap: break-word;letter-spacing: 2px; /*==ESPAÇAMENTO DAS LETRAS==*/overflow:hidden;opacity: 0;transition-duration: 0.45s;-moz-transition-duration: 0.45s;-webkit-transition-duration: 0.45s;}.bsrp-gallery .bs-item:hover .ptitle {filter:alpha(opacity=80); /*==OPACIDADE DA LEGENDA (ALTERE PARA 1 SE QUISER==*/-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;bottom: 0%;}.bsrp-gallery a img {background: #fff;float: left;border-radius: 100%;transition-duration: 0.55s;-moz-transition-duration: 0.55s;-webkit-transition-duration: 0.55s;}.bsrp-gallery a:hover img {filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;}/*FIM CSS FOTOS*/</style><script>//byjanafunction bsrpGallery(root) {var entries = root.feed.entry || [];var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];for (var i = 0; i < entries.length; ++i) {var post = entries[i];var postTitle = post.title.$t;var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVotpKJqKVBZcKduqrEzqktBwpbiJmah2GR2Q4Qelj-WSWFP_Z0dEy6ooD2J5Ny21bTLQP1UryzBkOAd6s7FpvCBbOoinQLFNYXXDoudwSMsQZw7QbV1RLrwB4lrj8jhXTCTFrzLKaSLgH/s72-c/default+image.png';var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');var links = post.link || [];for (var j = 0; j < links.length; ++j) {if (links[j].rel == 'alternate') break;}var postUrl = links[j].href;var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';html.push('<div class="bs-item">', item, '</div>');}html.push('</div>');document.write(html.join(""));}hoje = new Date()numposts =1var bsrpg_thumbSize = 255;var bsrpg_showTitle = true;document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
Obs 2: Para usar a mesma fonte do exemplo, no painel do blog vá em Modelo > Editar HTML > Copie o código abaixo e cole após <head>.
<link href='https://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet'/>
Encontre outras cores clicando aqui.
Encontre outras fontes clicando aqui.
Após fazer as alterações necessárias salve e pronto! Peço que não disponibilizem esse código sob nenhuma hipótese.
Comentários são sempre bem vindos. Beijos de luz!
Nenhum comentário
Postar um comentário