Atualização do código para Favicon

Em janeiro, eu fiz um post ensinando a criar imagens no formato ICO para que os favicons funcionassem no ieca Internet Explorer - Favicon: como criar e hospedar imagens .ico.

Entretanto, o código passado não vinha funcionando no Google Chrome, que já é o terceiro browser mais usado na atualidade. Notei que no meu outro blog - Dicas de Informática - onde eu ainda não havia trocado de código, que o favicon funcionava no Chrome, mas não no Firefox. O que eu fiz? Juntei tudo e deu  nisto:

<link href='URL_DA_IMAGEM_ICO' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>

A partir daí, passou a funcionar em todos os navegadores, incluindo Chrome e Safari.

Fonte da Postagem

Inserindo o lápis de edição rápida de posts

Assim como acontece com os links de navegação, alguns autores de templates subtraem uma função muito legal do Blogger - presente nos templates clássicos - que é o quick edit pencil ou lápis de edição rápida. Trata-se de um pequeno botão, em forma de lápis, que serve para editarmos nossos posts diretamente da página do nosso blog.

O botão só poderá ser visualizado pelo dono do blog, que ao clicar sobre ele será direcionado ao editor de textos do Blogger. Isso é muito útil para quem deseja editar um post mais antigo, por exemplo. Você está lá, todo contente brincando no seu blog e descobre que uma imagem sumiu ou que uma palavra não foi escrita corretamente. Sem o botão, seria necessário ir até o painel do Blogger e procurar por esse post em editar postagens.

Para adicionar o lápis de edição rápida, entre no html do seu template, marque expandir modelos de widgets e procure pelo seguinte trecho (Crtl+F):

<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'>&#160;</span></a>
</span>
</b:if>

Substitua a linha vermelha por:

<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>

Devendo ficar assim:

<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/></a>
</span>
</b:if>

Agora, vá até os elementos de página e em postagens no blog, clique em editar. Abrirá uma nova janela de configuração das postagens. Marque a caixa mostrar edição rápida.

Este post foi inspirado em um comentário da super blogueira engajada Luma Rosa.

Fonte da Postagem

Como recuperar os links de navegação do Blogger

Apesar de essenciais, alguns templates são feitos sem os links de navegação do Blogger.

A falta desses links dificulta a vida dos nossos leitores. Para recuperá-los, devemos procurar pelo trecho abaixo - no html do template - e apagar a palavra none.

#blog-pager-older-link {

float: right;

display: none;

}

#blog-pager-newer-link {

float: left;

display: none;

}

#blog-pager {

text-align: center;

display: none;

}

Fonte:El Escaparate
Personalizando os links de navegação
Também é possível personalizar os links, conforme vemos nas imagens abaixo – gentilmente kibadas do megaboga blogue Usuário Compulsivo.

E quem irá ensiná-los a aplicar essa customização será o próprio:

• Ícones para facilitar a navegação no Blogger

• Como personalizar o navegador do Blogger

Uma boa semana a todos!

Fonte da Postagem

Favicon: como criar e hospedar imagens .ico

Ao customizar o template do Diário de Bordo me deparei com um problema. O favicon não aparecia em todos os navegadores, somente no Firefox. Eu nunca me preocupei muito com isso pois o Dicas Blogger é hospedado no blogspot e um íconezinho do Blogger não ia fazer diferença. Sem contar que eu achava que todo mundo deveria usar o Firefox. Já com o novo blog, considerei a idéia de fazer diferente, visto que ele tem domínio próprio e ficaria mais elegante com um favicon próprio. Fui ao super blog Compulsivo, peguei o código e…descobri que eu não sabia criar uma imagem no formato .ico – necessário para que o favicon funcionasse nos outros browsers. Pedi um help ao Compulsivo e ao mesmo tempo fui pesquisar no São Google. E aí está a solução que eu encontrei.

