Mestre Blogger

Mostrando postagens com marcador Ferramentas. Mostrar todas as postagens

quinta-feira, 1 de janeiro de 2009

Caixinhas de busca para blogs

Olá caros leitores! Antes de mais nada, Feliz Ano Novo à todos! Eu pretendia fazer uma postagem desejando-lhes o melhor para 2009 ontem, porém com a chuvinha que deu por aqui fiquei sem internet :(. E vamos agora à primeira postagem do ano! (lol)

Como muitos de meus leitores gostaram da dica de como montar uma caixa de pesquisa em blogs montei um modelo de caixinha simples, porém bonito e funcional. Os quatro modelos abaixo podem ser instalados muito fácilmente - basta clicar no modelo escolhido. Escolha e divirta-se! ;)

terça-feira, 16 de dezembro de 2008

Tabela de códigos das cores (postagem referencial)

Aqui temos um script retirado e customizado à partir do origninal no site Dynamic Drive que mostra os códigos referentes a todas as cores. Para utilizá-lo, clique aqui e abra o selecionador. Veja na imagem acima como conseguir o código desejado. É só clicar na cor com o mouse que o código refente a ela aparecerá. Mais simples impossível! :)

quinta-feira, 11 de dezembro de 2008

Removendo a contagem de seguidores

Depois que eu instalei o gadget Seguidores em meu blog, tive um pequeno problema com isto. É que após ter criado o gadget e dado um nome, foi adicionada a contagem automática de quantos estão me acompanhando, logo no título. Veja como:

Aqui eu pus o nome Seguidores, como exemplo.

Aqui, no tíulo do gadget, aparece a contagem. No entanto, eu não queria a contagem no título, pois esta já está colocada no próprio gadget. Então, quem também quiser tirar a contagem, faça como eu fiz:

1. Vá na página Layout -- Editar HTML.

2. Aqui, marque Expandir modelos de widgets.

3. Busque o seguinte código: (<data:totalFollowerCount/>) .

4. Após achado, remova-o inteiramente. É isto. Salve as alterações no template e visualize o blog.

5. Caso você deseje inserir novamente o código, faça os passos 1 e 2. A seguir, encontre este código:

<b:if cond='data:totalFollowerCount != ""'>

Cole entre <data:title/> e </h2> o trecho que tinha sido removido. Salve e pronto.

Outros interessantes

Para colocar o nome do gadget em outra disposição com a contagem, você pode fazer de algum modo como abaixo. Antes de ver as dicas, vá para Layout -- Editar HTML e marque a caixa Expandir modelos de widgets. Ache o seguinte código: <data:title/> (<data:totalFollowerCount/>)

Tenho 10 seguidores - Este formato deixa a contagem no meio. Para consegui-lo, substitua todo o trecho <data:title/> (<data:totalFollowerCount/>) por Tenho <data:totalFollowerCount/> seguidores

10 acompanhando este blog - Este formato deixa a contagem antes. Primeiro deve-se mudar o nome do gadget para acompanhando este blog. Depois, troque o trecho <data:title/> (<data:totalFollowerCount/>) por <data:totalFollowerCount/> <data:title/>. Você também pode por outros nomes no gadget como seguidores para que apareça 10 seguidores. Modifique as coisas como quiser! Lembre-se que:

<data:title/> - É o título que você escreveu no próprio gadget.
<data:totalFollowerCount/> - É a contagem de seguidores.

Agora utilize a sua criatividade e ponha o título como quiser ;)

Gadget Seguidores

Hoje algumas palavras sobre o mais recente gadget personalizado do Blogger. O Seguidores. Palavras do Blogger:

O que é Acompanhar?

Você tem um blog favorito e quer que o autor e os leitores saibam que você é um fã? Agora você pode fazer isso e muito mais com o recurso Acompanhamento do Blogger. Você pode até mesmo controlar os blogs que acompanha usando a sua Lista de leitura no painel do Blogger.

Como faço para ser seguidor de um blog?

Existem várias maneiras de se tornar seguidor de um blog. Uma das maneiras mais fáceis é visitar um blog que tenha adicionado o gadget Acompanhamento e clicar no link Acompanhar esse blog . Veja a figura abaixo:

