Super Dicasss!!!

Colocando Emoticon nos comentários do Blogger

2008-07-14T12:57:00.000-07:00

Foram muitos os que me perguntaram se haveria um jeito de colocar smile nos comentários do Blogger. Como procurei... Ufa! Eu demoro mas eu acho! Encontrei um blog com esta dica super bacana! Seus comentários no Blogger vão ficar cheios de carinhas assim como os do Wordpress. Quer saber como?

Vá no layout de seu template e em editar HTML;

Expanda os widgets;

Aperte as teclas CTRL + F para abrir uma barrinha de procura;

Digite o seguinte código na barrinha: ]]></b:skin&gt

Logo abaixo deste código coloque o seguinte comando:

Salve o modelo. Está pronto! Fiz o teste em modelos de Templates feitos para Blogger e também em modelos Wordpress convertidos. Abaixo segue os códigos dos smiles disponíveis:

:) ou :-)
:D ou :-D
:$ ou :-$
:( ou :-(
:p ou :-p
;) ou ;-)
:k ou :-k
:@ ou :-@
:# ou :-#
:x ou :-x
:o ou :-o

Se quiserem deixar os códigos disponíveis para que os visitantes saibam desta opção é só deixar um espaço na sidebar para eles... Não encontrei um jeito no Blogger de avisar aos visitantes deste recurso. Beijos a todos! :D

Visitem o Blogging Secret de Louis Lim, foi daqui que tirei esta dica!

Recomendações: Se seu blog possui muitas imagens e widgets, eu não recomendo pois estes códigos carregam um pouquinho a página de abertura do blog ok? E quem optar por colocar o menu flutuante que ensinei não deve utilizar esta funcionalidade pois estes dois códigos juntos entram em conflito por um motivo que ainda não descobri. Optem por um ou outro. Beijos!

Dê nome às suas figuras

2008-06-25T16:22:00.000-07:00

Esta dica quem me deu foi a Luma. Um belo dia ela me disse que para os motores de busca identificarem minhas gravuras com mais facilidade eu poderia colocar os nominhos nelas. (Isto eu não sabia... Obrigada Luma!!!). Como esta dica me foi muito útil e realmente dá certo estou repassando... Como assim nomear as gravuras??? Veja o exemplo abaixo:

Vejamos o código desta figura:

<a href="http://www.superdicasss.blogspot.com" target="_blanck" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5180302777937933762" border="0" style="cursor: pointer; width: 115px; height: 43px;" alt=" " src="http://bp1.blogger.com/_H_MtISBxIEo/R-Qh7hv1tcI/AAAAAAAAAFg/kH-iw_9c6I0/s200/logo.jpg"/></a>

Como puderam reparar, existe um código na gravura que destaquei em vermelho. É exatamente entre estas aspas que você colocará o nome de sua gravura. Veja como ficará:

Aparentemente não muda em nada, sua gravura continuará igual mas se alguém procurar por super dicasss tanto em imagens quanto em busca por palavras, minha logomarca será identificada pelos buscadores com mais facilidade e a chance de alguém vir aqui me visitar aumenta. Você pode fazer isto com qualquer gravura inserida em seu blog: um coelho, uma maçã, seu logotipo, enfim, qualquer gravura. :)

Veja complementações deste tópico nos comentários. Os blog amigos deram suas Super Dicasss!!! Obrigada a todos!!! :D

Chat no Site ou Blog

2008-05-20T13:24:00.000-07:00

Você pode criar uma sala de Bate-papos dentro do seu site ou blog, para isso é só clicar na imagem ao lado e você logo verá uma caixinha de bate-papos na página inicial do site. Clique nesta caixinha onde se encontra escrito "Get Joombly" e logo você será encaminhado à escolher o tamanho de sua caixinha de diálogos. Escolha o tamanho e pegue seu código fonte para inserir no seu blog ou site. Desta forma, você terá em seu blog um chat que permitirá que seus visitantes troquem informações uns com os outros e com você também, caso você esteja online. Muito interessante! Se seu blog é muito visitado e seu Plugoo ou caixinha de comentários não estão mais dando conta, esta será uma excelente opção!