Para quem não sabe, favicon, conforme publicado anteriormente, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.

Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site: http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.

Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

Agora, vamos adaptar o código e inserir no html do nosso template. Este código é de autoria do Compulsivo, com todos os direitos reservados.

<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>

<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>

Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!

ATUALIZAÇÃO EM 19/04/2009

Para que funcione também no Google Chrome, visualize um novo código aqui.

Fonte da Postagem

Páginas estáticas no Blogger sem data

Faz muito tempo que eu uso páginas estáticas aqui no blog. O que seria isso? São aquelas páginas usadas como links da home page: contato, about me, parcerias e etc.

Para criar uma página assim é muito fácil. Basta escrever um post e escolher uma data antiga para a publicação. No editor de textos do Blogger, existe a opção data e hora de postagem – configure a seu gosto e pronto. Em uma página estática não há necessidade de comentários, então esses poderão ficar desabilitados.

O chato do procedimento acima é que a data ficará aparecendo. Caso a gente queira atualizar alguma das páginas estáticas, vai ficar uma coisa bem esquizofrênica: uma data super antiga para um texto atual. Um exemplo disso é o link sobre ou about me. Vamos supor que resolvemos colocar a nossa idade em um post com data de de 2 anos atrás. Na hora de atualizar a idade, a data continuará a mesma.

Em 2007 eu tinha 37 anos e não 38, como aparece no post

Para resolver essa questão, devemos retirar a data. Depois de muito quebrar a cabeça, pedi ajuda no Twitter e recebi o presente do querido Cidão - o link de um hack! Mas atenção: o hack só irá funcionar em posts com os comentários desabilitados.

Entre no html do template, faça um backup, marque a caixa expandir modelos de widgets e procure (Crtl+F) por:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Substitua por:

<b:if cond='data:post.allowComments'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Com isso, todos os posts que estiverem com os comentários desabilitados aparecerão sem a data. Vejam o meu novo About, clicando aqui.

Aproveito para dizer, que eu acho muito importante o about me. Eu não gosto de chegar em um blog e não conseguir descobrir quem é que está por de trás do texto e sobre qual é o tema do blog. Falarei mais sobre isso em um próximo post. Por enquanto, fiquem com as palavras da Nospheratt – a primeira blogueira a dar dicas sobre o Blogger:

Todo, absolutamente todo blog precisa ter uma página dessas. Não ter uma página que conte quem você é e que explique de quê trata seu blog significa um desperdício de oportunidades dos mais variados tipos; desde conquistar um novo leitor, até ser convidado para um projeto bacana.
Se você não tem um, vai criá-lo agora. Se você já tem um, vai fazer uma avaliação dele e fazer as modificações necessárias - e pode apostar que há modificações necessárias para fazer.

Fonte da Postagem

Colocando favicon no blog

Diversos usuários reportaram, nesta semana, problemas com o favicon de seus blogs. Favicon é aquele pequeno ícone que aparece na barra de endereços do navegador.

Aqui no Dicas Blogger, estava funcionando bem. Então, resolvi criar um novo post a fim de fornecer um código mais adequado.

Para quem ainda não tem um favicon, basta criá-lo no editor de imagens de sua preferência, no tamanho de 16 x 16 px e hospedar na web (ImageShack, PhotoBucket e etc). Existem também sites especializados na criação e distribuição de favicons. (Exemplo: favicon.cc)

Agora, vamos entrar no html do template e procurar por :

]]></b:skin>

Logo após, iremos colar o seguinte código:

<link href='http://sua_imagem.png' rel='icon' type='image/x-icon'/>
<link href='http://sua_imagem.png' rel='shortcut icon' type='image/x-icon'/>

Substituimos http://sua_imagem.png pela url do favicon.

Vamos visualizar o template e, se tudo estiver ok, salvá-lo.

Quem já utilizava o código anterior, deverá apagá-lo.

………

ATUALIZAÇÃO:

Para funcionar em todos os navegadores, leia este post:
Favicon:Como criar e hospedar imagens .ico

Fonte da Postagem

Resolvendo o problema com o Menu em Abas

Diversos  leitores reportaram problemas com o Menu em Abas instalado em alguns templates do Dicas Blogger. Vocês se lembram que o Google Pages está sendo desativado? Pois então, existe um script instalado nestes templates que faz com que o menu funcione. Este script encontra-se hospedado no Google Pages. Provavelmente o site deve ter apresentado algum tipo de instabilidade hoje e, como logo logo não estará mais disponível, o ideal é hospedar este script em outro lugar, certo?

Vamos lá!

Baixem o script clicando aqui e salvem no computador de vocês.

Sigam este tutorial para hospedar o script no SkyDrive da Microsoft:

SkyDrive-uma solução para o fim do Google Pages?

Copiem a url do arquivo.

Entrem no html do template, façam antes um backup e procurem por este código:

<!-- JavaScript Menu em Abas -->
<script src='http://dicasblogger.googlepages.com/tabber.js' type='text/javascript'/>

Substituam a parte em vermelho, pela url fornecida no SkyDrive. Visualizem o blog e se tudo estiver ok, cliquem em salvar modelo. Fiz o teste no Blogger Elegance e deu certo.=)

Informações

Continuo sem telefone em casa e, consequentemente sem conexão banda larga. Tenho usado o Speedy do meu consultório e do hospital onde trabalho, mas é tudo muito corrido. Estou fazendo o máximo que posso para responder os comentários e os emails, porém “tá difícil” de deixar tudo em ordem. Mais uma vez peço a compreensão de todos.

Como vocês já sabem, em casa estou usando uma conexão à lenha discada da Claro; com ela consigo usar o Twitter e mandar algumas atualizações. Então, fiquem de olho na sidebar ou me sigam por lá. Eu achei este recurso muito legal, pois além de mandar notícias sobre o blog, posso também “ conversar” com vocês.

Abraços!

Fonte da Postagem

Icones para redes socais no Blogger

Que tal colocar pequenos ícones no seu template para facilitar o envio dos seus posts para as redes sociais e para os favoritos ( bookmarks )?

Assim como  no Dicas Blogger:



É relativamente fácil...Vamos lá?

Entre no HTML do seu template e cole dentro do CSS o seguinte codigo:

/* -----   Bookmarking  ----- */
.book {
margin-top:5px;
        background:#fdfdfd;
        padding:2px 2px 2px 2px;
        border:1px solid #f0f0f0;
}
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Eu optei por colar após o trecho "Posts"

/* -----   Posts   ----- */          
      (todo o código)
/* -----   Bookmarking  ----- */

Depois clique em "expandir modelos de widgets".

Procure por esta linha:

<p class='post-footer-line post-footer-line-3'/>

Cole então o seguinte código, logo abaixo :

<div align='left'><div class='book'>
<div class='rsociales'>
<span class='blogk'>
<ul>
<li><a expr:href='data:post.emailPostUrl'
target='_blank' title='Enviar por Email'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://del.icio.us/post?url=&quot; +
data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Incluir no
del.icio.us'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot;
+ data:post.url' target='_blank' title='Incluir no
Digg'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
diHITT'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://www.linkk.com.br/submit.php?url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Incluir no
LinkK'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://rec6.via6.com/link.php?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Rec6'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://ueba.com.br/NovoLink?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Uêba'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
href='http://feeds.feedburner.com/dicasblogger/'><img
alt='Assinar feed' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://www.technorati.com/faves?add=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Technorati' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Google' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Yahoo!' class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Blogmarks' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
</ul>
</span>
</div>
</div>
</div>

Para cada ícone, você deverá linkar a imagem correspondente, hospedando-a no seu site de preferência.
Substitua em cada linha http://IMAGEM.gif pelo link de sua imagem .