Agora você verá uma janela pop-up com as opções de acompanhar o blog publicamente ou anonimamente.

Selecione como você gostaria de acompanhar e clique em Acompanhar (ou Follow). Pronto! Você já é um seguidor do blog. Se você escolheu acompanhar o blog publicamente, a foto do seu perfil será exibida no blog, com um link para o perfil do seu Blogger. No seu perfil do Blogger o blog será adicionado na lista Blogs que eu acompanho. No painel do Blogger você pode verificar as atualizações dos blogs que você acompanha. Veja a imagem:

Como faço para acompanhar um blog se ele não tiver o gadget Seguidores adicionado?

Se o blog que você quer seguir não tiver o gadget Seguidores adicionado, você pode adicioná-lo em sua Lista de Leitura indo pelo Painel do Blogger. Faça assim:

1. Entre no painel do Blogger.
2. Desça até o fim da página.
3. Embaixo da Lista de Leitura você verá um botão ADICIONAR. Clique nele. Uma janelinha como esta da imagem aparecerá.

4. Digite o URL (endereço) do blog que você quer acompanhar e clique em Próxima.

5. Na próxima página que abrirá, clique em Acompanhar e pronto!

Como faço para adicionar este gadget em meu blog?
Muito simples! Faça assim:

1. Vá em Layout -- Elementos de página.
2. Clique no link Adicionar um Gadget.
3. Na janela pop-up que aparecerá escolha a opção Seguidores (novo!):

4. Escolha um nome para o gadget e clique em Salvar. Está feito!

Agora, cada vez que você acessar o seu painel do Blogger você poderá ver quantos seguidores seu blog tem.
E que tal acompanhar o Mestre Blogger? Como você vê, é muito fácil... ;)

quarta-feira, 10 de dezembro de 2008

Imagem na barra lateral

Aqui uma dica para os que ainda estão começando a blogar, e ainda não conhecem as principais funcionalidades e gadgets do Blogger. Quando eu ainda estava aprendendo a blogar, queria a qualquer custo colocar uma imagem na barra lateral, e como não entendia HTML só consegui fazer isto quando descobri este gadget. Então aqui está a dica para os que não conhecem.

Para adicionar uma imagem na barra lateral de seu blog, há dois modos. Um é usando HTML básico, a outra é a que mostraremos aqui. Então, faça o seguinte.

1. Vamos para a página Layout, à partir de seu painel no Blogger.
2. Clique em Adicionar um Gadget.
3. Escolha a opção Imagem, que é como a figura acima mostra.
4. Aí, carregue a imagem que quiser, ponha um link para a imagem no campo Link; ponha uma legenda, se quiser, e um título para o gadget. Clique em Salvar.

Pare para um descanso...

5. Ainda na página Layout, vamos para Editar HTML.
6. Clique em Expandir modelos de widgets.
7. Aí, busque o título do gadget da imagem. Digamos que eu criei um gadget onde carreguei a imagem, coloquei um link na imagem e salvei. O título deste gadget pode ser Imagem. Após achar o nome, veja o código, que será como o abaixo:

<b:widget id='Image1' locked='false' title='Imagem' type='Image'>

<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

O trecho do código acima, logo no começo, que marquei com vermelho, é o título do gadget, que você terá achado na tag.
8. Logo abaixo do título, ache o trecho <a expr:href='data:link'> que acima eu marquei em verde, e substitua-o por <a expr:href='data:link' target='_blank'>. A seguir salve as alterações no template, e confira se está funcionando.

Gadget Postagens Recentes

Eu achava que esta ferramenta do Blogger era muito conhecida de todos. No entanto, como recentemente vi que há muitos que não a utilizam simplesmente porque não a conhecem ou não sabem como montar, estou deixando a dica aqui. Não há nada mais fácil do que adicionar este gadget que mostra as últimas postagens publicadas em seu blog. Então, para os que não sabem como fazer, vamos lá.

1. Vamos na página Layout -- Elementos de página de seu blog, à partir do painel do Blogger.
2. Clique em Adicionar um gadget.
3. Na janela pop-up que aparecerá, selecione a opção Feed, que aparece como na imagem abaixo.

