Tutorial: Galeria com Posts Recentes do Blog

Ola meus amores!!! Hoje trago para vocês mais um tutorial, de como colocar  uma galeria com imagens "arredondadas" dos posts recentes. Como vocês podem conferir  ai logo a cima no meu blog.  Geralmente eu gosto de testar os tutoriais antes... Ele é bem simples de instalar (não precisa mexer no html do seu blog)  e funciona normalmente.
Os créditos desse tutorial vai para Elaine Gaspareto.

Então, vamos começar...
Va no painel do blog e clique na aba "Layout", a seguir clique em "Adicionar um gadget", escolha a opçao "HTML/JAVASCRIPT" e na janela que expandir cole o código:


<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: #c6ebfa; /*--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=\"LINK-DO-SEU-BLOG-AQUI/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script> </div> <div class='clear'> </div> </ textarea></center> OBS: Quase no final do codigo é necessario que vc substitua essa partre que esta com letras maiusculas "LINK-DO-SEU-BLOG-AQUI" pelo link do seu blog. Modifique alguns itens conforme seu gosto e pronto! Espero que vocês tenham gostado do tutorial de hoje,  Deixe seu comentário nos contanto a sua opinião! Ate o próximo post!