terça-feira, 12 de agosto de 2008

Personalizando o rodapé dos meus posts

Nesse domingo triste, na qual preferi não sair e ficar só, acabei fazendo uma personalização no rodapé do post, conforme vocês já devem ter visto. Motivado pelo post do Compulsivo, resolvi fazer uma inclusão no meu código.

No código disponibilizado pelo Compulsivo, ele muda completamente todo o rodapé, incluindo feed, um link diferente de comentários, e links para marcadores sociais.
A unica coisa que eu realmente queria do código, era apenas essa parte do feed, já que o resto eu tenho:

A minha curiosidade entrou em ação e logo percebi que essa parte do código estava em uma div, e para a formatação em CSS só bastaria pegar o # correspondente.

Logo entrei em ação:

- Como sempre fiz um backup do template, porque a Lei de Murphy é implacável! E marquei no Editar HTML, a caixa "Expandir modelos de widgets";

- Copiei essa parte(formatação em CSS) e colei antes do /Comments, apenas alterando a fonte para 90%:
#subscribe {width: 100%; font-size: 120%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 1em 0 1em; background: #eee; padding: 5px;}
- Em seguida, copiei a div correspondente no código compulsivo(com a sua devida permissão):
<div id='subscribe'> <!-- Personalizar Mensagem no rodapé dos posts -->
Gostou deste artigo? Então <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='faça seu comentário'>deixe um comentário</a> e assine nosso <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='RSS Feed'>RSS Feed</a>.
</div> <!-- fim subscribe -->
- Fiz algumas alterações, tais como colocar uma imagem do feed, alterei o texto para que somente houvesse apenas links dos meus feeds, e com os meus conhecimentos em HTML, o código ficou assim:
<div id='subscribe'> <!-- Personalizar Mensagem no rodapé dos posts --><table cellpadding='0' cellspacing='0' width='100%'><tr><td align='left' width='32'><img alt='RSS Feeds' src='http://i77.photobucket.com/albums/j76/j_rosario/feedicon48.png'/>
</td><td>Gostou deste artigo? Então, não se esqueça de comentar no link acima, votar nas estrelinhas e assinar nosso <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='RSS Feed'>RSS Feed</a> ou então se preferir, <a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1041876&loc=pt_BR' title='receba por email'>cadastre-se para receber gratuitamente as postagens por email</a>.</td></tr></table>
</div> <!-- fim subscribe -->
- E colei imediatamente após essa linha do código do template:
<div class='post-footer-line post-footer-line-3'/>
Visualizei, salvei e deu tudo certo, conforme podem ver abaixo no rodapé! Photobucket

A Juliana, do Dicas Blogger também postou um widget semelhante ao que fiz para colocar na barra lateral do blog. Confiram!!! Photobucket

A imagem do feed eu peguei nesse site aproveitando a dica da própria Juliana!
Photobucket

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google