Menu Flutuante

2008-05-19T13:00:00.000-07:00

Encontrei este site muito bacana que ensina algo muito legal e que muitos não sabem. Como colocar uma box em sua sidebar de modo que ela role automaticamente? Pois os seus problemas acabaram! O site oferece os códigos necessários porém, está em inglês e não fornece exclarecimentos detalhados de formatação, como nem todo mundo vai gostar do layout deste menu, vou explicar como fazer para deixá-lo com o seu jeito e combinando com a aparência de seu blog:

1º Vá ao layout de seu blog/site e nas definições Html. Clique Ctrl+F e uma barrinha de busca aparecerá. Digite: <head> e abaixo dele insira o seguinte código:

Após colar este código abaixo da sessão <read> salve o novo modelo. Você verá que seu blog continuará a mesma coisa, o diferencial vem agora! O código abaixo você deve colar no local onde deseja inserir seu menu flutuante:

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">



<h4>Your scroller contents</h4>



</div>
</div>

Este segundo código você pode colocar em uma postagem, na sua sidebar, onde você quiser no blog! E como definir cor, altura, largura e velocidade?
Está vendo no código algumas cores destacadas? Pois então vamos lá:

Laranja - são respectivamente largura e altura e você pode trocar os valores 200 e 200 por qualquer outro de seu agrado. Você define como ficará a caixinha.
Vermelho - esta é a cor do fundo. O padrão é White (branco) porém, se você quiser uma outra cor é só escrevê-la no lugar: blue, black, green, você escolhe a cor (que deve ser escrita em inglês).
Azul Marinho - define a cor da borda de seu menu. O padrão é definido como laranja solido (solid orange) mas você também pode escolher a cor que desejar e substituir.
Verde - var marqueespeed=2 Este valor é responsável pela velocidade de rolagem, se quiser que seja mais rápida é só trocar o valor por outro (3,4,5,6...)

No segundo código que você irá colar em sua sidebar ou postagem a parte destacada em lilas será onde você incluirá o que deseja que fique dentro do menu. Você pode colocar qualquer coisa (os blogs favoritos, os prêmios, as últimas postagens, os links dos sites favoritos, as fotos do cachorro, enfim, qualquer coisa que você queira). Dica: eu aconselho que você abra duas páginas em seu blog: uma para alterar as configurações no html e outra do local onde o segundo código ficará. Desta forma quando você alterar algo nas configurações do Html e salvar é só atualizar a segunda página para ver como ficou.

ATENÇÃO: Se você precisar usar mais de uma caixinha, defina de um modo que fique legal para as duas no seu HTML, não tem como criar duas caixinhas de tamanho e cores diferentes para o mesmo blog. Segundo o site, este esquema não funciona para Netscape 7 e Ópera pois a rolagem empurra o resto da página para baixo. Eles resolveram isso da seguinte forma: ao invés da rolagem automática, em Netscape 7 e Ópera aparece uma barrinha de rolagem manual. Muito bom não é mesmo! Gênios! Se você estiver com dúvidas se o método funciona mesmo ou não veja no link abaixo o exemplo de menu flutuante que coloquei em meu outro blog: Jaqueline by Jaqueline:

Exemplo no Jaqueline by Jaqueline

E se você gostou pode também visitar o site original de onde tirei esta dica, eles possuem outras coisas interessantes para sites e blogs. Clique aqui

Sobre os Entities

2008-05-14T13:00:00.000-07:00