4. Após ter clicado em Feed, uma janela como a mostrada na figura abaixo aparecerá. No campo em branco URL do Feed, cole o seguinte endereço: http://mestreblogger.blogspot.com/feeds/posts/default . Substitua o mestreblogger.blogspot.com pelo endereço de seu blog. Por exemplo: meublog.blogspot.com . Então, clique em Continuar.

5. Você será redirecionado para uma janela como a da figura abaixo. Escolha o nome do gadget, quantas postagens deverão aparecer na lista, e clique em Salvar.

Agora está pronto! Você já terá o gadget instalado e funcionando corretamente.

Como criar uma área de texto expandível

Nesta postagem veremos como criar uma área de texto expandível, que é um trecho de texto oculto na postagem, que é mostrado ao ser clicado um link. Veja aqui um exemplo:

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare (ler mais)

at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.

Este efeito de texto é extremamente útil em postagens longas, com bastante texto, pois evita a sobrecarregação do visual em seu blog e permite que você ponha quanto texto quiser sem encher demais a página. Também é muito fácil de ser adicionado o efeito; basta prestar atenção às instruções dadas abaixo. Então, vamos por passos, para facilitar...

1. Como sempre, acesse o seu painel do Blogger. Vá para a página de edição Layout e a seguir para a sub-página Editar HTML.

2. Clique em Baixar Modelo Completo. Agora, busque nesta página (usando as teclas CTRL + F) o código </head> .

3. Depois de achado o </head>, cole exatamente em cima dele, o seguinte código:

<style>

.texto_oculto {
display:none;
}
.texto_mostrado
{display:inline;
}
</style>

<script type='text/Javascript'>
function expandir_texto (linkid) {var texto_expandivel = document.getElementById(linkid);if (texto_expandivel.className=='texto_mostrado') { texto_expandivel.className='texto_oculto';} else { texto_expandivel.className='texto_mostrado'; }}
</script>

4. Salve as alterações no template.

5. Agora, vá para a postagem onde você deseja aplicar o efeito e clique em Editar HTML que fica junto à Escrever. Cole na postagem o código a seguir:

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare <a href="javascript:expandir_texto('NOME_AQUI')">(ler mais)</a><div class="texto_oculto" id="NOME_AQUI">at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.</div>

E agora, preste bastante atenção, pois se você fizer algo errado aqui o código não irá funcionar.

Substitua o primeiro trecho do código que está mostrado em verde pelo texto normal, sem o efeito aplicado.

Substitua o segundo trecho em verde, (ler mais), pelo texto do link. Será este trecho que ativará a área expandível.

E agora troque o terceiro trecho mostrado em verde para todo o texto que ficará oculto, só sendo mostrado quando clicarem em (ler mais).

Finalmente, modifique o trecho em vermelho, NOME_AQUI, para o nome do elemento. Os dois trechos em vermelho devem ser iguais, e em maíusculas. Não dê espaço entre as palavras do nome, e sim utilize a underline. Agora você pode publicar a postagem e ver o efeito.

Nota - Não tente ver se o efeito está funcionando clicando em Visualizar, pois ele não funciona na visualização.

segunda-feira, 1 de dezembro de 2008

Formulário de e-mail básico

Hoje veremos como montar um formulário de e-mail básico. Este formulário é utilizado em muitos sites na página contato, em vez do tradicional link de e-mail. Pode ser muito útil para blogueiros, e dá um ar mais profissional à seu blog. Considerando-se que este formulário raramente aparece em blogs, será interessante instalá-lo agora.

Nada mais fácil do que conseguir este formulário para seu blog. Siga os passos dados à seguir.
1. Acesse o seu painel do Blogger.
2. Vá para a página Layout -- Elementos de página.
3. Clique Adicionar um gadget.
4. Na janela pop-up que aparecerá, selecione o gadget HTML/Javascript.
5. Cole aí o seguinte script:

<script>