Já disponibilizei os ícones para  DOWNLOAD.

Exemplo:

<li><a
expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
diHITT'><img class='rsociales-sobre'
src='http://i257.photobucket.com/albums/hh221/jusardinha/dihitt.png'/></a></li>
<li><a

Lembre-se de alterar o link do feed do Dicas Blogger pelo do seu blog:

<li><a
href='http://feeds.feedburner.com/dicasblogger/'><img
alt='Assinar feed' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a

E mais um template, saindo do forno, no final de semana.

Fonte da Postagem 

Como destacar citações no Blogger

  Segundo a norma NBR 10520:2002, elaborada pelo Comitê Técnico 014 (Informação e Documentação) da Associação Brasileira de Normas Técnicas, citação numa produção textual é a "Menção de uma informação extraída de outra fonte", tais como (livros, periódicos, vídeos, sites e etc).
As citações na produção textual são feitas para apoiar uma hipótese, sustentar uma idéia ou ilustrar um raciocínio. Sua função é oferecer ao leitor o respaldo necessário para que ele possa comprovar a veracidade das informações fornecidas e possibilitar o seu aprofundamento.
Ressalva-se que a referência bibliográfica, isto é, os dados que identificam uma publicação citada, tais como autor, título, local, editora ou data, deve aparecer no final do trabalho sob o título de Referências bibliográficas ou de Bibliografia, pois desta maneira o leitor poderá identificar a obra e, assim, facilitar sua localização em catálogos, índices bibliográficos, bibliotecas, Internet, entre outros locais.Wikipedia.

Mais uma Dica Compulsiva® .
Como dar destaque às citações nos posts.
Muito útil também para quem, como eu, vive publicando tutoriais.

Entre no html do seu template e procure por:

. post blockquote {
margin: 1em 20px;
border: 1px solid #c0c0c0;
background: #f5f5f5;
padding: 7px;
}

Configue as cores do fundo e da borda  a seu gosto.
Caso não exista este trecho no seu template, basta criá-lo antes da tag ]]></b:skin>.

FONTE: Usuário Compulsivo

Ranking de estrelas no Blogger

Já está disponível no Blogger in Draft um ranking de estrelas, também chamado de Rating, que permite aos leitores votarem no post.

 

Entretanto, tal como no caso do Formulário de Comentários, em alguns templates (leia-se na maioria), é necessário modificar o código html.

Em primeiro lugar devemos ir nos elementos de página e em postagens no blog clicar em Edit.

Feito isto, marcar a opção mostrar classificação de estrelas.






Em editar html, clicar em expandir modelos de widgets.

Localizar então esta linha:

<b:include name='feedLinks'/>

Logo abaixo incluir este código:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
} 
google.setOnLoadCallback(initialize);
</script>
</b:if>

Agora vamos escolher em qual local  que as estrelas irão aparecer:

<p class='post-footer-line post-footer-line-1'> primeira linha do rodapé do post
<p class='post-footer-line post-footer-line-2'>segunda linha do rodapé do post
<p class='post-footer-line post-footer-line-3'>final do rodapé do post

Inserir logo abaixo este código.

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor'
expr:g:text-color='data:textColor'
expr:g:url='data:post.absoluteUrl'
g:height='42'
g:type='RatingPanel'
g:width='180'>
</div>
</b:if>
</span>

Infelizmente está em inglês, mas já é um bom começo.

Vejam o resultado no AvSecurity:



O Blogger arrasou nos últimos dias, não?

Fonte da Postagem

Personalizando a caixa de comentários do Blogger

Passei algumas horas do domingão cuidando do template do Dicas Blogger e foi muito bom! Desde que customizei o Blogger Tips tomei gosto por mexer em html e prometo que em breve trarei um post sobre este assunto.