Até agora as dicas que tenho dado sobre códigos html não estavam requerendo que eu deixasse este código em minha página de modo que os leitores pudessem copiar e colar para as suas respectivas páginas pois eram comandos muito pequenos e fáceis de serem escritos. Ainda sigo a regra de que só aprende de verdade quem lê e copia o que leu. A assimilação é muito maior. Quando se copia e cola, não se aprende e, tiro isso por mim. Ora ou outra tenho que voltar em alguns blogs para rever códigos que copiei e colei pois não me recordo mais... Bom, agora é diferente, Estou preparando um artigo bem bacana e os códigos que utilizarei são enormes. Se eu não disponibilizasse isso de modo que se pudesse copiar e colar não adiantaria de nada publicar tal artigo. Procurei pela internet e nas páginas do Google sobre códigos entities mas antes de dizer o que achei vamos a algumas definições:

O que são códigos entities? São codificações especiais que modificam a leitura html convêncional para que, na hora da publicação, possamos visualizar o código na íntegra.

Para que preciso conhecer um código entitie? Na verdade não precisa porém, se você precisar utilizar linguagem html na sua postagem, verá que ela não aparecerá pois o Blogger converte tudo na hora da publicação.

Por que isto ocorre? O blogger é composto por códigos html então, se escrevemos em linguagem html ele entende que é para converter... Se porém, escrevemos com códigos entities o Blogger converte para o html que desejamos publicar aos leitores.

Encontrei muitas dicas de conversores e o próprio Baixaki possui uma infinidade de programas. Baixei alguns mas carregaram demais meu computador que já é cheio de informações e, visitando o Blog Beira Mar do Rogério Anjo, conheci algumas opções bem interssantes sobre códigos entities e resolvi divulgar um site muito bom recomendado por ele e que eu estou utilizando. É um conversor automático online. A página é super leve e abre com facilidade e o melhor: não precisa de download e nem cadastro! É só você colar o código que deseja converter em um retângulo clicar um botão e o código aparecerá prontinho no outro retângulo para ser utilizado. Para conferir o artigo do Rogério é só clicar aqui e para conferir o conversor online clique aqui.

Até a próxima!

Dicas rápidas de formatação

2008-05-13T19:14:00.000-07:00

Você já reparou que em vários blogs vemos palavras consertadas com um ~~rabisco~~ risco encima da mensagem porém sem apagá-la? Como fazer isso? O comando é bem simples. Para tachar a palavra rabisco eu fiz o seguinte: coloquei a palavras entre estes comandos <s> </s> . Assim: <s>rabisco</s> e o resultado depois da publicação aparecerá assim: ~~rabisco~~. Fácil não?

E como sublimar uma palavra?
O procedimento é o mesmo e você só trocará a letra s pela letra u. Assim: <u> palavra</u>

E como você faz para colocar esta barrinha de divisão? Simples...
Escreva<hr>. Desta forma:

FRASE
<hr>
FRASE
O resultado ficará assim:

FRASE

FRASE

Até a próxima dica! :)

Retirar número dos marcadores

2008-05-12T13:00:00.000-07:00

Os nossos marcadores servem para determinarmos sobre qual assunto estamos falando, por exemplo, se você olhar no final deste artigo verá escrito (Dicas, Html, Códigos). Se você clicar na lateral do meu blog em qualquer uma destas palavras verá este artigo lá e todos os demais que possuem o mesmo marcador. Quando publicamos artigos utilizando sempre os mesmos marcadores eles começam a aparecer com um número entre parenteses assim: Dicas (38).

Como fazer para retirar este número aí do lado?

Vá em seu Layout/Html/Expandir Widgets. Depois de expandir digite CTRL+F para aparecer uma barrinha de busca. Nesta barrinha digite o seguinte código: (<data:label.count>). Quando este código aparecer em verdinho no seu painel, delete-o e pronto! Salve as novas configurações e você verá que os números desaparecerão!

Enquete entre postagens

2008-05-01T10:52:00.000-07:00