function CheckFields(pform) {
if ( pform.NOME.value == ""
pform.URL.value == ""
pform.MENSAGEM.value == ""
pform.EMAIL.value == "" ) {
alert( "Todos campos devem ser preenchidos." );
return false;
}
else {
alert ("Obrigado " +pform.NOME.value + "\nEspere um minuto, por favor...")
pform.action="mailto:" +pform.SEUEMAIL.value +"";
location.href="" +pform.REDIRECIONAMENTO.value +"";
return true;
}
}
</script>

Salve o gadget.

6. Vá para a nova postagem onde você deseja colocar o formulário.
7. Cole aí o seguinte código:

<form enctype="text/plain" name="pform" onsubmit="JavaScript:return CheckFields(this);" method="post">

<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR class=p2>
<TD width="18%" height="23"> <DIV align=right><B>Seu nome: </B></DIV></TD>
<TD colSpan=3><INPUT value="beckerqueiroz@gmail.com" type="hidden" size=50 name="SEUEMAIL"> <INPUT value="http://mestreblogger.blogspot.com" type="hidden" size=50 name="REDIRECIONAMENTO">
<INPUT size=50 name="NOME"> </TD>
</TR>
<TR class=p2>
<TD width="18%"> <DIV align=right><B>Endereço de seu blog:</B></DIV></TD>
<TD colSpan=3><input value="http://" name="URL" size="50" onBlur="if(this.value==''){this.value='http://'}"/></TD>
</TR>
<TR class=p2>
<TD width="18%"> <DIV align=right><B> E-Mail:</B></DIV></TD>
<TD colSpan=3><input name="EMAIL" size="50"/> </TD>
</TR>
<TR class=p2>
<TD vAlign=top width="18%"> <DIV align=right><B> Mensagem:</B></DIV></TD>
<TD colSpan=3> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>
<textarea name="MENSAGEM" rows=5 cols=40></textarea>
</FONT></P></TD>
</TR>
<TR>
<TD vAlign=top width="18%"> <DIV align=right><B></B></DIV></TD>
<TD colSpan=3> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>
<input value="Submeter" name="Submit" type="submit"/>
</FONT></P><P><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><i>Por <a href="http://mestreblogger.blogspot.com">Mestre Blogger</a></i></font></P></TD>
</TR>
</TBODY>
</TABLE>
</form>

Modifique apenas os dois trechos mostrados em verde. No primeiro, que é o meu endereço de e-mail, coloque o seu e-mail. No segundo, ponha o endereço da página para qual o visitante será redirecionado após enviar o e-mail. A página pode ser uma postagem de seu blog com uma mensagem agradecendo, ou mesmo a página principal de seu blog. Agora publique a postagem.

Lembre-se que é necessário não retirar os créditos de modo algum, pois este trabalho é nosso, e retirá-los é ilegal.

Quando você receber um e-mail, agora, a organização da mensagem será assim:

SEUEMAIL=beckerqueiroz@gmail.com
REDIRECIONAMENTO=http://mestreblogger.blogspot.com
NOME=Aqui o nome do remetente
URL=Aqui o endereço do blog do remetente
EMAIL=Aqui o e-mail do dito
MENSAGEM=E aqui a sua mensagem
Submit=Submeter

Os dados do visitante serão tudo que está mostrado em preto acima, e o resto, que não importa para o formulário, são os seus dados de e-mail, redirecionamento, e submissão de e-mail.

Agora você pode disponibilizar o formulário em sua página de contato facilmente. Não é fácil?

terça-feira, 25 de novembro de 2008

Como montar uma janela pop-up

Bem, anteriormente já havíamos postado algumas dicas sobre as janelas pop-ups em blogs, mas agora tudo vai junto com algumas dicas novas e está mais fácil de acompanhar.

Os pop-ups são estas janelinhas que aparecem automaticamente quando você entra em algum site (se você estiver com o bloqueador de pop-ups desativado) e também ao ser clicados alguns tipos de link. Aqui vamos mostrar os três tipos de pop-up principais.

n° 1 - Modo automático simples

Descrição: Este é o modo simples de pop-up que aparece tão logo carrega o blog em que ele está instalado (automaticamente). Se você tiver o bloqueador de pop-ups ativado eles não funcionarão em seu computador.

Código:

<script language="javascript">window.open('http://url_da_página_pop-up','Info','width=200,height=250,scrollbars=no,resizable=no,status=no,left=100,top=47');
</script>

