terça-feira, 26 de agosto de 2008

Código para Link "Adicionar aos Favoritos"

Em uma postagem anterior eu deixei uma dica de como instalar um botão que adiciona aos favoritos o seu blog, se você clica nele. Porém, verifiquei depois que ele não funciona no Firefox, ao contrário do que eu disse na postagem anterior. Por isso, deixo aqui a dica de um código que funciona perfeitamente em ambos navegadores (parece funcionar em alguns outros também, porém não estou certo).

<script language="JavaScript" type="text/JavaScript">
function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Nome para exibição","http://endereçodoblog.blogspot.com",""); }
else { window.external.AddFavorite("http://endereçodoblog.blogspot.com","Nome para exibição"); } }
</script>
<a href="javascript:void(favoritos());">Adicionar aos Favoritos</a>

Modifique as partes do código em vermelho para o nome de exibição na lista de favoritos e o endereço que o nome deverá acessar (endereço do seu blog). A seguir modifique o código em azul para o link em que deverão clicar para adicionar sua página aos favoritos. Caso você queira uma imagem em vez de um link, cole o código da imagem no lugar ou junto ao link.

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem. Você será respondido o mais breve possível.

segunda-feira, 11 de agosto de 2008

Deixando o Link dos Comentários Mais Atrativo

Nesta postagem explicarei como modificar o link dos comentários abaixo das postagens. Muitos visitantes que não conhecem direito os blogs do google não entendem o que significa a mensagem abaixo de cada postagem "0 comentários", e apenas por isso não deixam o seu comentário. Para modificar o escrito no link, eis o que se deve fazer:

1. Acesse www.blogger.com-->faça login-->vá para a página LAYOUT-->vá para a sub-página EDITAR HTML.

2. Antes de começar a editar o HTML, tome uma precaução: baixe o modelo completo. Caso algo errado aconteça no modelo de seu blog tudo que você tem a fazer para recuperá-lo é baixar o modelo gravado (veja imagem abaixo).

3. Clique em REVERTER MODELOS DE WIDGET PARA O PADRÃO no fundo da janela (veja imagem abaixo).

4. Uma mensagem como a da figura abaixo aparecerá. Selecione OK.

5. Agora volte para o alto da janela. Acima da área onde ficam os códigos, você verá a opção EXPANDIR MODELOS DE WIDGETS. Selecione esta opção e aguarde alguns segundos (ver figura abaixo).

6. Busque o seguinte código no HTML de seu blog (para buscar o código, pressione as teclas Ctrl + F e digite na janela que aparecerá alguns caracteres do código):
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments==1'>1<data:top.commentLabel/><b:else/><data:post.numComments/><data:top.commentLabelPlural/></b:if></a> </b:if></b:if> </span>

7. Modifique o código acima pelo mostrado abaixo: <span class='post-comment-link'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> <p style='font-size:100%'>Seja o primeiro a comentar!</p> <b:else/> <b:if cond='data:post.numComments== 1'><p style='font-size:100%'>1 visitante comentou nesta postagem. Deixe seu comentário.</p><b:else/><p style='font-size:100%'><data:post.numComments/> visitantes comentaram nesta postagem. Deixe seu comentário..</p></b:if></b:if></a></b:if> </span><b:if cond='data:blog.url ==data:blog.homepageUrl'></b:if>

Modifique as partes do código mostradas em azul para as mensagens que você quiser que apareça. A primeira mensagem é para 0 comentários, a segunda para 1 comentário e a terceira para 'n' comentários, sendo 'n' um número maior que 1. Modifique os números mostrados em amarelo para o tamanho em que o link deve aparecer.

8. Caso você deseje que uma imagem apareça no lugar do link, ou mesmo junto a ele, adicione o código da imagem junto a parte mostrada em azul.

Bom proveito!

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem. Você será respondido o mais breve possível.

Como modificar o URL de seu Blog e adicionar código de transposição ao URL antigo

Às vezes, por um motivo ou outro, você quer mudar o URL (endereço) de seu blog para outro do qual você gostou mais ou que só agora ficou disponível. Para isso faça o seguinte:

Acesse www.blogger.com e faça o login. Nas opções de edição de seu blog vá para CONFIGURAÇÕES-->PUBLICAÇÃO. Nesta página você verá o endereço de seu blog, com uma opção para modificá-lo. Digite o novo endereço e clique em SALVAR CONFIGURAÇÕES.

