27 de jul de 2016

Miniaturas de posts recentes (redondo)

Oi gente, hoje o tutorial é bem facinho e dá uma personalizada legal no blog! 

Essas miniaturas de posts recentes tem o formato redondinho e também um efeito bem legal, ao passar o mouse aparece a legenda com o título do post.

Código por Elaine Gaspareto - Personalizado por Rocky







Para adicionar ao seu blog vá em "Layout", em seguida clique em "Adicionar Gadget e escolha o HTML/Javascript. 

Copie o código abaixo e cole no gadget, coloque o endereço do seu blog no lugar indicado e somente se necessário altere as informações que estão sinalizadas no código.

A cor do fundo da legenda é um rosinha claro (#FF99CC).

<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%;
clear:both;
margin-left:-3px;  /*--define o posicionamento à esquerda, altere se precisar--*/
padding-left:100px;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 15px;
text-decoration:none;
border-radius:130px;  /*--define o grau de arredondamento da imagem, --*/
-moz-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/
-webkit-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/
}
.bsrp-gallery .bs-item .ptitle {
background: #FF99CC; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300;
height: 48%; /*--define a altura da legenda --*/
width:79%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}

.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery a:hover img {
border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
-moz-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
-webkit-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="by elainegaspareto.com">'];
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 : 'http://2.bp.blogspot.com/-OSlo4lj_H4w/VRMrRXuZWyI/AAAAAAABCNA/RQsmcuaWiEE/s1600/sem.gif';
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 = 1;  /*--define em qual post começa a exibição --*/
var bsrpg_thumbSize = 213;  /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"URL-DO-SEU-BLOG/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div>
  • CURTE PERSONALIZAR SEU BLOG E QUER MAIS TUTORIAIS? TALVEZ VOCÊ GOSTE DESSES:

10 comentários :

  1. Rocky adorei, estou usando no meu blog, teria como vc fazer um tutorial com as imagens quadradas? Sua voz é muito meiga ♥... Bjs

    ResponderExcluir
    Respostas
    1. Obrigada *-* o post com as imagens quadradinhas já está programado, agora em setembro já sai! Beijos

      Excluir
  2. Eu amei sua dica,ficou muito lindo no meu blog,depois dessa postagem já virei sua fã,já estou seguindo seu blog para acompanhar as novidades.
    blogaventurasdiarias.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ah que legal, obrigada pelo carinho, volte sempre!!

      Excluir
  3. Raquel o meu ficou fora do lugar tipo focou reto so que um fiu em baixo

    ResponderExcluir
    Respostas
    1. Oi flor, você deve ter colocado na sidebar, o ideal é colocar o gadget na cross-column abaixo do cabeçalho, beijos :*

      Excluir
  4. Oi, Raquel! Amei o tutorial e tentei colocar no meu blog. Deu certo, mas como eu faço pras miniaturas serem as imagens dos posts ao invés dessa imagem que tá no código? Eu tentei trocar a url do código pela de outra imagem, mas ficou a mesma imagem em todas as miniaturas. Obrigada!
    Adoro o blog, obrigada pelas dicas ótimas! Beijos!

    ResponderExcluir
  5. Oi! Tudo bem? Rocky, minhas miniaturas ficaram grandes e ficou mais de uma linha, em que código posso mudar isso? Amei o blog e estou montando meu layout com os tutorias daqui!

    ResponderExcluir
  6. tem como colocar mais uma das imagens redondas??? Bjs

    ResponderExcluir
    Respostas
    1. Na última linha do código está marcado em rosa um número 4, troque aquele número pelo de miniaturas que você quer que apareçam.

      Excluir