Super Dicasss!!!

Inserir impressora e gerador PDF em seu Blogger, Wordpress ou Website

2010-07-18T15:13:00.000-07:00

Printfriendly é uma opção simples e fácil para quem não entende muito de códigos e deseja ter uma impressora em seu blog para que os visitantes possam ter a facilidade de imprimir os artigos que os interessarem.

Printfriendly ainda vem com outras opções: gera arquivo PDF do artigo escolhido e vem com a opção de envio por e-mail. Com três passos simpes e descomplicados, você pode ter o ícone da impressora em seu blog sem pedir a ajuda de ninguém, você mesmo pode fazer com a garantia de que vai dar certo!

Os botões possuem um design super bonito e que se enquadram perfeitamente aos blogs. Para adicionar o ícone é só você ir no canto direito da página inicial do site e clicar em "Website Button". Veja imagem:

Os três passos para definir o código do seu botão são:

Selecionar se ele será para Website, Wordpress ou Blogger;
Escolher o design de seu ícone;
Gerar e copiar o código a ser inserido no template.

Veja a Imagem com os três passos acima descritos:

Além de poder colocar uma impressora em seu blog, você também pode imprimir artigos de blogs que não possuam o ícone. É só copiar o link que deseja transformar em pdf, enviar por e-mail ou imprimir e visitar a página inicial do Printfriendly. Lá existe uma caixa onde você insere o link e faz a sua solicitação. Veja na imagem abaixo:

Adicionando o código ao Blogger:

Depois que você procede os três passos, é só ir no HTML de seu template e clicar em "Expandir modelos de widgets". Procure o seguinte código: <div class='post-footer'> e cole o código fornecido pelo site logo depois dele. Salve o modelo e veja o resultado. Se quiser fazer um teste antes de inserir em seu blog, é só ver o resultado aqui em meu blog. Estou utilizando o ícone logo abaixo de minhas postagens.

Desvantagens da utilização do botão no Blogger:

Se a maioria das postagens de seu blog forem curtas, não compensa usar o código fornecido pelo site. Estranhamente, o código apresenta erro e não consegue captar poucas palavras e frases. Funciona perfeitamente somente quando os artigos são longos, como este aqui;
Na geração de arquivo PDF, ele não reconhece acentos e cedilha. Por ser um site estrangeiro, ele ignora nossas regras de acentuação. Na geração do arquivo PDF aparecem interrogações nos lugares em que deveriam aparecer as palavras acentuadas e as cedilhas;
Imprime imagens mas se a postagem escolhida possuir um video, ele será ignorado e não aparecerá nem mesmo a moldura do referido.

Considerações gerais:

Apesar das desvantagens, eu aconselho. O código é de simples inserção no blog, apresenta um design bacana, é gratuito e não pesa o carregamento das páginas!

Boa blogagem a todos!! :D

Menu Alfabético na área de publicação

2010-02-07T10:50:00.000-08:00

Este artigo vai para um colega que infelizmente não se identificou. Ele deixou um recado em minha área "Tricotando" perguntando como faria para inserir um menu de A a Z acima da área de publicação de seu blog. Não é tarefa simples, mas vou dar os códigos iniciais e explicar onde modificá-los para que você deixe seu menu com a aparência de seu blog. O resultado final deverá ficar semelhante ao da imagem abaixo:

Para a customização de meu menu, eu utilizei como base o Template Mínima e uma área de publicação (main-wrapper) de 410px. Óbvio que se sua área for menor ou maior a isso, vc terá que fazer algumas modificações que serão explicadas adiante. Vamos primeiramente ao código.

Procure em seu template por outer-wrapper e acima dele insira o código abaixo:

/*Alfamenu
-------------------------------- */

#alfamenu{
height:20px;
line-height:2.6em;
margin:0px 0px 5px;
margin-left: -40px;

}

#alfamenu li{
float: left;
white-space:nowrap;
list-style-type:none;
background: #EEE9E9;
border: 1px solid #CCCCCC;
}