Modificações no código:

Todos os trechos mostrados em verde no código podem ser modificados de acordo com a sua vontade. Modifique http://url_da_página_pop-up pelo endereço completo da página que deverá abrir como pop-up. Modifique 200 de width=200 pelo tamanho da largura da página e 250 de height=250 pela altura. resizable=no define se a janela será redimensionável. Caso deseje permitir isto, modifique no por yes. Modifique o no de scrollbars=no para yes caso você queira que a janela tenha barras de navegação.

Como adicionar:

Após acessar o painel de sua conta no blogger, vá para a página Layout -- Elementos de página. Selecione Adicionar um gadget e na janela com as opções de gadgets que aparecerá escolha HTML/Javascript. A seguir, cole o código do pop-up no gadget e, após modificar os campos desejados, salve o gadget e visualize o blog. Este código também pode ser adicionado em uma postagem qualquer.

n° 2 - Modo automático avançado

Descrição: Praticamente o mesmo pop-up anterior, porém desta vez o código contém um sistema de cookies que impede que o pop-up abra mais de uma vez na mesma janela. Após ter aparecido uma vez você poderá atualizar a página quantas vezes quiser que o pop-up não será ativado novamente.

Código:

<script>

function openpopup(){
var popurl="http://url_da_página_pop-up"
winpops=window.open(popurl,"","width=200,height=250,")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
onset = document.cookie.indexOf(search)
if (onset != -1) {
onset += search.length
end = document.cookie.indexOn(";", onset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(onset, end))
}
}
return returnvalue;
}
function loadornot(){
if (get_cookie('poppedup')==''){
openpopup()
document.cookie="poppedup=yes"
}
}
loadornot()
</script>

Modificações no código:

Modifique http://url_da_página_pop-up pelo endereço da página que abrirá em pop-up. Modifique o 200 de width=200 para o tamanho da largura da janela e 250 de height=250 para a altura.

Como adicionar: Siga os mesmos passos do modo anterior.

n° 3 - Modo OnClick
Descrição: A janela a ser aberta é exatamente como a do n° 1, porém ativa-se ao ser clicado um link. Alguns bloqueadores de pop-ups não funcionam com janelas clicadas.

Código:

<a onclick="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>

Modificações no código: As modificações no código também são como as do exemplo n° 1, exceto pelo trecho Texto do link, que você modificará para o texto do link que abrirá a janela. javascript:void(0) é o que aparecerá na barra de status. Não haverá diferença prática modificando-se este último trecho.
Como adicionar: Esta forma de pop-up pode ser adicionada na barra lateral (seguindo-se os passos do exemplo n° 1) ou numa postagem qualquer.

n° 4 Modo OnMouseOver

Descrição: Este modo é quase exatamente igual ao n° 3, sendo que a única diferença é que ele é ativado ao passar-se o mouse sobre o link (onMouseOver), e não ao ser clicado, como no exemplo anterior.

Código:

<a onmouseover="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>

Modificações no código: Modifique tudo como no exemplo n° 3.

Como adicionar: Também este código pode ser adicionado como no n° 3

E aí você tem os principais modos de pop-up. No entanto, quanto ao pop-up automático, lembre-se de não exagerar com isso porque se usado demasiadamente pode incomodar seus visitantes e fazê-los fechar o blog o quanto antes. Também o modo onMouseOver pode ser muito irritante, por isso tome cuidado na sua utilização.

segunda-feira, 24 de novembro de 2008

Como criar um menu suspenso

O menu suspenso pode ser uma ferramenta muito útil para os blogs de diversas maneiras. Pode-se ter uma lista de links ou de parcerias no menu suspenso, de modo a economizar espaço e não preencher tanto o seu layout. Em alguns casos ele é usado como menu de navegação no blog.
Veja aqui um exemplo de menu suspenso:

Nesse exemplo a página selecionada é acessada automaticamente. Para conseguir um botão Acessar que ative o link marque a opção Usar um botão no gerador. Também é possível ter uma imagem em vez de um botão simples, neste caso marque a opção Usar imagem como botão.

Veja este menu:

Para conseguir um menu como este acima, com mais de uma célula, faça o seguinte:

1. Após clicar no botão Gerar você verá que as primeiras linhas do código dadas serão estas:

<form name="jump">
<select size="1" name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

2. Modifique o número (marcado em verde no trecho acima) para o número de células que deverão aparecer.

Agora, veja o gerador abaixo e experimente fazer o seu menu suspenso.

Se preferir, acesse aqui o gerador numa nova janela.

Se preferir, acesse aqui o gerador numa nova janela.

Notas para utilizar o gerador -

1. Preencha os campos em branco à esquerda com o nome da célula e o campo respectivo à direita com o endereço do link correspondente.
2. Selecione ao alto as opções de como será o menu.
3. Clique em Gerar copie o código, cole-o em seu blog e bom proveito!

domingo, 23 de novembro de 2008

Link "Faça deste blog sua página principal"

Você pode já ter visto em alguns sites como o Yahoo um link convidando o leitor a fazer do site em questão sua página inicial ou seja, a página que carregará automaticamente quando você abrir a janela de seu navegador. Este código é especialmente útil para blogs com novas postagens diárias, pois assim o leitor, ao abrir uma janela do IE pode ver a nova postagem diretamente.

Aqui está uma demonstração deste link: Clique aqui para fazer deste blog a sua página inicial

Para conseguir este tipo de link você tem apenas que copiar o código dado abaixo e modificar as partes mostradas em verde - a primeira para o endereço de seu blog e a segunda para o texto do link. Se você quiser que em vez de texto apareça uma imagem no com o convite, substitua o texto Clique aqui para fazer deste blog a sua página inicial pelo código da imagem assim: <img src"endereço_da_imagem"/> substituindo o url da imagem este código onde você quiser em seu blog. Bom trabalho!

Código a seguir:

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://mestreblogger.blogspot.com');">Clique aqui para fazer deste blog a sua página inicial</a>

Nota - Lembre-se de que este código funciona apenas no Explorer 5.0 ou mais recente. Em outros navegadores o código não terá efeito algum.

terça-feira, 18 de novembro de 2008

Alerta popup com mensagem

Algumas semanas atrás um leitor me perguntou como se faz para inserir alertas pop-up no blog com opções diferentes: OK (continua no blog) ou CANCELAR (é redirecionado para outra página). Veja a figura acima que ilustra como se apresenta o alerta. Agora finalmente estou publicando as instruções para instar o alerta.

1. Acesse o painel do Blogger ou Blogger Draft.

2. Entre na página Layout -- Clique Adicionar um Gadget -- Selecione o gadget HTML/Javascript.

3. Cole dentro do gadget o script a seguir.

quarta-feira, 29 de outubro de 2008

Como inserir música no blog

Nesta postagem mostrarei o que leitores me perguntaram recentemente: como inserir um tocador de música em blogs. O tocador mais simples e prático é, a meu ver, o de HTML simples. Para consegui-lo você tem que, antes de mais nada, ter a música carregada em alguma página na internet. Para carregar a música de seu computador para a internet, uma vez que o blogger não dá essa opção, recomendo o site www.skydrive.live.com. Aprenda a utilizar este programa com a postagem no Dicas Blogger http://dicasblogger.blogspot.com/4008/09/skydrive-solucao-fim-google-pages.html.

Agora ataquemos o HTML. O código necessário para o tocador é este:

<embed src="endereço_da_sua_música"></embed>

Modifique o trecho do código em vermelho para o endereço da música desejada e o básico de seu tocador estará pronto. Porém, para melhorá-lo, temos outros atributos de reserva.

Para que a música inicie automaticamente (altamente NÃO recomendado por 2 razões principais) insira dentro do código o seguinte: autostart="true". O código inteiro aparecerá então assim: <embed src="endereço_da_sua_música" autostart="true"></embed>. Para desativar esta opção, simplesmente elimine este trecho do código.

Para definir a quantidade de vezes que a música deve tocar repetidamente após iniciada, use o seguinte: loop="2". Modifique o número para a quantidade de vezes que você quer que toque seguidamente. Caso queira que a música siga tocando até que o leitor fuja da página, substitua o número pelo atributo true. (Código: <embed src="endereço_da_sua_música" autostart="true" loop="2"></embed> )