Este artigo eu resolvi escrever depois que surgiu uma dúvida sobre como colocar enquetes em cada postagem publicada. Questionaram-me sobre isto e eu reparei que a enquete fornecida pelo blogger só é permitida dentro de nossa sidebar e que não nos é fornecido um código para que coloquemos dentro de nossas postagens. Fui mais além e copiei o código html lá em nosso Layout e o colei dentro de nossa área de postagem, também sem sucessos. Continuei pesquisando e encontrei este site: Enquetes.com.br. É um site muito legal e o cadastro é gratuito. Ele te permite entre outras coisas:

Criar gratuitamente quantas enquetes desejar

Publicar a enquete de forma integrada com seu site

Distribuir por email para seus usuários

Possibilita a integração com seu layout

Várias opções de controle de votos

O site te oferece cinco opções diferentes para adicionar sua enquete ao blog/site, apresentando cinco códigos diferentes que você copia e cola com muita facilidade:

1ª Opção - Janelas Pop-up - desta forma a enquete abrirá sempre que um novo visitante entrar em sua página;
2ª Opção - Formulário com a enquete em recursos Java;
3ª Opção - Formulário com a enquete em formato Html;
4ª Opção - Apenas um botão com o link para a enquete - esta opção ocupa menos espaço em seu blog/site. Se o visitante quiser participar da enquete ele clica no botão e é redirecionado para a sua enquete;
5ª Opção - envio de enquetes por e-mail: você pode enviar as enquetes diretamente para o endereço eletrônico de seus amigos.

Google Talk Chatback

2008-04-22T18:18:00.000-07:00

O Google Talk Chatback é uma novidade para os blogs e sites. Trata-se de um dispositivo html que possibilita que os visitantes de blogs batam um papo online com o administrador dos mesmos.

Como funciona?

Você entra no site, personaliza o seu Google Talk Chatback e copia o código fornecido. Cole em sua sidebar e pronto! Você tem um dispositivo de interação online que te permitirá bater um papo com os seus visitantes. A única coisa que você precisa ter é um e-mail do Gmail ou ter cadastro no Gtalk.

E o que é o Gtalk?

Para aqueles que não sabem o Gtalk é um mensageiro instantâneo como o MSN. Toda vez que você estiver online no seu Gtalk, aparecerá online no seu blog também! Se quiser fazer o teste antes de colocar em seu blog é só esperar eu estar online e bater um papo comigo. Eu adicionei o Gtalk em forma de balão pois ocupa um espaço menor mas você tem a opção de colocar a janelinha tipo a de MSN no seu blog ou site também. Você pode escolher o modelo que melhor se adeque ao seu espaço. Eu uso o serviço e recomendo!

Como adicionar um Link-me em seu blog

2008-04-03T16:03:00.000-07:00

Você quer criar um Banner com um link-me para que outros blogs te adicionem aos favoritos?

Então vou ensinar o passo-a-passo.
Quando criamos um blog logo vem em nossa mente: E a logomarca? Depois que criamos a logomarca, nada nos deixa mais envaidecidos do que ver o reconhecimento dos nossos visitantes que, além de nos prestigiarem com suas visitas; exibem em seus blogs aquela nossa logomarca que, para nós, não é uma logo somente e sim, fruto de reconhecimento pelo nosso trabalho. Vou utilizar algumas postagens minhas para facilitar as orientações. Siga os passos:

Primeiro Passo: Crie uma Logomarca e salve-a em seu computador. (Se você ainda não tem uma logomarca e não sabe como fazer para criar uma; clique aqui).

Segundo Passo: Vá em Postagem e criar nova postagem. Na sua Barra de edições, clique em inserir imagem e adicionar imagem do arquivo. Procure no computador a sua logomarca, defina os padrões e clique em "Fazer Upload" e "Concluído".

Terceiro passo: Sua imagem aparecerá na caixa de postagem. Clique na imagem e depois em inserir link. Digite a URL de seu blog. você pode diminuir e aumentar a sua imagem também, definindo o tamanho certo dela...

