Ótima maneira para tornar seu blog mais profissional adicionando autor, marcadores e comentários abaixo do título das postagens.
Pequenos detalhes podem fazer toda a diferença! uma frase bastante conhecida mas que expressa bem o códigoque trazemos nesse tutorial. Através dele, seu blog passará a contar com uma opção de design bastante utilizada pela maioria do blogueiros, que, apesar de ser um pequeno detalhe dá um tom diferente às páginas e adicionará mais opções de informações a quem visita.
Com a aplicação do tutorial, aparecerão ícones com informações sobre o autor, a categoria (marcadores) e os comentários feitos até o momento em todas as postagens já publicadas em seu blog. Não que isso tragam milhares de visitas a seu blog, mas, com um design bem estruturado e organizado o visitante sentirá o trabalho sério e com certeza sempre voltará. Além disso, uma das determinações para ser aceito em alguns programas de afiliados é que a estrutura do blog seja profissional e adequada a quem acessa.
Pequenos detalhes podem fazer toda a diferença! uma frase bastante conhecida mas que expressa bem o códigoque trazemos nesse tutorial. Através dele, seu blog passará a contar com uma opção de design bastante utilizada pela maioria do blogueiros, que, apesar de ser um pequeno detalhe dá um tom diferente às páginas e adicionará mais opções de informações a quem visita.
Com a aplicação do tutorial, aparecerão ícones com informações sobre o autor, a categoria (marcadores) e os comentários feitos até o momento em todas as postagens já publicadas em seu blog. Não que isso tragam milhares de visitas a seu blog, mas, com um design bem estruturado e organizado o visitante sentirá o trabalho sério e com certeza sempre voltará. Além disso, uma das determinações para ser aceito em alguns programas de afiliados é que a estrutura do blog seja profissional e adequada a quem acessa.
 |
| Após a conclusão do tutorial |
Se você quer melhorar o visual de seu blog e inserir essas opções com possibilidade até de colocar as imagens que desejar, veja como é simples seguindo o tutorial.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Como colocar em seu blog
>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
>> Clique no código do template, pressione "CTRL+F" e pesquise por:
<div class='post-header-line-1'/>
* Você poderá encontrar dois trechos iguais, caso encontre opte pelo segundo.
>> Logo ABAIXO do trecho encontrado, cole o seguinte código:
<b:if cond='data:blog.pageType != "static_page"'>
<div class='postmeta-primary'>
<span class='meta_date'>Por: <b:if cond='data:post.authorProfileUrl'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a><b:else/><data:post.author/></b:if>&nbsp;as&nbsp;<data:post.timestamp/></span>
&nbsp;<span class='meta_categories'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if></span>
&nbsp;<span class='meta_comments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>Sem Comentarios</b:if><b:if cond='data:post.numComments == 1'>1 Comentario</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> Comentarios</b:if></a></b:if></span>
</div>
</b:if>
>> Pesquise agora por ]]></b:skin>
>> Logo ACIMA da tag encontrada, cole o seguinte código:
.postmeta-primary{color:#999;font-size:12px;line-height:18px;padding:0 0 10px;}
.postmeta-secondary{color:#999;font-size:12px;line-height:18px;padding:0 0 10px;}
.postmeta-primary span,.postmeta-secondary span{background-position:left center;background-repeat:no-repeat;padding:3px 0 3px 20px;}
.meta_date{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixNCmTtlhb8GmlZqSN2Z8X5wKO4aF-XCMUFqKtpgxlTWkrF02ChIVEPnLNMfn1tsfpZff5aUVKg2WwXDIQyLw99DNzsQolwf_hcUoqrnEgUmuVuQKTPKmaxVAWqRLltHvd-vJToUB1KQ9d/s1600/icon-date.png);}
.meta_author{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvx7tFLiBonNRv9I8hlEV8wsMlRhP-xFHAWDkpzlB7_YVDfc_GF5dVtgebuZFTrQ18PrEq-addQWQ4tHzYpisLH2BlAvXe0a41RmlZjKZtPMEpJzcanRAy7Kkv_Gip5sKedklfE9P-93Hg/s1600/author.png);}
.meta_comments{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoU62tUAlbIFC4WsffLtBKB9newgz6PQZx-vASb7DiNxBm_AuTlWKdMAHxYWhw_jmGNNIgAzs_b4xpwhmWav1XmP8ClGQkE5yqUZ1nLePIjDdx1ko5HQ-c2FYvXWSp9xqCUD6u9WulbrYc/s1600/icon-comment.png);}
.meta_edit{background-image:url(images/edit.png);}
.meta_categories{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhQppcHmarI3p7W74YY7rcQO7R207LnxzajejIs1IGn2uJimqhvM43btMkVeOnW2M4nvX7YiPIj3cBML5KgAe3riKAbqUq1b2KHae6VB_bepsuKfsxQh7olPFOdytwOkjzwb3TfahqBVM/s1600/icon-folder.png);}
* Os trechos destacados em VERMELHO são as urls das imagens, caso desejar substitua-as por outras.
>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".
>> Vá em seu blog e veja como ficou.
Somente nas páginas das postagens
Se desejar que apareça apenas das páginas das postagens, veja como proceder:
>> No primeiro código, logo no começo acrescente: <b:if cond='data:blog.pageType == "item"'>
>> No final acrescente: </b:if>
>> Ficando assim:
<b:if cond='data:blog.pageType == "item"'>
PRIMEIRO CÓDIGO
</b:if>
>> Salve normalmente.
Passos simples e visual interessante, essa é a melhor maneira de colocar autor, marcadores e comentários abaixo do título das postagens do blog, exibindo mais informações necessárias, estruturando profissionalmente seu blog, melhorando o visual e além de tudo com possibilidade de personalizar ao gosto do blogueiro.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
Comentários