#alfamenu li a{
display:block;
padding: 3px 3px 4px 3px;
font-size:0.8em;
font-weight:normal;
font: normal bold 90% Arial, sans-serif;
text-transform:uppercase;
text-decoration:none;
color: #1C1C1C;
}

* html #alfamenu a {width:1%;}
#alfamenu .selected, #alfamenu a:hover {
color: #FF6347;
text-decoration:none;
}

Salve o Modelo. Agora, procure pelo código: <div id='main-wrapper'>

Imediatamente acima dele, insira o código a seguir:

<div id='alfamenu'>
<ul>
<li><a href='link 1'>A</a></li>
<li><a href='link 2'>B</a></li>
<li><a href='link 3'>C</a></li>
<li><a href='link 4'>D</a></li>
<li><a href='link 5'>E</a></li>
<li><a href='link 6'>F</a></li>
<li><a href='link 7'>G</a></li>
<li><a href='link 8'>H</a></li>
<li><a href='link 9'>I</a></li>
<li><a href='link 10'>J</a></li>
<li><a href='link 11'>K</a></li>
<li><a href='link 12'>L</a></li>
<li><a href='link 13'>M</a></li>
<li><a href='link 14'>N</a></li>
<li><a href='link 15'>O</a></li>
<li><a href='link 16'>P</a></li>
<li><a href='link 17'>Q</a></li>
<li><a href='link 18'>R</a></li>
<li><a href='link 19'>S</a></li>
<li><a href='link 20'>T</a></li>
<li><a href='link 21'>U</a></li>
<li><a href='link 22'>V</a></li>
<li><a href='link 23'>W</a></li>
<li><a href='link 24'>X</a></li>
<li><a href='link 25'>Y</a></li>
<li><a href='link 26'>Z</a></li>

</ul>
</div>

Salve o Modelo e visualize. Ainda não está pronto, o que está em verde é a letra correspondente a consulta de A a Z e é exatamente na parte vermelha, que você irá inserir o link correspondente a seu Marcador.

Como criar um Marcador?

Quando você escreve uma postagem, na caixinha do blogger, bem embaixo, aparece escrito "Marcadores para esta postagem". No retangulo em branco você escreverá Letra A para todas as postagens que começarem com a letra A; Letra B para todas as postagens que começarem com a letra B e assim sucessivamente, formando os seus Marcadores. Para visualizar os Marcadores é só você clicar no Layout de seu blog em inserir gadget e selecionar a opção Marcadores.

Visite seu blog e coloque a seta do Mouse sobre a Primeira letra do Marcador: "Letra A", selecione com o botão direito do mouse a opção "Copiar link" ou "Copiar Atalho", volte ao HTML de seu blog e cole o link sobre o link 1 que designa a letra A do Menu Alfabético. Assim:

Antes:

Depois:

Faça este mesmo procedimento até chegar à Letra Z e salve o modelo. É trabalhoso, eu sei , mas você só terá que fazer isso uma única vez. Depois de concluído toda vez que um visitante clicar na letra A será direcionado para as postagens que comecem com esta letra e assim por diante. Se você não tiver necessidade de manter os Marcadores, exclua-o do Layout de seu blog. A label inserida em cada letra continuará sendo válida. Se você precisar manter os marcadores, use a opção clound pois a aparência estética é melhor.

Depois de tudo pronto, vamos ajeitar a aparência de seu Menu Alfabético. Vejamos novamente os códigos:

/*Alfamenu
-------------------------------- */

#alfamenu{
height:20px;
line-height:2.6em;
margin:0px 0px 5px;
margin-left: -40px;

}

Note o 5px, esta é a distância que afasta o menu da margem de postagem (main-wrapper). Se você quiser que a distância seja maior, troque o número 5 por 8, 10 ao seu gosto.