Quarto Passo: Clique em "Editar Html" e aparecerá uma codificação. Insira o target="_blanck" em sua codificação para que seu link abra em uma página diferente. (Se você não sabe inserir o target="_blanck"; clique aqui)

Quinto Passo: Depois do seu banner pronto só ficará faltando inserir a caixinha de texto com a codificação para que os seus visitantes copiem o código. (Para pegar a codificação da caixinha clique aqui) Mantenha a sua caixa de postagem em editar Html e logo abaixo de toda a sua codificação do banner, insira a codificação de sua caixinha de texto. No lugar da codificação da caixinha de texto em que está escrito SEU TEXTO AQUI, você copiará todo o código do seu banner e o colará onde indicado. Se você quiser que sua caixinha de texto e o seu banner fiquem centralizados, é só colocar no início de cada código a seguinte escrição: center (entre os sinais <>)

Sexto Passo: Clique em escrever para ver o resultado. Ficou do jeito que você queria? Então vá em visualizar (dentro ainda de sua criação de postagem). Clique no seu Banner e veja se ele está abrindo em outra página. Se estiver tudo correto, clique em Hide Preview para voltar para sua criação e em Editar html novamente. Copie todo o código.

Sétimo Passo: Abra uma nova página do seu blog e vá para o Layout. Clique em adicionar um novo elemento de página e escolha a opção adicionar Html/Java. Cole todo o código na caixinha e crie um título bem original, salve. Visualize seu blog e veja se seu link está no lugar certo determinado por você.

Oitavo Passo: Testando o código. Copie todo o código de sua caixinha de texto e volte para a postagem de sua outra página aberta. Dê uns espaços (enter) e cole seu código lá. Clique em visualizar e veja se o banner ficou ok. Clique no Banner e veja se ele está abrindo em outra página. Tudo ok?

Nono Passo: Salve as alterações de Layout. Acabou! Você já possui um link-me! Feche a postagem e nem precisa salvá-la. Exclua depois o rascunho e espere que seu talento seja reconhecido. Busque parceiros que terão prazer em linka-lo se seu blog tiver conteúdo e boa sorte!

Adicionando Feeds aos links

2008-04-02T16:00:00.000-07:00

Olha, essa eu não poderia deixar de colocar aqui para você. Passeando pela internet, caí sem querer em um Blog totalmente em inglês com essa dica super bacana! Adicione feeds aos links, dessa forma o visitante pode adicioná-lo aos favoritos toda vez que clicar sobre eles. Muito bom!

Como Fazer?

Clique Ctrl+F para abrir uma barra de busca que vai te facilitar
Vá no Layout html do seu template e clique para expandir widgets
Procure o seguinte código:

Agora, insira o seguinte código logo depois:

No lugar destacado em azul coloque o número ID do seu blog.

Como você descobre seu número ID?

Clique em configurações do seu blog ou até mesmo na hora que você vai escrever um artigo, repare um número que aparece no final do endereço que fica na barra do seu navegador. Vai aparecer mais ou menos assim:
http://www.blogger.com/post-create.g?blogID=xxxxxxxxxxx.

É só copiar e colar este número no lugar do ID (somente o número). Visualize para ver se está tudo ok e salve o modelo. Pronto! Feeds nos seus links!

Esta dica eu peguei no Blogger Templates. Veja artigo original.

Abrir link em outra janela

2008-03-25T20:23:00.001-07:00

Umas das maiores dificuldades que eu tive quando iniciei meu blog foi aprender como criar links que abrissem em outra página. Todos os links que eu criava redirecionavam direto à outra página e o meu visitante abandonava o texto no meio da leitura. Procurei na internet; joguei na barra de buscas do Google e não encontrei um blog ou site sequer que me ensinasse. Encontrei alguns blogs que ensinam a colocar um código no html do template mas, comigo não deu certo! O meu código dava erro... Investiguei a fundo e um amigo meu é quem explicou. (Ele é dessas pessoas que nunca estudou informática mas é viciado e sabe de tudo!). São Roberto! E como acredito que esta deve ser a dúvida de muitos que estão iniciando e que ainda não sabem como fazer o referido link; resolvi criar um artigo somente para explicar.