Hoje vou compartilhar com vocês alguns hacks para personalizar a caixa de comentários. Todos eles estão no blog do Compulsivo mas não sei se todos os meus leitores também são leitores dele (acredito que sim, pois o cara é fera) então, resolvi postar aqui também estas dicas preciosas!

IMPORTANTE: Para encontrar os trechos solicitados no tutorial, vá em layout, procure por editar html e clique sempre em expandir modelos de widgets.

DESTACANDO A ÁREA DOS COMENTÁRIOS

Para incluir um ícone destacando a área dos comentários, encontre a linha abaixo(Crtl+F) e onde está em vermelho substitua pela url do ícone.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='http://IMAGEM.png'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário: <b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Sugestão de site de ícones:

Icon Archive

Exemplo:

DESTACANDO OS COMENTÁRIOS DO AUTOR

Para destacar os comentários do autor do blog e procure pelo código abaixo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Inclua as partes em vermelho.

Dica: copie ele inteiro e cole entre as tags <dl id='comments-block'> e </dl>

Depois procure pela área do CSS, entre as tags <head></head> e cole o código abaixo:

. blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Personalize as cores da borda e do fundo a seu gosto!

ALTERANDO O LINK DO AUTOR

Para que seus comentários não sejam direcionados para o seu perfil do Blogger, procure pelo código abaixo, inserindo a linha em destaque.

<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

INSERINDO ICONE DOS COMENTÁRIOS DO AUTOR

Procure pelo mesmo código anterior e insira a linha em vermelho, substtuindo a url

<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<img src='http://URL_DA_IMAGEM/Imagem.png'/>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

Exemplo:

Neste exemplo vemos os 03 hacks já aplicados.

Divertido não?

Lembrem-se sempre de fazer um backup do template antes de utilizar estas dicas!

Todos os créditos para o Usuário Compulsivo.

Formulário de comentários no Blogger

Agora é possível inserir um formulário para comentários no Blogger.
Vejam como fica mais profissional:


Acesse o painel de controle através do Draft, vá na aba "comentários" e encontre a opção "posição do formulário"; marque a caixa "postagem abaixo incorporada".

Em alguns templates poderá não funcionar, mas o Compulsivo já deixou um hack para correção:
COMO HABILITAR FORMULÁRIO DE COMENTÁRIOS EMBUTIDO NO BLOGGER
Aproveitem para conhecer o novo Template Compulsivo®

FONTE: Usuário Compulsivo

Anúncios nas postagens do Blogger

Divulguei, recentemente, formas de exibir os anúncios pagos dentro dos posts.
Porém, hoje fui fazer os procedimentos para meu novo blog e me perdi um pouco entre tantos links, de tantos blogs... então, resolvi colocar tudo em um único post, para facilitar a minha vida e a de vocês.
Vale tanto para o AdSense quanto para o UOL afiliados.
Os créditos irão para os seguintes blogs, de onde retirei o conteúdo para este tutorial:
Templates Novo Blogger-Usuário Compulsivo-Blosque

• CONVERTENDO O CÓDIGO 

A primeira coisa que devemos fazer para colocar anúncios nos posts é converter o código gerado pelo programa de afiliados. Este procedimento não fere os termos do AdSense.

1. Vá no site do programa de anúncios e gere o código.
2. Entre neste site , cole o código na caixa em branco e clique em PARSE. Assim estaremos convertendo-o para a linguagem aceita pelo Blogger.

• COLOCANDO OS ANÚNCIOS NOS POSTS 

Para inserirmos as anúncios nas postagens, é necessário editar o html do template.
Basta ir em "Layout" e escolher "editar html"
Uma forma fácil de encontrar as tags (trechos de códigos) é utilizando o Crtl+F do teclado.

• ESCOLHENDO A MELHOR LOCALIZAÇÃO 

PARA INSERIR ENTRE O TÍTULO E O POST:
Insira o script convertido antes da tag <div class='post-body'>

PARA INSERIR NO FINAL DO POST:
Insira o script antes da tag <div class='post-footer'>

