Efeitos HTML em Texto

CÓDIGOS HTML PARA EFEITOS EM TEXTO

Quando você está criando uma postagem você tem algumas opções para texto disponíveis na barra acima da postagem. No entanto, às vezes você quer outras opções que não são dadas. O remédio para isto é edição de HTML. Seguem as dicas para alguns efeitos.

Para deixar o texto sublinhado digite o texto que você quiser que leve este efeito entre as tags <U> e </U>.
Para deixar o texto em negrito digite-o entre as tags <STRONG> e </STRONG>.
Para deixar o texto riscado digite-o entre <S> e </S>.
Para deixar o texto enfatizado digite-o entre <em> e </em>.
Para deixar o texto em itálico digite-o entre <I> e </I>.
Para deixar o texto _subscrito digite-o entre <SUB> e </SUB>.
Para deixar o texto ^superscrito digite-o entre <SUP> e </SUP>.
Para deixar o texto pequeno digite-o entre <SMALL> e </SMALL>.
Para deixar o texto grande digite-o entre <BIG> e </BIG>.
Para modificar a fonte use o código <font face="NOME">TEXTO</font>. Onde está escrito NOME deixe Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS ou Verdana. Lembre-se de que outras fontes podem não ficar disponíveis para alguns leitores, se eles não as tiverem em seus computadores.
Para modificar o tamanho da fonte use o código <font size="NÚMERO">TEXTO</font&gy;. Substitua NÚMERO por um número de 1 a 7 (se puser um número maior deixe o sinal "%" no meio, assim: 130%).
Para dar ao texto uma cor de fundo digite-o entre <span style="background-color:#COR"> e </span> e substitua COR pelo nome da cor em inglês ou pelo código respectivo.
Para modificar a cor do texto digite-o entre <span style="color:#cor"> e </span> modificando COR pelo código ou nome da cor (em inglês).
Para texto pré-formatado (por exemplo, poesia) use <PRE>POESIA</PRE> substituindo POESIA pelo texto ou poesia. Isto é para não perder a formatação - por exemplo: quando você copia um texto do Word e o cola numa postagem do blog, ele perde toda a formatação (quebras de linha, etc). Porém, se você o colar dentro do <PRE>
Para mostrar o significado de uma palavra quando se passa o mouse por cima, (passe o mouse AQUIdigite o texto entre <abbr title="EXPLICAÇÃO"> e <abbr> modificando EXPLICAÇÃO pelo texto que aparecerá quando passarem o mouse. Este efeito funciona no Explorer 7 e Firefox 2.
Para conseguir um espaço antes do texto em cada parágrafo, coloque o texto de cada parágrafo entre <p style="text-indent: 20px;">TEXTOPARÁGRAFO</p> (substitua TEXTOPARÁGRAFO pelo texto de cada parágrafo. Também modifique 20px pelo tamanho em píxels do avanço de parágrafo).
Para deixar um texto dentro de uma caixa use este código: <DIV style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: black 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 15px auto 0px; BORDER-LEFT: black 1px solid; WIDTH: 300px; PADDING-TOP: 10px; BORDER-BOTTOM: black 1px solid">TEXTODENTRODACAIXA</div>. O resultado ficará assim:
<DIV style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: black 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 15px auto 0px; BORDER-LEFT: black 1px solid; WIDTH: 300px; PADDING-TOP: 10px; BORDER-BOTTOM: black 1px solid"></DIV>
.
Outra caixa bastante usada para códigos HTML é formada pelo texto colocado dentre das tags <TEXTAREA> e </TEXTAREA>. Ela fica assim: Outra caixa bastante usada para....

E por enquanto é isto. Mais para a frente poremos outros efeitos de texto interessantes.

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

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.

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).
   
3. Na página LAYOUT clique em ADICIONAR GADGET (abaixo).
   
4. Nas opções que lhe serão apresentadas selecione HTML/Javascript (abaixo).
   
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!

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>

<form name="form1" method="post"> <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> <input value="Ir" onclick="location = document.form1.dd1.options [document.form1.dd1.selectedIndex].value;" type="button"/> </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:

Meus sites favoritosBuho21 - Ajedrez onlineZorro - The CharactersJohn Wayne - Official siteFree Java ScriptsXadrez ValeparaibanoChess Poster

Outros Pop-ups

No Blogger o único modo de conseguir um pop-up é pela edição de HTML. Seguem as dicas para conseguir alguns outros tipos de pop-ups. 1 - Para conseguir este efeito (passe o mouse), eis o código que utilizei:

<A onmouseover="window.open('http://beckerqueiroz.googlepages.com/janelapopup','Info','status=yes,scrollbars=no,resizable=no,width=350,height=407,left=100,top=47');" href="javascript:void(0)">este efeito</A>

Na parte do código acima indicada em vermelho cole o endereço da janela que você deseja abrir.

2 - Para conseguir uma janela que abra ao clicar-se nela, porém sem o campo para o endereço e com tamanho pré definido, use o seguinte código:

<A onclick="window.open('http://beckerqueiroz.googlepages.com/janelapopup','Info','status=yes,scrollbars=yes,resizable=yes,width=620,height=450,left=100,top=47');" href="javascript:void(0)">Clique para ver o pop-up!</A>

Após o campo para digitar o endereço da janela que você deseja abrir como pop-up você vê as diversas opções de como será a janela. status=yes permitirá que na janela sejam mostradas as opções de internet (histórico, atualizar, etc); scrollbars=yes deixará que apareçam as barras laterais para navegar pela janela; resizable=yes definirá se a janela será redimensionável; width=620 definie que o comprimento da página será em 620 píxels e height=450 deixa a altura em 450. Há muitos outros tipos de pop-up - aqui eu apresentei apenas os modelos mais usados -porém estes modelos sempre funcionam no Blogger, enquanto outros que estão bem para sites não funcionam em blogs. Também é bom recordar, no caso do pop-up que aparece quando a página carrega, que além de muitas pessoas deixarem ativado em seus computadores o bloqueador de pop-ups, para muitas pessoas os pop-ups dão a impressão de um site de propagandas comerciais. Mesmo que o visitante não se incomode com o pop-up, após duas ou três visitas o pop-up fará com que ele perca a vontade de acessar seu blog, pois estas coisas sempre cansam. Enfim, com bom uso pop-ups podem se tornar extremamente úteis, e isso é que importa. Bom proveito da dica acima!

Como conseguir um Pop-Up para o seu blog

Apesar dos muitos sites na internet que ensinam como criar uma janela pop-up para sua web, nenhum deles ensina como fazer um pop-up para seu blog. Pode-se tentar empregar as dicas feitas para sites para um blog, porém elas quase nunca vão funcionar. Pesquisando sobre o assunto consegui o código que segue, retirado de um site cheio de pop-ups, e ligeiramente modificado. O interessante deste código é que contem uma função de cookies que apenas abre o pop-up da primeira vez que você entra no blog. Depois, enquanto você mantiver esta janela aberta, você poderá atualizar a página quantas vezes quiser que o pop-up não aparecerá. Segue o código:

<script> function openpopup(){ var popurl="Ponha o endereço de seu site aqui" winpops=window.open(popurl,"","width=600,height=600,") } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { onset = document.cookie.indexOf(search) if (onset != -1) { // if cookie exists onset += search.length // set index of beginning of value end = document.cookie.indexOn(";", onset); // set index of end of cookie value 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>

Cole o código dado acima em um novo elemento de página na sub-página de Layout. Para fazer isso:

1. Acesse www.blogger.com
2. Clique em Layout.
3. Vá para a sub-página Elementos de página.
4. Clique Adicionar um elemento de página.
5. Na janela que aparecerá escolha a opção HTML/Javascript.
6. Cole neste elemento de página o código do pop-up e clique em SALVAR.

IMPORTANTE - Ao modificar a parte do código em vermelho tome cuidado para não deixar nenhum espaço no URL (endereço) da janela que você deseja abrir. A parte azul do código pode ser modificada para definir o tamanho da janela pop-up. Bom proveito!

Como remover a barra de navegação do Blogger

Para remover a barra de navegação do Blogger (veja figura abaixo)

em seu blog, siga os seguintes passos:

1. Acesse www.blogger.com
2. Após o entrar com sua conta do blogger clique em Layout ---> Editar HTML.
3. Na parte de CSS do HTML de seu blog busque este código: ]]></b:skin>
   (Para achar esta tag na "confusão" de códigos do seu blog pressione as teclas Ctrl+F e na janela que aparecerá digite a tag que você está buscando).
4. Imediatamente antes da ]]></b:skin> , cole o seguinte código: #navbar-iframe {height:0px; visibility:hidden; display:none}
   Se você proceder corretamente o resultado será este: #navbar-iframe {height:0px; visibility:hidden; display:none} ]]></b:skin>
5. Salve o seu template e visualize o blog

Bom proveito!