Agora que seu blog tem outro endereço não vá deixar seus leitores na mão, sem saberem para onde foi seu blog! Faça o seguinte:
  1. Volte para o painel (www.blogger.com)
  2. Clique em CRIAR BLOG
  3. No novo blog que você estará criando, deixe o endereço antigo de seu outro blog. Selecione um modelo qualquer para o blog no próximo passo e finalmente clique em CONCLUIR
  4. Clique COMEÇAR A USAR O BLOG
  5. Vá para a página LAYOUT-->EDITAR HTML-->Busque a parte do código
    </head>
    Logo antes dela cole este código:
    <meta http-equiv="refresh"content="10;URL=http://endereço.do.blog"></meta>
    Modifique endereço.do.blog para o novo endereço de seu outro blog. (não esqueça do http://). Salve o modelo.
  6. Crie uma postagem no novo blog. Escreva na postagem algo mais ou menos assim:

    "http://endereçoantigodoblog.blogspot.com moveu-se para http://novoendereçodoblog.blogspot.com. Caso você não seja redirecionado em 10 segundos para o novo blog, clique aqui."

    Modifique http://endereçoantigodoblog.blogspot.com pelo endereço antigo do primeiro blog e http://novoendereço.blogspot.com pelo endereço para o qual ele se mudou. Deixe um link em clique aqui para o novo endereço do blog e modifique o resto do texto como quiser. Publique a postagem e visualize o blog.

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem! Você será respondido o mais breve possível.

Alguns botões para seu Blog

Nesta postagem vão duas dicas para adicionar diferentes botões a seu blog.

1. Botão "Adicionar página a favoritos" =

CÓDIGO UTILIZADO

<button style="WIDTH: 180px; HEIGHT: 32px" onclick="javascript:window.external.AddFavorite('http://dicas-para-bloggers.blogspot.com','Dicas para Bloggers')" width="10" font="arial" height="10"><span >Adicionar aos Favoritos</span></button>

No código acima, se você quiser o botão como ele está, tudo que você tem a fazer é mudar a parte do código em vermelho para o endereço de seu blog e a parte azul para o nome que você quer que apareça. Em "WIDTH: 180px; HEIGHT: 32px" você define o tamanho do botão. Nas partes do código width="10" font="arial" height="10" você definine o tamanho do texto que vai no botão e a fonte dele (no caso está arial).

2. Botões "Voltar" e "Avançar" =

CÓDIGO UTILIZADO

<input value="VOLTAR"
onclick="history.go( -1 );return true;" type="button"/>

<input value="AVANÇAR"
onclick="history.go( 1 );return true;" type="button"></input>

Modifique o tamanho dos botões por píxels em "WIDTH:72px; HEIGHT:32px". Para modificar o escrito nos botões apenas mude "VOLTAR" e "AVANÇAR" pelo que quiser. Para modificar a quantidade de páginas a voltar com um clique substitua "(1)" por outro número.

Os dois códigos acima foram testados por mim apenas nos navegadores Explorer e Firefox funcionando em ambos. Não tenho certeza se funcionam em outros navegadores.

Como montar um botão de pesquisa do Blogger em seu Blog

Este botão é o mesmo que aparece na barra do Blogger no topo do blog. No entanto você pode querer ocultar a barra do Blogger ou simplesmente deixar esta busca mais visível adicionando-a num novo elemento de página na barra lateral. O procedimento para isto é simples.
  1. Faça login em http://www.blogger.com/ .
  2. Acesse a página LAYOUT de seu blog (ver figura abaixo).

    Painel
  3. Na página LAYOUT clique em ADICIONAR GADGET (abaixo).

    Adicionar Gadget
  4. Nas opções que lhe serão apresentadas selecione HTML/Javascript (abaixo).

    HTML/Javascript
  5. Na nova janela que aparecerá cole este código:

    <form action="/search" name="f"><table cellspacing="0" cellpadding="0">
    <tbody>
    <tr valign="top">
    <td width="25%"></td>
    <td align="middle"><input onfocus="if(this.value=='Digite sua busca aqui')this.value='';" maxlength="2048" title="Pesquisa Google" value="Digite sua busca aqui" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" style="WIDTH: 131px; HEIGHT: 19px" size="19" name="q"/></td>
    <td width="25%"><span style="font-size:0;"></span></td></tr>
    <tr>
    <td colspan="3" align="middle"><span style="font-size:0;"><span style="TEXT-ALIGN: left"><label for="lgr"><input value="Pesquisar Blog" name="btnG" type="submit"/>
    </label><label for="cty">
    </label></span></span></td></tr></tbody></table></form>

    Salve o elemento de página e visualize seu blog.

    Caso você queira mudar o que aparece escrito no botão PESQUISAR BLOG modifique o texto que acima está em vermelho para o que quiser. Caso também deseje modificar o texto que aparece no campo onde você digita a busca modifique as duas partes do código em azul (as duas partes do código devem ter o mesmo texto).

Editando o Cabeçalho - Algumas dicas

Dicas para modificar ou editar o cabeçalho de seu blog.
Para ocultar o Cabeçalho -
1. Após o login em www.blogger.com vá para a página LAYOUT-->EDITAR HTML. Antes de tudo, baixe o modelo de seu blog utilizando o link apresentado na janela EDITAR HTML. Assim, caso algo errado aconteça na edição de HTML, tudo que você tem a fazer é baixar o modelo antigo para as coisas ficarem como estavam. 2. Busque a tag
]]></b:skin>
3. Logo antes desta tag, cole o código a seguir
#Header1 { display:none; } #header-wrapper { display:none; }
4. Salve as alterações e visualize o blog.