Note abaixo, destacado em verde o -40px. Este valor eu utilizei para que o Menu ficasse na direção da área de postagem. Se o seu menu ainda ficou recuado, utilize um valor maior -45px, -50px, até você conseguir enquadrá-lo. Se o Menu passou da área de postagem, diminua o valor de recuo para -35px, -30px e assim por diante.

#alfamenu li{
float: left;
white-space:nowrap;
list-style-type:none;
background: #EEE9E9;
border: 1px solid #CCCCCC;
}

O background é a cor de fundo do seu Menu Alfabético. Se quiser mudar a cor é só usar uma tabela de cores em HTML e alterar para que fique com as cores de seu blog.

O Border é a cor da borda que divide o Menu. Também pode ter sua cor modificada. Você pode ver outras cores aqui.

#alfamenu li a{
display:block;
padding: 3px 3px 4px 3px;
font-size:0.8em;
font-weight:normal;
font: normal bold 90% Arial, sans-serif;
text-transform:uppercase;
text-decoration:none;
color: #1C1C1C;
}

Padding interfere no tamanho de seu menu, se você achar que seu menu ficou grande ou pequeno de mais é só ir alterando os valores. Mantenha os 4px pois este determina a altura de seu menu.

A Fonte de 90% também interfere na largura de seu Menu, você pode aumentá-lo ou diminuí-lo apenas modificando a sua porcentagem para menos ou para mais.

Color: define a cor da letra.

* html #alfamenu a {width:1%;}
#alfamenu .selected, #alfamenu a:hover {
color: #FF6347;
text-decoration:none;
}

Color da hover, define a cor da letra quando você passa a seta do mouse sobre ela.

Dica importante: antes de fazer qualquer modificação em seu template, baixe o modelo completo e salve-o em seu computador.

Veja um exemplo do Menu Alfabético pronto aqui.

Boa blogagem a todos!!! :D

Caixa de texto com seleção automática para blogs

2010-01-24T11:29:00.000-08:00

Olha eu de novo falando sobre caixinhas de textos. A pergunta de um blog amigo desta vez foi: Como você faz para que todo o texto da caixinha seja selecionado automaticamente? Bom, observei que nunca havia mencionado isso mas, devemos inserir um código antes do texto que queremos que copiem. Então vejamos o código simples de uma caixinha de texto:

<textarea rows=\"2\" cols=\"20\"> SEU TEXTO AQUI </textarea>

Para que o texto passe a ter destaque automático, devemos inserir antes do >SEU TEXTO AQUI, o seguinte código:

onfocus=\"this.select()\" onmouseover=\"this.focus()\"

A caixinha de texto então ficaria assim:

<textarea rows=\"2\" cols=\"20\" onfocus=\"this.select()\" onmouseover=\"this.focus()\" > SEU TEXTO AQUI</textarea>

Veja o exemplo abaixo, ponha a seta sobre o texto e veja que ele seleciona automaticamente:

Boa blogagem a todos!!! :)

Customize sua própria caixa de texto

2009-09-20T13:51:00.000-07:00

Quando comecei a blogar, uma das coisas que achei mais difícil foi achar uma caixinha de texto atraente, que não fosse igual a todas as caixas de texto que eu via em todos os blogs. É claro que eu ainda não entendia nada de html e por tanto, não conseguiria customizar uma caixinha simples. Cheguei a indicar o site que eu tinha encontrado com caixinhas mais bonitas. Agora, que sei ler os códigos (ou pelo menos alguns deles), vou explicar como vocês devem fazer para customizarem suas próprias caixinhas, deixando-as do jeito que vocês quiserem!

Primeiro vocês devem entender o <textarea>. Este é o html que permite inserir textos e códigos html sem que eles sejam modificados pela codificação do seu Blogger. Desta forma, tudo o que vocês escreverem entre <textarea> ficará exatamente do jeito que vocês colocarem. Vejamos a codificação simples de uma caixa de texto:

<textarea rows="2" cols="20"> SEU TEXTO AQUI </textarea>

A caixa de texto ficará assim:

Muito fácil não é mesmo? Agora vamos continuar analisando o código que eu passei acima. Notem que rows, determina a altura de sua caixinha e cols, determina a largura. Desta forma, vocês podem deixar a sua caixinha com a largura e a altura que preferirem e se o texto contido dentro dela ultrapassar o espaço, aparecerão barras de rolagem para que seus leitores possam copiar tudo o que está lá dentro sem problemas. Até agora nada de mais, então vamos aprender a dar cores para o fundo, a borda e o texto.

Para isso vocês devem aplicar a variável "style". Tudo o que vier após o style dará forma à sua caixinha. Vejamos algumas definições:

Cor do fundo: você utilizará o background-color
Cor da linha: você utilizará o border
Cor do texto: você utilizará color
Engrossar a borda: utilize a pontuação em pixel antes de definir a cor no border

Vejam o código de uma caixinha de texto de fundo azul, borda vermelha e texto azul escuro:

<textarea rows="2" cols="20" style="border: 5px solid rgb(255, 0, 0); background-color: rgb(248, 248, 255); color: rgb(0, 0, 128);"> SEU TEXTO AQUI </textarea>

Notem que após o style, devemos colocar um sinal de igual e abrir aspas. As definições que vierem dentro do "style" ficarão separadas por ponto e vírgula. A borda está definida em 5px solid, sendo que o 5 vocês podem trocar por outro número qualquer e, as cores estão em Java Script e são representadas por rgb(definição da cor) mas, se vocês quiserem colocar as cores também em html não há problemas. O código ficaria assim:

<textarea rows="2" cols="20" style="border: 5px solid #FF0000; background-color: #F8F8FF; color:#000080;"> SEU TEXTO AQUI </textarea>

O resultado continuará sendo o mesmo. Para verem as cores que podem ser aplicadas, visitem esta Tabela de Cores que considero bem completa. Agora, uma prova final para que não tenham dúvidas com relação a barra de rolagem:

Prontinho! Este é o código banner do Super DicaSSS, vejam que apareceu a barra de rolagem. Vamos customizar? Agora vocês podem ter sua caixinha de texto nas cores e tamanhos que preferirem.

Outro gerador de FavIcon - Dica Rápida!

2009-09-08T20:59:00.000-07:00

Eu já dei dicas e mais dicas sobre geradores de FavIcons que facitam a vida de muita gente! Para quem ainda não sabe, FavIcon é um ícone de 16x16 px que você coloca aí ao lado da barra de endereços de seu navegador. Toda vez que você visita o Super DicaSSS, visualizará um SD aí do lado. Este gerador é de um site muito bacana e já divulgado aqui antes, quando dei o código de Menu Flutuante, lembram? Pois falo novamente do DynamicDrive. Com o gerador deste site, você pode criar um FavIcon para seu blog em poucos minutos, escolhendo uma imagem já armazenada em seu computador. Se quiser esperimentar, é só clicar no link abaixo:

Formulário de Contatos Google Docs

2009-08-04T08:48:00.000-07:00

Uma coisa que achei interessante colocar aqui no Super DicaSSS foi um formulário de contatos. Enquanto customizava este template comecei a pesquisar um formulário que me desse a opção de receber as mensagens em outro lugar separado, onde eu pudesse ter todos os contatos arquivados e não misturados aos meu e-mails pessoais. Pesquisando, achei esta dica muito interessante: um formulário de contatos do Google Docs completamente compatível com o Blogger e o mais legal - todas as mensagens são arquivadas em uma planilha dentro de nossa própria conta Google Docs, completamente isoladas do nosso e-mail pessoal. É um jeito prático de se ter um formulário de qualidade e ainda ter todos os contatos recebidos, arrumados em um só lugar. Quem quiser dar uma olhada no resultado, consulte o meu blog na área de Contatos. Eu encontrei esta dica no Quero Criar um Blog e além da Dica, excelente por sinal, o artigo ensina o passo-a-passo de criação do formulário. Super prático e rápido, eu recomendo!

