Tudo bem moças lindas ? Quem e blogueira sabe que a gente procura varios tutorias facil para deixa o layout cada vez mais bonito para nossas leitoras não é verdade. Por tanto o Tutorial de hoje é de como colocar miniaturas de Postagens Recentes em destaques, O código original peguei no blog da Janaína Poderon, modifiquei algumas coisas e trouxe pra vocês, espero que gostem !
O Resultado é esse:
Gostou ? Quer aprender como faz ? Então vem comigo !
1- Vá em Layout >> Adicionar um Gadget >> HTML/JavaScript:
2- Cole o seguinte código dentro da caixa:
/*INICIO CSS FOTOS*/.bsrp-gallery {margin-left: 40px;width:1200px; ==LARGURA DO SLIDE==float:center; ==POSIÇÃO DO SLIDE==clear:both;}.bsrp-gallery:after {display: table;clear: both;}.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 10px 10px 0;text-decoration:none;border-radius:200px;-moz-border-radius:200px;-webkit-border-radius:200px;}.bsrp-gallery .bs-item .ptitle {background:#; /*==COR DA ÁREA DE TITULO==*/display: block;clear: left;font-family: 'Open Sans Condensed', cursive; ==FONTE DO SLIDE==font-weight:200;text-transform:uppercase; /*== LETRAS MAIÚSCULAS==*/font-size:16px; /*==TAMANHO DO TITULO==*/line-height:1.3em;height:50px;position: absolute;bottom:-25%;text-align: center; /*==POSIÇÃO DO TITULO==*/color:#000; /*== COR DO TITULO==*/width:95%;padding:6px;word-wrap: break-word;overflow:hidden;border-radius:200px;-moz-border-radius:200px;-webkit-border-radius:200px;}.bsrp-gallery a img {background: #;float: left;border-radius:200px;-moz-border-radius:200px;-webkit-border-radius:200px;}.bsrp-gallery a:hover img {filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;border-radius:200px;-moz-border-radius:200px;-webkit-border-radius:200px;}/*FIM CSS FOTOS*/function bsrpGallery(root) {var entries = root.feed.entry || [];var html = [''];for (var i = 0; ivar post = entries[i];var postTitle = post.title.$t;var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');var links = post.link || [];for (var j = 0; jif (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 =1var bsrpg_thumbSize = 250;var bsrpg_showTitle = true;document.write("Modificações:♥ Em vermelho está o tamanho das miniaturas.♥ Em verde está o link do seu blog.♥ Em azul está o número de miniaturas a serem exibidas.OBSERVAÇÃO: Para esse tutorial funcionar o seu blog precisa estar em Público e com o Feed ativo.
Dúvidas ? Sugestões ? Deixe seu comentário :)
Beijos e Fiquem com Deus !