Para remover definitivamente o Cabeçalho -

Você pode já ter tentado remover o cabeçalho de seu blog do mesmo modo como você remove os elementos de página, isto é, clicando para editar e depois no botão EXCLUIR. No entanto, se você já tentou remover, você com certeza percebeu que o botão não está presente na edição do cabeçalho. Para modificar isto, faça o seguinte:

1. Vá para a página LAYOUT-->EDITAR HTML. Baixe o modelo do blog. 2. Busque a tag
<body>
3. Logo após esta tag, você verá o seguinte código (no lugar onde está o escrito Título do Blog estará o título de seu blog):
<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'><b:widget id='Header1' locked='false' title=Título do Blog (Cabeçalho)' type='Header'/></b:section></div>

4. Modifique o código locked='false' para locked='true' e salve as alterações. 5. Vá para LAYOUT-->ELEMENTOS DE PÁGINA. Clique EDITAR o cabeçalho - você verá que agora o botão EXCLUIR não está mais oculto.

Para centralizar o título de seu blog no Cabeçalho -

1. Após o login em www.blogger.com vá para LAYOUT-->EDITAR HTML e busque este código

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'><b:widget id='Header1' locked='false' title='Dicas para Bloggers(Cabeçalho)' type='Header'/></b:section></div>

2. Logo antes de id='header-wrapper' cole align='center'. Salve as alterações e visualize o blog.

Janela de Alerta ao Entrar-se em Seu Blog

Esta postagem mostrará dois tipos de janela popup - uma com uma alerta para seu blog e a outra com uma mensagem pedindo o nome do visitante.

Mensagem popup de alerta

Faça login em www.blogger.com. Vá para a página de seu blog LAYOUT-->Crie um novo elemento de página e selecione HTML/JAVASCRIPT. Copie neste elemento de página o seguinte código:

<script type="text/javascript"> alert('Este site contem material não-apropriado para maiores de 18 anos') </script> <noscript>Desative o bloqueador de popups para ver esta mensagem.</noscript>

Modifique a parte do código em vermelho para a mensagem que você deseja que apareça. Modifique a parte em verde para a mensagem que aparecerá caso o visitante mantenha ativado o bloqueador de popups e javascript. Salve o novo elemento de página e visualize seu blog.

Mensagem popup de indentificação do visitante

Esta janela mostra uma mensagem como a da figura abaixo cada vez que um visitante entra em seu blog. O problema dela é que pode tornar-se um pouco cansativa se o visitante visitar sua página com freqüencia.

Para conseguir esta janela, faça login em www.blogger.com-->Vá para a página LAYOUT-->Crie um novo elemento de página (HTML/JAVASCRIPT). No novo elemento de página, cole o seguinte código:

<script type="text/javascript"> var yourName = prompt("Como podemos chamá-lo?", "Visitante"); </script> Bem-vindo <script type="text/javascript">document.write(yourName)</script>! Navegue por este blog à vontade. Se você apreciá-lo, deixe um comentário numa postagem. Esperamos vê-lo novamente <script type="text/javascript">document.write(yourName)</script>

Modifique o primeiro código em vermelho pela pergunta e VISITANTE pela opção que aparecerá no campo onde o visitante digitará seu nome. Modifique a mensagem de boas-vindas em verde para o que você quiser que apareça.

Bom proveito!