Personalizar Widget Posts Populares No Blogger

Deixe o widget posts populares com um novo estilo no seu blog.

O Widget Posts Populares é aquele em que aparece as postagens mais vistas em nosso blog, e, nada melhor do que dar um visual renovado para que sejam apresentadas nossas melhores postagens e chamem ainda mais a atenção dos visitantes de nosso blog.

Pensando nisso, o ProDeveloper mostra como ter em seu blog o Widget Posts Populares com um design totalmente diferente do original presente no Blogger. Esse Widget, como você pode ver na imagem de apresentação, ficará com as postagens lado a lado, com uma borda de destaque e com o título logo abaixo.

Se você gostou do estilo, siga o tutorial abaixo e veja como instalar e personalizar em seu blog.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Tutorial

1- Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

2- Clique no código de seu template, pressione "CTRL+F" e pesquise por ]]></b:skin>

3- Logo ACIMA, cole o seguinte código:

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
 .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
 .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
 .PopularPosts .item-title{background: 000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

* Se você tem experiência com CSS, pode alterar alguns trechos e personalizar mais a seu gosto.

4- Clique em "Salvar Modelo".

5- Agora, no menu lateral de seu Blogger clique em "Layout".

6- Na parte que fica a sidebar clique em "Adicionar um gadget" e escolha por "Postagens Populares".

7- Configure ao seu gosto, clique em "Salvar" e depois "Salvar Organização".

8- Novamente no menu lateral do seu Blogger, agora clique em "Modelo" e depois "Editar HTML".

9- Clique na opção "Ir para um Widget" e escolha "PopularPosts1".

10- Selecione a parte como mostrado na imagem abaixo e apague-a.

<b:widget id='PopularPosts1' locked='false' title='POSTAGENS POPULARES' type='PopularPosts'>...</b:widget>

Observação: Cuidado para não sobrar trechos do código, pois pode dar erros. Selecione do final para o começo.

11- No local onde estava trecho do código, cole o código abaixo:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

12- Clique em "Visualizar", estando tudo certo clique em "Salvar Modelo".

Feito isso, estará tudo pronto.

Deixe seu comentário, pois ele motiva nosso trabalho.