Comentários e Artigos Recentes no Blogger

2009-01-31T12:20:00.001-08:00

Encontrei estes códigos no Jackbook.com e se puderem observar, eu os inseri aqui em meu blog, nas colunas à sua direita. São muito fáceis e práticos e tudo o que você precisará fazer é copiar e colar em uma caixinha de HTML/Javascript que você insere utilizando o "inserir gadgets" em seu Layout.

Comentários recentes:

Para deixar em destaque aqueles que comentaram recentemente em seu blog, copie e cole o código abaixo na sua caixinha:

<script src="http://files.lifewg.googlepages.com/blogger-widget.js"></script>

<script>

var numposts = 10;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

</script>

<h2>COMENTÁRIOS RECENTES</h2>

<script src="http://NOME DE SEU BLOG.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script>

Observe as partes destacadas em vermelho. Em COMENTÁRIOS RECENTES, você pode escrever o que der vontade e, onde está escrito NOME DE SEU BLOG você substituirá, obviamente, pelo nome de seu blog, rsrsrsrs. Só isso! Salve e visualize o resultado.

Artigos Recentes:

Este é muito mais difícil! Tá vendo o código acima? Este mesmo de Comentários recentes! Copie e cole igualzinho e, onde está escrito destacado em verde "comments", você deve substituir por "posts". A parte final do código ficará assim:

<h2>COMENTÁRIOS RECENTES</h2>

<script src="http://NOME DE SEU BLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Só isso! Substitua novamente "COMENTÁRIOS RECENTES" por "Artigos Recentes" ou qualquer outra coisa que sua imaginação lhe permitir e não esqueça de inserir o nome de seu blog!!!

Entendendo um pouco mais do código:

var numposts = 10 ( Indica o número de comentários e artigos que serão exibidos. Você pode aumentar ou diminuir este número a vontade, a seu critério);

var showpostdate = false ( Se você quiser que a data da publicação apareça é só trocar o "false" por "true");

var showpostsummary = false; (Colocando "true" você terá não só o título do assunto mas, parte do artigo ou da conversa);

var numchars = 100; (Se acima, você optou por inserir o título e parte do artigo e/ou conversa, este número significa a quantidade de caracteres que aparecerá. Você também pode trocar este "100" por qualquer outro número).

Veja artigo original em: Jackbook.com

Letras Manuscritas no Orkut!

2008-08-07T17:01:00.000-07:00

Vocês já repararam que o Orkut está sempre cheio de novidades?! Desde que eu criei conta até hoje, o Orkut melhorou enormemente. Antes só podíamos colocar 12 fotos e agora o limite subiu para 1000, podemos ouvir músicas, compartilhar clipes, jogar com os amigos, enviar gifs e tantas outras coisas que antes não eram possíveis. Agora a moda é enviar mensagens manuscritas! Ficam tão bonitinhas, não acham? E como fazer isto? Muitos entram em desespero pois não têm a mínima idéia de como os amigos fazem isto. Calma! Calma! Não há mistério.

O Orkut se habilitou para receber diversos tipos de fonte e não somente a manuscrita; para isto, você deve escrever antes de sua mensagem o seguinte código: <Font face="NOME DA FONTE">

Esta fonte manuscrita que todos estão utilizando é a Lucida Handwriting, logo, se você quiser fazer um teste, entre em sua página do Orkut e escreva o seguinte:

<Font face="Lucida Handwriting"> Oi tudo bem?

Veja como ficará. Está manuscrita? Então você já pode começar a fazer parte da nova moda do Orkut; mas não é só isto, você pode inovar! Escreva o nome de outras fontes no lugar da Lúcida. Não sabe como?

Uma Dica: Abra seu Word e veja os tipos de fontes que existem lá. Escolha uma que te agrade e aplique no Orkut :D

Outra Dica: Se você quiser modificar o tamanho da fonte e colocar a letra em cores diferentes do preto, você deve seguir este procedimento:

Escolha o tamanho da fonte: <h1>; <h2>; <h3>; <h4>; <h5> ou <h6>.
Escolha a fonte que você quer utilizar: <Font face="NOME DA FONTE">
Agora escolha a cor: [blue]; [navy]; [green]; [violet] ...
Escreva a sua mensagem: Oi, tudo bem?
Feche o código da seguinte forma: </1>; </2>; </3>; </4>; </5> ou </6>

Não utilizem o "h" do início no código de fechamento ok? Ficará assim:

<h1><Font face="Lucida Handwriting">[blue]Oi, tudo bem? </1>

E então? Vamos entrar no novo modismo? Beijos e até a próxima!

Google Tradutor para Blogs

2008-08-06T08:39:00.000-07:00

Você quer deixar seu blog mais atraente para os seus visitantes internacionais? A melhor forma, além de possuir conteúdo, é possuir um tradutor eficiente com este intuito. O Google disponibilizou finalmente em seu tradutor, outros idiomas diferentes do inglês que já tínhamos disponível. Com o tradutor Google em seu blog seu visitante poderá fazer traduções em 24 diferentes idiomas. Para isto basta copiar e colar o código disponibilizado, na Sidebar de seu blog. Veja como fica o tradutor:

Pronto! Tudo muito rápido e fácil e você já poderá fazer os testes e ver que realmente funciona e que a tradução é muito boa! É da Google, nem preciso dizer mais nada. Pegue seu código clicando aqui

Ps: Em alguns blogs com códigos modificados o Google tradutor pode não funcionar, mas o tradutor funciona! Se quiser fazer um segundo teste é só visitar o meu outro blog (Jaqueline by Jaqueline). Você pode optar também pela segunda opção. Um tradutor igual a este meu e que está disponível no Dicas Blogger.

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!

Deezer - Rádio no Blog

2008-04-21T19:58:00.000-07:00

Você quer fazer uma seleção de músicas bacanas e colocar no seu blog? Visite o Deezer e crie sua rádio. O Deezer é um site bem legal que permite que você além de ver e ouvir os lançamentos musicais no próprio site, puxe uma box para o seu blog. Você anexa uma caixinha no seu blog e dá ao visitante a opção de ouvir ou não a música. Todo aquele que entrar para te visitar terá a opção de clicar no play pois o carregamento de músicas não é automático. Não carrega a página e a inscrição no site é gratuita. Gostou? Então vá correndo criar a sua rádio! Eu recomendo! E para quem gosta de rock o site tem uma ótima seleção de músicas! Até a próxima!

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:

<a href="http://www.superdicasss.blogspot.com">Super DicaSSS</a>

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

(espaço)target="_blank"

O link ficará assim:

<a href="http://www.superdicasss.blogspot.com" target="_blank">Super DicaSSS</a>

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:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e){}" href="http://www.superdicasss.blogspot.com"><img style="margin:0px auto 10px; display: block; text-align: center; cursor:pointer;" src="http://bp1.blogger.com/_H_MtlSBxIEo/R-nDkRv1tel/AAAAAAAAAFw/C0hgwH42FcU/s200/logo.jpg" alt="Super DicaSSS" title="Super DicaSSS" id="BLOGGER_PHOTO_ID_1234567891234567891" border="0"/></a>

Procure em sua imagem este código: "><img

Agora dê um espaço depois da aspa e insira a codificação target="_blank"
Ficará assim: " target="_blank">... Veja no contexto como ficará:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e){}" href="http://www.superdicasss.blogspot.com" target="_blank"><img style="margin:0px auto 10px; display: block; text-align: center; cursor:pointer;" src="http://bp1.blogger.com/_H_MtlSBxIEo/R-nDkRv1tel/AAAAAAAAAFw/C0hgwH42FcU/s200/logo.jpg" alt="Super DicaSSS" title="Super DicaSSS" id="BLOGGER_PHOTO_ID_1234567891234567891" border="0"/></a>

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.