Para definir o tamanho do tocador, insira o código width="300" e height="40". Modifique o número equivalente a width para o tamanho do comprimento do tocador (em píxels) e o equivalente a height para a altura. (Código: <embed src="endereço_da_sua_música" autostart="true" loop="false" width="300" height="40"></embed> )

Para ocultar o tocador de música, insira o atributo hidden="true" (Código: <embed src="endereço_da_sua_música" autostart="true" loop="false" width="300" height="40" hidden="true"></embed> )

Naturalmente existem outras opções para modificar o tocador, mas aqui estão representadas todas as principais e de maior utilização. E agora você pode ver o resultado de seu código com todas as tags acima (opa!, todas não! Senão ficaria tudo escondo graças ao último atributo adicionado):

E agora, os dois motivos para você NÃO por música automática em seu blog.

A música automática pode ser indesejável ao visitante. Neste caso ela será um "espanta visita", especialmente se você tiver feito o favorzinho de esconder o tocador, não lhe dando assim nem a opção de parar com o ~~barulho~~
A música automática vai tornar seu blog ~~ainda~~ mais pesado. Dependendo da capacidade do PC de seu visitante, pode até travar o seu computador, fazendo com que ele marque seu blog como página indesejável.
Outra problema no sentido de afastar os visitantes é que a música funciona como um pop-up incômodo - carrega cada vez que você acessa a determinada página, e logo faz com que o visitante fique incomodado. Como alguém disse "É como um amigo que, cada vez que o encontra, conta a mesma piadinha. Da primeira vez você pode gostar, mas depois vai ficando aborrecido..." Além de tudo isso, a música pode causar problemas ao visitante caso ele esteja no trabalho. Dá para imaginar, não...?

Gostou da música? Clique aqui!

terça-feira, 21 de outubro de 2008

Atalhos do teclado

Deixo-lhes nesta postagem algumas dicas referentes aos comandos do teclado que podem ser úteis nos blogs em geral. A maioria de vocês já conhecerá, provavelmente, os principais. Espero que possa ser útil.

CTRL + B = Deixa o texto previamente selecionado em negrito (bold)
CTRL + D = Grava a postagem como rascunho.
CTRL + C = Copia o texto ou imagem selecionado.
CTRL + F = Abre uma janelinha de pesquisa na página. O texto que você digitar nela aparecerá selecionado na página. Este comando é muito útil na edição de códigos HTML, quando se precisa achar uma tag.
CTRL + H = Nos navegadores do Windows, em geral, abre o histórico das páginas visitadas na internet.
CTRL + I = Deixa o texto selecionado em itálico. Se você usar este comando sem ter selecionado o texto previamente ou clicado na caixa de texto, ele abrirá a opção de organizar os seus Favoritos na internet.
CTRL + L = Insire um recuo no texto selecionado; o efeito é o espaçamento que vem no parágrafo.
CTRL + N = Abre uma nova janela do navegador da internet. No Internet Explorer abre a mesma página; nos outros navegadores abre apenas a sua página inicial.
CTRL + R = Atualiza a página da internet na qual você está.
CTRL + S = Salva a postagem como rascunho sem, no entanto, deixar a página, como ocorre com o comando Ctrl + D.
CTRL + V = Cola texto ou imagem copiados.
CTRL + W = Fecha a página na qual você se encontra. O mesmo efeito pode ser conseguido teclando-se ALT + F4.
CTRL + X = Recorta texto ou imagem selecionados. Use CTRL + V para colar o objeto recortado.
CTRL + Y = É o contrário do comando CTRL + Z: refaz a alteração que havia sido desfeita.
CTRL + Z = Desfaz alguma alteração na sua postagem que você acabou de fazer. Em alguns programas tem maior alcance (desfaz até 10 ou 20 alterações). É meu comando do teclado favorito quando estou editando algo no computador... lol.