Como faço para meu link abrir em outra página?

Primeiro: defina a palavra a ser linkada. Vou usar como exemplo o nome de meu blog: Super DicaSSS
Segundo: destaque a palavra e clique em inserir link
Terceiro: clique em editar html

Seu link aparecerá deste jeito:

Agora você vai escrever depois da aspa que fecha o link e antes do nome a ser linkado o seguinte:

(espaço)target="_blanck"

O link ficará assim:

Atenção! Depois de .com" você dá um espaço para depois inserir o código!

Está pronto o seu link!
Clique e veja o exemplo concluído: Super DicaSSS

Como faço para abrir minha imagem em outra janela?

Quando você for inserir uma imagem que pode ser de um desenho linkado ou até mesmo os banners dos seus blogs favoritos você deve copiar o endereço da imagem e clicar em inserir imagem na sua caixa de postagem. Cole o endereço na URL (se a figura estiver em seu computador é só clicar em arquivo e procurar). Defina como você quer sua imagem e clique em inserir e concluído.

Próximo passo: Clique em inserir link e digite o endereço para o qual você que que a imagem direcione o leitor.

Depois disso, clique em Editar Html
Sua imagem aparecerá semelhante à esta:

Procure em sua imagem este código:
Agora dê um espaço depois da aspa e insira a codificação target="_blanck"
Ficará assim: " target="_blanck">... Veja no contexto como ficará:

Agora é só clicar em Escrever novamente e terminar o seu artigo. Pronto! A sua imagem abrirá em outra página, conservando a sua. Veja exemplo concluído:

Obs: Se você quiser inserir esta imagem não em um artigo mais sim na coluna lateral do template; é só copiar este código gerado; ir em Layout, Adicionar elemento de página, escolher html ou Java e colar o código na janela. Pronto também! Você terá uma imagem que abre em outra página na coluna do seu template.

Caixa de Texto

2008-03-15T18:33:00.000-07:00

Olha! Custei a encontrar uma caixinha de texto diferente das convencionais que são brancas. Quer saber como coloquei esta caixinha de texto aí do lado, azulzinha, combinando com o Template??

Vai lá a Dica!

Digite a codificação seguinte na sua postagem em html ou então em adicionar elementos html ou java:

Esta codificação vai deixar sua caixinha deste jeito:

Observe bem que uma parte do código está assim - color: #74C7E2
Este código determina a cor da fonte do que aparecerá escrito dentro da caixinha. Neste caso, a cor é azul. Quer sua caixinha com a fonte rosa? Troque para- color: #FF00FF e pronto! Veja exemplo:

E o fundo? quer mudar a cor dele também?? Então veja - existe nesta codificação também uma parte escrita assim: style="background:#DAF0F8;
O código em vermelho, determina a cor do fundo da caixinha de texto. Quer uma caixinha de texto preta escrita em verde fluorescente? Então troque o código do background para #000000 e o código de color para #33FF00 e pronto! Veja como fica:

Fácil né? Então agora é só escolher a cor e personalizar a sua própria caixinha. Onde está escrito "seu texto aqui" você substituirá por aquilo que você deseja que fique escrito dentro da caixa. Como?? Não sabe o código das cores?? Nem eu! Esta caixinha eu achei no site: B-log.net e lá eles também tem os códigos das caixinhas convencionais e a codificação de todas as cores. (Veja mais cores aqui).

É um site muito bacana cheio de assessórios para Blogs: relógios, barra de mensagens, efeitos em Neon, entre outros... Para ver mais visite: B-log. net.