Olá geeks, tudo bem com vocês?
Hoje eu vim trazer um tutorial sobre postagens recentes no topo do blog igual ao meu. Eu peguei ele do site da Elaine Gaspareto, mas editei. Então, se você quiser igual ao dela você pode vir aqui (www). Já se quiser igual ao meu continue lendo. Lembrando que todos os créditos vão para a Elaine, eu apenas editei para que ficasse do jeito que eu queria. Resolvi trazer este tutorial à pedido da Rebecca Castro pediu para mim. Se você quiser algum tutorial é só pedir, viu? Prestem bem a atenção no código à seguir:
/* CSS – Destaque de posts */.bsrp-gallery {width:100%;clear:both;margin-left:-100px; /*–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 {display: block;clear: left;font-size: 18px; /*–tamanho da fonte–*/font-family: Impact; /*–tipo da fonte–*/text-shadow:#000 2px -2px 3px, #000 -2px 2px 3px, #000 2px 2px 3px, #000 -2px -2px 3px;border: #FFFFFF dashed; /*–cor da borda pontilhada–*/text-transform:uppercase; /*–coloca o texto em capslock, apague se desejar –*/line-height:1.3em;font-weight:300;height: 50%; /*–define a altura da legenda –*/width:81%; /*–define a largura da legenda –*/position: absolute;bottom:0%;text-align: center;margin:0 0 14px 13px;padding:60px 5px 20px 5px;color: #FFFFFF; /*–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=100);-moz-opacity:1.0;-khtml-opacity:1.0;opacity:1.0;border-radius:130px;-moz-border-radius:130px;-webkit-border-radius:130px;}.bsrp-gallery a img {background: #FFFFFF;float: left;border-radius:130px;-moz-border-radius:130px;-webkit-border-radius:130px;-webkit-transition-duration: .90s;-webkit-filter: grayscale(100%);}.bsrp-gallery a:hover img {-webkit-transition-duration: .90s;-webkit-filter: grayscale(0%);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 */function bsrpGallery(root) {var entries = root.feed.entry || [];var html = [”];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 = ‘
‘;var pTitle = bsrpg_showTitle ? ” + postTitle + ” : ”;var item = ” + imgTag + pTitle + ”;html.push(”, item, ”);}html.push(”);document.write(html.join(“”));}hoje = new Date()
numposts = 7; /*–define em qual post começa a exibição –*/
var bsrpg_thumbSize = 213; /*–define o tamanho das miniaturas –*/var bsrpg_showTitle = true;
document.write(“”);
Onde eu coloquei em negrito é onde vocês irão colocar o link de seu blog, lembrando que deverá ter o http antes. O código é auto explicativo e onde dá para editar vocês podem ver que está escrito na frente o que muda no código. Onde está o 3 em negrito é onde vocês deverão escolher quantos post irão mostrar, lá está três ou seja, irá parecer só três postagens recentes, entendeu? Vá no seu blog em Layout>Adicionar Gadget>HTML/JavaScript cole o código e salve! Vê se ficou tudo certinho e pronto! Espero que gostem!