PARA INSERIR APÓS OS CRÉDITOS:
Insira o script antes da tag <p class='post-footer-line post-footer-line-3'>

• ESCOLHENDO A HOME OU PÁGINAS INDIVIDUAIS 

É possível configurar para que os anúncios apareçam na home page ou apenas nas páginas individuais. Eu prefiro a segunda opção pois deixa o visual mais clean.
Abra o bloco de notas, copie os código em vermelho e insira o do anúncio conforme indicado.

PARA INSERIR  OS ANÚNCIOS NAS PÁGINAS INDIVIDUAIS:
<b:if cond='data:blog.pageType == "item"'> BLOCO DE ANÚNCIO
</b:if>
PARA INSERIR NA HOME:
<b:if cond='data:blog.pageType != "item"'>
BLOCO DE ANÚNCIO
</b:if>
Feito isto, escolha a melhor localização como explicado anteriormente.

• UM EXEMPLO PRÁTICO 

Quero colocar um anúncio do AdSense, entre o título e o post, somente nas páginas individuais.
<b:if cond='data:blog.pageType == "item"'> BLOCO DE ANÚNCIO CONVERTIDO
</b:if> <div class='post-body'>

 

Espero ter conseguido facilitar a vida dos futuros ProBloggers.
Meus agradecimentos aos queridos gurus, Ariane e Compulsivo.

Fonte da Postagem

Retirar Navbar do Blogger

Para quem não sabe, a Navbar, é aquela barrinha do Blogger que fica acima do cabeçalho.

Para retirá-la, faça o seguinte:
Vá em layout>editar html>
Procure no html do seu blog por esta tag:

]]></b:skin>
</head>

eu costumo usar o recurso Crtl + F do teclado para encontrar trechos no html
Uma vez encontrada a tag, copie este código

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Cole ANTES da tag, devendo ficar assim:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }
]]></b:skin>
</head>

Veja na imagem:

Depois é só clicar em "salvar modelo".

Favicon: como criar e hospedar imagens .ico

Ao customizar o template do Diário de Bordo me deparei com um problema. O favicon não aparecia em todos os navegadores, somente no Firefox. Eu nunca me preocupei muito com isso pois o Dicas Blogger é hospedado no blogspot e um íconezinho do Blogger não ia fazer diferença. Sem contar que eu achava que todo mundo deveria usar o Firefox. Já com o novo blog, considerei a idéia de fazer diferente, visto que ele tem domínio próprio e ficaria mais elegante com um favicon próprio. Fui ao super blog Compulsivo, peguei o código e…descobri que eu não sabia criar uma imagem no formato .ico – necessário para que o favicon funcionasse nos outros browsers. Pedi um help ao Compulsivo e ao mesmo tempo fui pesquisar no São Google. E aí está a solução que eu encontrei.

Para quem não sabe, favicon, conforme publicado anteriormente, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.

Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site: http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.

Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

Agora, vamos adaptar o código e inserir no html do nosso template. Este código é de autoria do Compulsivo, com todos os direitos reservados.

<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>

<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>

Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!

ATUALIZAÇÃO EM 19/04/2009

Para que funcione também no Google Chrome, visualize um novo código aqui.

Fonte da Postagem 

Alterando Favicon

Favicon é aquele iconezinho, que aparece antes do endereço de um site ou blog.

Para personalizar seu favicon,crie uma imagem em 16 x 16 pixels, salve em PNG e faça o upload no servidor de sua preferência.(Eu uso o ImageShack)

Vá no html do seu template e procure pela tag <head>.

Insira o seguinte código:

<link href='http://SUAIMAGEM.png' rel='shortcut icon'/>

Trocando SUAIMAGEM pelo link fornecido pelo site de uploads.

Salve o modelo.

Simples, não?

Abraços

ATUALIZAÇÃO:

Para funcionar em todos os navegadores, leia este post:
Favicon:Como criar e hospedar imagens .ico