E aqui dou por encerrada a lista. O leitor poderá verificar que em alguns programas a maioria destes atalhos tem a mesma serventia e em outros as coisas podem ser diferentes. Por isso mesmo tome cuidado antes de usar um atalho do teclado que você conhece como certa função em outro programa: em qualquer outro programa ele poderá ter um efeito bem diferente, e ,embora quase sempre se possa emendar o erro, nunca é demais checar os comandos num programa ao qual você não está acostumado. "O seguro morreu de velho" e na internet é muito fácil perder-se um arquivo no qual se passou horas trabalhando. Por isso, também, é recomendável que você salve o seu trabalho freqüentemente (no blog não precisa: ele possue um salvamento automático!) para evitar a perda do serviço.

sábado, 13 de setembro de 2008

Alerta com opções

Em uma postagem anterior eu mostrei como colocar em seu blog o código para um aviso que aparece cada vez que a página é atualizada. No entanto, aquele script só levava a opção de aceitar entrar no blog. Com este aqui o visitante tem a opção de fechar a página clicando em 'CANCELAR'. Ele aparecerá antes que a página termine de carregar, como no exemplo abaixo (claro que o aviso será outro!).

Clique aqui para ver um exemplo

Para consegui-lo use o código abaixo modificando apenas o aviso.

Bom proveito!

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).

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

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:

Volte para o painel (www.blogger.com)
Clique em CRIAR BLOG
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
Clique COMEÇAR A USAR O BLOG
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.
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

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.

Faça login em http://www.blogger.com/ .
Acesse a página LAYOUT de seu blog (ver figura abaixo).
Na página LAYOUT clique em ADICIONAR GADGET (abaixo).
Nas opções que lhe serão apresentadas selecione HTML/Javascript (abaixo).
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).

sábado, 9 de agosto de 2008

Como fazer uma lista de links em um Menu Suspenso

Às vezes você quer deixar uma lista de seus sites favoritos em seu blog, porém falta espaço e você não quer chamar muita atenção com a lista. Neste caso o melhor que você tem a fazer é um menu suspenso de links. O procedimento é bem simples. Antes de tudo acesse http://www.blogger.com/ e faça o login. Depois vá para a página Layout-->Elementos de página-->Adicionar um novo elemento de página-->HTML/Javascript. A seguir copie o seguinte código: >TR>

<select style="WIDTH: 169px" name="dd1" size="1"><option ; value=""/>Meus sites favoritos<option value="http://buho21.com"/>Buho21 - Ajedrez online<option value="http://vivi8.free.fr"/>Zorro - The Characters<option value="http://johnwayne.com"/>John Wayne - Official site<option value="http://webdeveloper.earthweb.com"/>Free Java Scripts<option value="http://avpxadrez.com"/>Xadrez Valeparaibano<option value="http://chess-poster.com"/>Chess Poster</select>

</form>

e cole-o ao novo elemento de página que você criou. Nas partes do código em vermelho irão os URLs (endereços) dos sites/blogs para os quais você vai endereçar. Nas partes em verde escreva o nome que você deseja que apareça para cada site. Por fim na parte em laranja digite o nome da lista e na parte cinza o nome do botão para acessar os links - por exemplo: "Acessar", "Ir", etc. Então clique SALVAR e visualize o blog a seguir. O menu suspenso ficará como este:

Contato - Fale conosco

Divulgue o Mestre Blogger

Assine o Mestre blogger

Arquivo do blog

Top 10 Parceiros

Top Comentaristas

quinta-feira, 1 de janeiro de 2009

terça-feira, 16 de dezembro de 2008

quinta-feira, 11 de dezembro de 2008

quarta-feira, 10 de dezembro de 2008

segunda-feira, 1 de dezembro de 2008

terça-feira, 25 de novembro de 2008

segunda-feira, 24 de novembro de 2008

domingo, 23 de novembro de 2008

terça-feira, 18 de novembro de 2008

quarta-feira, 29 de outubro de 2008

terça-feira, 21 de outubro de 2008

sábado, 13 de setembro de 2008

terça-feira, 26 de agosto de 2008

segunda-feira, 11 de agosto de 2008

sábado, 9 de agosto de 2008

Postagens recentes

Seguidores

Melhores dicas

Links parceiros

Parcerias (banner)

Categorias

Visitantes recentes - BlogBlogs

Últimos comentários

Top Comentaristas

Visitas