Fonte da Postagem 

Código para Posts Relacionados

Super dica que vi no Blog do meu amigo Paulo Estevão, do Códigos Blog.
Pedi sua autorização para publicar e ele, prontamente, concordou.
É um tutorial para inserir os Posts Relacionados no Blogger.
Colocando este código no layout do nosso blog, ao final de cada post, aparecerão links de posts com assuntos semelhantes, baseados nos "marcadores",o que facilitará a navegação dos nossos leitores.
Exemplo:


Vamos lá?

1º - Faça login no blogger , clique em "Layout" -> "Modelo" -> "Editar HTMl".
Antes de tudo clique em "Baixar modelo completo", para caso tenha algum erro você tem o layout salvo.
2º - Procure (Ctrl + F) a tag </head>. Cole o seguinte código logo antes dela:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

3º - Salve
4º - Clique em “Expandir modelos de widgets”
5º - Procure o seguinte código:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>

6º - Cole este código antes do </b:loop> :

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"'
type='text/javascript'/>
</b:if>

7º - Salve o template!

8º - Procure esse código:

<p class='post-footer-line post-footer-line-3'/>

9º - Adicione este código logo depois:

<b:if cond='data:blog.pageType == &quot;item&quot;'> Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Valeu Paulo!!!! Excelente dica!
Post original aqui

Aí pessoal, podem fazer sem medo. Deu certinho!

Os comentários para este post estão desabilitados. Em caso de dúvidas, por favor, dirija-se ao nosso fórum.

Fonte da Postagem

Linkbar-Menu Horizontal

Atendendo a pedidos....

Vou ensinar hoje como ter uma linkbar no seu blog.

A linkbar é esta barrinha onde colocamos links em destaque no lauyout do blog , também chamada de Menu Horizontal.

Para conseguir este efeito, é necessário utilizar um template que já venha com esta opção visível, ou seja, quando você for baixá-lo, observe se no layout existe um menu destes.

Existem 02 tipos de templates com linkbar:

• o que é necessário mexer no código html e
• o que já vem com uma opção nos "elementos de página".

No primeiro caso, devemos entrar no layout do Blogger e escolher a opção "editar html".

Feito isto, procurar por esta linha:

<div id='navigation'>

Abaixo encontre:

<li><a href='inserir link aqui' title='Artigos'>Artigos</a></li>
<li><a href='inserir link aqui' title='Fotos'>Fotos</a></li>
<li><a href='inserir link aqui' title='Links'>Links</a></li>
<li><a href='inserir link aqui' title='Forum'>Forum</a></li>

Em "inserir link" coloque o link para o qual você deseja apontar. No título, o nome que você quer dar a este link quando o leitor passar o mouse sobre seu link e depois, o título que aparecerá na sidebar.

Exemplo:

<li><a href='http://dicasblogger.blogspot.com/' title='Home'>Home</a></li>

Não é tão difícil...

E, no segundo caso, basta ir em "elementos de página" e procurar por "linkbar".

Clique em editar e insira os links.

Neste blog todos os templates já vêm com esta opção:

http://www.ourblogtemplates.com/

Créditos da imagem 1 e do html à Ariane, do Templates Novo Blogger.

Technorati Tags: linkbar - menu horizontal - templates

Fonte da Postagem h

Exibir anúncios entre as postagens

Me parece ser mais uma novidade do Blogger!
Agora é possível incluir anúncios do AdSense entre as postagens.
E é bem simples de fazer.

Basta ir em LAYOUT>ELEMENTOS DE PÁGINA.

Em POSTAGENS DO BLOG clique em EDITAR:


Aparecerá uma nova janela. Marque a opção "exibir anúncios entre postagens"


E pronto!
Bacana né?
Eu, particularmente, desconhecia esta opção e vocês?
Abração a todos!!!!!!!!!!!

Fonte da Postagem