Receba atualizações por email

Como fazer popup

2013-12-07T19:31:00.001-08:00

Colocar uma janela popup no blog pode ser o céu ou o inferno. Tenha muito cuidado em usar pois se você exagerar na quantidade ficará chato e seus visitantes não voltarão ao blog.

Mas se usado de forma inteligente, como por exemplo, formulário de contato, assinar seus feeds, ou alguma outra tarefa que seja atrativa, você poderá prender a atenção desses visitantes por mais tempo no blog.

Então vamos ver como isso funciona:

Primeiro você precisa estipular onde colocar esse código (gadget, postagem);

Depois basta copiar o código abaixo e colar no local, alterando as partes marcadas.

<a href="URL_PAGINA_DA_POPUP" target="popupwindow" onclick='window.open ("URL_DA_PAGINA_POPUP", "popupwindow", "scrollbars=yes, width=550, height=520"); return true'>
Texto
</a>

Url_pagina_da_popup = Link que vai ser mostrado na janela;

Width = Altura da janela;

Height = Largura da janela;

Texto = O que vai ser mostrado para clicar ( uma palavra ou imagem );

Espero ter ajudado.

Sucesso à todos!

Abrir 2 links com 1 click

2013-12-07T18:51:00.000-08:00

Para que isso aconteça, você terá que entrar no código html do blog e procurar por
</head>

Logo acima coloque este código:
--------------------------------------------

<script language="JavaScript">
function linksduplosh(linkduplo1,linkduplo2) {
window.open(linkduplo1);
window.open(linkduplo2);
}
</script>

-------------------------------------------

Clique em "Salvar modelo".
Pronto. Seu blog já está configurado para receber links com duplo redirecionamento.
Agora você poderá, sempre que desejar colocar o link para abrir duas páginas utilizando o comando a seguir:

<a href="javascript:void(0)" onclick="linksduplosh('LINK DA ABA 1','LINK DA ABA 2')">
Clique aqui para abrir as abas</a>

Nas áreas em vermelho e azul, você coloca os endereços das páginas que deseja que sejam abertas. Onde está - Clique aqui para abrir as abas - você pode substituir por qualquer palavra.
Caso queira, você poderá colocar uma imagem como link. Neste caso o código ficaria assim:

<a href="javascript:void(0)" onclick="linksduplosh('LINK DA ABA 1','LINK DA ABA 2')">
<img src="ENDEREÇO DA IMAGEM"></a>

Sempre lembrando que este código deve ser colocado na área da postagem, no modo "HTML".

Sucesso a todos!

Colocar álbum de fotos no blog

2013-12-07T18:07:00.000-08:00

Tráta-se de um código HTML muito simples que você poderá configurar com muita facilidade dentro de seus artigos. Para iniciar este album, você deve separar as fotos que iram compor o album.
Em seguida você deverá copiar o código abaixo e colar diretamente em seu editor HTML de postagem.

<iframe frameborder="0" marginheight="0" marginwidth="0" height="300" src="IMAGEM DA CAPA" id="galeria" scrolling="no" width="400" name="galeria"></iframe><br/>
<a href="IMAGEM 1" target="galeria">Lago</a>
<a href="IMAGEM 2" target="galeria">Praia</a>

Veja que o tamanho das imagens deve ser de 400 x 300.
Veja também que existe uma imagem que será a imagem da capa, isto é, a imagem que aparecerá logo no início do album.
Logo em seguida você irá colocar os endereços das outras imagens e seus nomes correspondentes como indicado nas áreas em vermelho.
Para colocar outras imagens, basta repetir a parte final do código com outras imagens e seus respectivos nomes.
Agora é só publicar e curtir!

Colocar um Sitemap para blog

2013-12-07T17:58:00.001-08:00

O que é e para que serve um Sitemap?
Sitemap é um arquivo XML com as últimas atualizações do site, freqüência da alterações, relevância e etc. Este arquivo serve basicamente para otimização do site nos motores de busca.
Agora que você sabe a importância deste arquivo, envie o seu para o google acessando a Central Webmaster Google, cadastre seu blog e logo depois faça uma verificação inserindo uma meta tag oferecida pelo serviço.
Depois de confirmar sua propriedade basta ir até o guia “sitemap” no menu lateral e logo depois em “adicionar um sitemap”. Na próxima página escolha a opção “Adicionar Sitemap geral da web”.
No campo onde pede a URL coloque “atom.xml?redirect=false&start-index=1&max-results=200? e clique em “Enviar”.
Pronto!, após algum tempo você já poderá ver as estatísticas e caso ocorra algum erro tente inserir no campo da URL simplesmente “atom.xml”.

Colocar banner entre as postagens do blog

2013-12-07T17:56:00.000-08:00

Para colocá-los basta irmos em Design> Editar HTML, marcar a caixinha expandir modelos de widget e procurar pela linha:

<b:include data='post' name='post'/>

E logo abaixo cole o seguinte:

<center>
<div style='margin-top: 20px; margin-left: 40px;'>
--- SEU TEXTO AQUI ---
<a href="URL de destino" target="_blank">
<img src='URL da imagem'/>
</a>
</div>
</center>

Basta colocar a URL do link e da imagem nos lugares indicados;
Eu adicionei uma "div" para centralizar a imagem mas isso depende do tamanho da sua imagem. Ajuste como necessário
Você pode adicionar um texto simples acima da imagem. Para dar estilo ao texto:
<b>TEXTO</b> --- negrito
<i>TEXTO</i> --- itálico

Se preferir apenas uma linha, o código será esse:

<hr style="align:center; background:#FFFF00; border:0px; height:5px; width:60%;" />

Em background, coloque a cor de sua preferência, em height, a altura da linha e em width a largura em porcentagem.

Veja um exemplo entre as postagens aqui no blog.

Sucesso!

Ocultar sidebar das paginas do blogger

2013-03-12T21:47:00.002-07:00

Vamos dizer que você tem um blog sobre marketing e publicidade e, em algumas páginas, você não quer que apareça a barra lateral e outros elementos além da matéria principal para não desviar a atenção do leitor. Como resolver isso?

Bom, para começar, precisamos definir quais elementos aparecerão e quais não aparecerão na sua página.

Vamos ao código:

Para ocultar o elemento da página estática, use o código abaixo:

<b:if cond='data:blog.pageType != "static_page"'>
AQUI DEVERÁ FICAR OCÓDIGO DO QUE VC QUER OCULTAR
</b:if>

Para mostrar os elementos nas páginas estáticas do blog, use:

<b:if cond='data:blog.pageType == "static_page"'>
AQUI O CÓDIGO DO QUE VC QUER MOSTRAR
</b:if>

Note que a única parte que muda em todo o código é "==" para "!=".

Por exemplo, se que ocultar a sidebar da página:

Procure por "<div id='sidebar-wrapper'>" e cole a primeira parte do código acima dele e a parte final "</b:if>" depois da tag de fechamento "</div>":

<b:if cond='data:blog.pageType != "static_page"'>
<div id='sidebar-wrapper'>
< ---- restante do código da sidebar ----
------- >
</div>
</b:if>

Você pode ocultar qualquer parte da página, mas o mais usado é para a parte da sidebar porque o cabeçalho e o rodapé do seu blog são muito importantes por serem sua identidade e relacionarem a matéria ao seu logotipo. Mas nada impede de você ocultar todo o resto, deixando apenas a matéria.

Nesses casos, não esqueça de colocar um botão de "voltar" para que seu leitor não acabe indo para outro site.

Um abraço a todos!

Colocar banner automatico nas postagens

2013-03-04T21:24:00.001-08:00

Hoje vou mostrar como colocar elementos automaticos dentro das postagens e depois de "leia mais", como por exemplo: propaganda, banners, textos personalizados, etc.

Para fazer isso, você precisa de um ponto de referência, e se usar o "leia mais", isso fica muito mais fácil de implementar.

Vamos ver como:

Clique em "Modelo" e depois em "editar html".

Clique em "Expandir..." e tecle "Ctrl + f".

Procure por "</head>" e antes dela cole o código abaixo:

Não modifique nada no código.

Agora procure por:

<data:post.body/>

Abaixo dele, cole o código a seguir:

<b:if cond='data:blog.pageType == "item"'>
<div id='moreadsense'>
<br/>
<center>
ÁREA PARA O ELEMENTO DESEJADO
</center>
<br/>
</div>
</b:if>

Na área demarcada, coloque o código do elemento que você quer que apareça abaixo do "leia mais".

Você pode colocar links, imagens, textos, afiliados e também propagandas do Google Adsense.

Para usar os anúncios do Adsense você precisa acessar o "HTML Entities Encode and Decode", fazendo assim:

Cole o código do anúncio onde diz "Input";

Clique em "Encode";

Copie o código que aparece em "Result";

Pronto, agora você pode adicionar este código na área do elemento do nosso script.

Boa sorte e bons lucros!

Quero dar os parabéns para o "Ferramentas Blog" pelo exelente script.

Personalizar data da postagem no blog

2013-03-03T22:14:00.000-08:00

Para criar um site ou blog que tenha uma aparência mais profissional, alguns detalhes que podem parecer pequenos, tem uma grande importância para quem visita sua página. Um detalhe desses é colocar a data da postagem abaixo do título da postagem e isso tem um grande apelo visual.

Isso pode ser feito de uma forma muito simples, mas tome alguns cuidados por que você precisa mecher no html do seu site. Mas eu vou explicar de uma maneira simples e se tiver alguma dúvida, basta adicionar um comentário no final desta matéria.

Antes de começar, precisa entender como funciona.

Desde a criação do Blogger, os estilos de códigos vem mudando e isso dificulta a localização das tags e as que nós vamos usar também mudaram. Vamos ver abaixo:

Modelos baseados no template Mínima de 2006, o código da data era assim:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Ou também assim:

<b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
</b:if>

Modelos baseados nos templates Designer de Modelo 2010, mudou denovo e ficou como o abaixo:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Agora vamos mudar a data de lugar:

Entre em "Modelo", "editar html" e depois "Expandir...".

Utilizando o comando "Ctrl + f", procure por um dos códigos acima e após encontrar o trecho correto, selecione-o, e pressionando as teclas CTRL + X recorte-o.
Agora é hora de posicionar-mos a data em outro local.

Para colocá-la abaixo do título do post, procure por esse trecho:

<div class='post-header-line-1'/>

Ao encontrá-lo, cole abaixo o código da data.
Seu código final ficará assim:

<div class='post-header-line-1'/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Para posicionar a data no rodapé do artigo, busque por esse trecho:

<div class='post-footer-line post-footer-line-1'>

E, depois dele cole o código da data. O código final ficará dessa forma:

<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

OBS.: Eu encontrei os códigos acima em DOIS locais diferentes no meu script e alterei nos dois.
Deu todo certo e salvei!

Para que a data apareça em todas as postagens, faça o seguinte:
No menu “modelo”, acesse “editar html” e marque a opção “expandir modelos de widgtes”
e procure por:

<b:if cond='data:post.dateHeader'>

<h2class='date-header'><span><data:post.dateHeader/></span></h2> </b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>

Substitua todo o código que você acabou de localizar, por este abaixo:

<b:if cond='data:post.dateHeader'>
<script>var lastDate= '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(lastDate);</script>
</h2>
</b:if>
<div class='post-outer'>

Agora é só visualizar e se estiver certo, salve.
Prontinho. Agora sua data está abaixo do título e em todos os posts.

Se quiser personalizar a data, é só colocar o código abaixo dentro de "head":

h2.date-header {
font-family: /*tipo de letra*/
color: /*coloque a cor de sua preferência*/
margin: /*defina um espaçamento se quiser*/
padding: /*defina um espaçamento se quiser*/
font-size: /*coloque o tamanho da fonte de sua preferência*/

Sucesso!

Fazer curso de ingles, tecnico e gratis online

2013-03-02T22:31:00.002-08:00

Nos dias de hoje, com a vantagem da internet, fazer Curso Online é uma forma rápida e prática de aprender e o "Cursos 24 horas" facilita isso pra você com grande competência e credibilidade. Contando com professores habilitados, seja em que área for, você terá oportunidade de realmente aprender uma profissão na comodidade do seu lar.

Veja mais detalhes na aba "Cursos".

É possível iniciar um curso em qualquer dia, não é necessário apresentar documentos ou participar de processos burocráticos para iniciar as aulas.

Os cursos variam entre R$ 20,00 e R$ 75,00. Um treinamento parecido em outras instituições pode custar mais de R$ 500,00.

A eficiência e alto volume de alunos do "Cursos 24 horas" possibilitam oferecer cursos de alta qualidade por valores reduzidos. Além disso, não há nenhuma cobrança de mensalidade em nossos cursos, eles são pagos uma única vez.

Além disso, você poderá fazer cursos gratis, mas precisa ser devidamente cadastrado e receberá os cursos disponíveis por email.

Quer ganhar dinheiro com o "Cursos 24 horas"?
Sim, é possível! Basta se cadastrar como afiliado e divulgar os links e banners como eu estou fazendo aqui e receberá uma comissão que você recebe por transferência bancária ou utilizar para fazer um curso. Bom, não acha?

O Certificado é válido em todo o Brasil e em vários outros países, ele pode ser utilizado em faculdades, empresas públicas e privadas, concursos e provas de título, entre outros.

Não perca essa oportunidade de ter uma profissão com pouco investimento e alto aprendizado.

Acesse a aba "Cursos", no menu superior, e veja mais detalhes dos cursos disponíveis.

Imagem de fundo na postagem

2013-02-27T09:11:00.000-08:00

Para colocar uma imagem de fundo na postagem, basta copiar o código abaixo e cola na área da postagem em html, depois clique em escrever e coloque o texto que quiser.

<div style="background-image: url(Endereço da imagem de fundo); padding: 5px;">
Aqui vai o conteúdo </span></div>

Escolha o tipo de letra e a cor e digite o texto que quiser no local demarcado como "Aqui vai o conteúdo". Você pode ver o resultado neste post aqui.

A imagem precisa ser maior que a área da postagem, pois o próprio código se encarrega de redimencionar a imagem e deixá-la proporcional.

Aproveite bem e tenha sucesso!

O que é e como fazer um eBOOK

2013-02-27T08:27:00.000-08:00

Você talvez esteja se perguntando: O que é um Ebook? Como fazer um Ebook? Para que serve um Ebook?
Vamos fazer uma comparação. Digamos que um Email é a mesma coisa que uma carta enviada pelo correio. Então, um Ebook é a mesma coisa que um livro que você compra na livraria, certo?
A palavra Ebook ( e-book ) é uma sigla que significa "eletronic book" e nada mais é do que um livro em formato digital.

Junto com o aumento na venda de , iPods, smartphones e dos tablets em todo o mundo, vem um aumento ainda maior de dispositivos que que criam e leem textos digitais, os chamados "Ebooks".

Existem vários formatos de Ebooks disponíveis no mercado, os mais comuns são PDF, HTML e ePub ( publicação eletrônica ). Também podemos entrar em .doc, .odt, .txt, .lit e .opf.
Alguns aplicativos criam esses Ebooks mas não podemos esquecer que muitos livros famosos e importantes foram publicados em papel e que agora estão entrando nesse sistema, através dos conversores de Ebook.

Algumas pessoas acreditam que o livro impresso nunca poderia ser substituido pelo Ebook pelo apelo visual e o charme. Eles dão o exemplo da biblioteca.

Imagine todos os livros de uma biblioteca dentro de um computador. Imaginou? Pessoalmente, eu acho doloroso e sem o charme algum.

Mas existem muitas vantagens nos livros digitais e que superam e muito os de papel. A principal é a portabilidade: Um livro (ebook) é publicado na Austrália e alguns segundos depois e comprado aqui no Brasil.

Como não requer papel, o Ebook se torna muito mais barato e isso já é um atrativo para o leitor na hora da compra. Mas se preferir poderá imprimir seu Ebook e ler confortavelmente no sofá de casa e guardá-lo na sua estante.

Mas a mais importante delas é a facilidade no transporte, pois como eu disse antes, você pode carregar um caminhão de livros dentro do seu notebook ou smartphone. Bom, não é?
Depois de se escrever ou converter um Ebook, você precisa de um programa que leia seu texto digital e é aí que entra o "Ebook Reader".

Existem várias marcas disponíveis no mercado, entre eles está Amazon Kindle que é um aparelho criado especificamente para ler esse tipo de texto.
Já existem várias editores que se especializaram na criação, comercialização e conversão de Ebooks.
Também já tem vários sites na internet onde você pode baixar de graça livros muito bons e de qualidade.

Tudo isso nos leva a certeza de que essa forma moderna de ler livros está se fortalecendo a cada segundo e a vida cada vez mais "digital", o eBOOK veio pra ficar. Mas o importante é que os jovens da "era digital", que não conseguem ficar um minuto sem o celular, vão continua lendo livros e adquirindo cultura e conhecimento.

Como colocar sombra no texto do blog

2013-02-24T16:42:00.002-08:00

Hoje vou descrever um tutorial bem fácil e rápido pra vocês.

A maioria já conhece o efeito sombreado em títulos dos posts e dos gadgets, mas não sabem onde colocar o código para aplicar o efeito ao texto de todo o blog.
É bem simples, veja só:
Vai no "Modelo" e depois clique em "Editar html" e em "expandir...". Aperte Ctrl+F e procure por "body {" e cole logo abaixo esse código:

text-shadow: 1px 1px 3px #b5b5b5; /*--cor da sombra--/
-moz-text-shadow: 1px 1px 3px #b5b5b5;
-webkit-text-shadow: 1px 1px 3px #b5b5b5;

Edite a cor e o tamanho da sombra como preferir. Os valores e a cor devem ser iguais nas três linhas do código para funcionar em todos os navegadores (exceto o Internet explorer).

Colocar imagem no titulo da postagem

2013-02-24T14:10:00.001-08:00

Colocar uma imagem no título do post pode incrementar seu layout do blog e deixá-lo muito mais atraente aos leitores.

Essa imagem precisa ser pequena, mas proporcional ao tamanho da letra usada no título. Nessa imagem ao lado, eu usei uma de 30px por 30px.

Essa ação não requer nenhum código java ou html, basta usar uma simples linha de comando em um local determinado e pronto. Veja:

Entre em "Modelo" , "editar html" e depois clique me "expandir...".
Usando "Ctrl + f", procure por:

<a expr:href='data:post.url'>

Ao lado direito dele, cole o código abaixo:

<img src="URL DA IMAGEM"/>

Acrescente o endereço de sua imagem já hospedada, visualize e se estiver tudo bem, salve.

DICA: Para hospedar as suas imagens, comece uma "Nova postagem" e carregue as suas imagens.
Sempre mantenha o tamanho original clicando na imagem já carregada, depois clique em "HTML" e copie o código assim:

<a href=' ...
... </a>

Dê preferência para imagens com extensão .GIF, elas são mais leves que as .JPEG (JPG).

Fazer resumo de postagens aleatorias

2013-02-24T10:49:00.001-08:00

Colocar um gadget que mostre o título das postagens de forma aleatória é uma forma de você chama a atenção para suas postagens mais antigas, aquelas que não tem muita procura.

Este resumo das postagens precisa ficar em um lugar "estratégico" no seu template. Um ótimo lugar para isso é acima das postagens. Veja o exemplo na imagem.

Para colocar o resumo das postagens no seu blog é muito simples, basta seguir o script:

Clique em adicionar elemento e em "html/javascript":

A cor das letras e o tamanho são as mesmas dos links do blog.

Como dividir gadgets em mais colunas

2013-02-20T15:47:00.000-08:00

Se você quer criar um blog de notícias, e quer dividir sua postagem em várias colunas como aparece em jornais, este código htmal/javascript vai ser de grande utilidade. Também serve pra fazer menu horizontal com texto ou imagens. O blog Testando Scripts mostra agora como fazer isso, como a imagem acima.

Este código pode ser colocado nos gadgets, através de "html/javascript" e, nas suas postagens, com um simples passo:

- Clique em "nova postagem" e na janela que abrir, alterne de "escrever" para "html".

Agora adicione o código abaixo:

<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>
<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>
<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>
<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>

Algumas configurações:

- O "Width" é a largura da coluna e se você utilizar 4 colunas iguais, cada uma será 25%. Se usar 3 colunas, cada uma terá 33%. Mas isso não é uma regra, o importante é que a soma deve ser 100%. Exemplo:

20% - 30% - 25% - 25%

33% - 33% - 33%

40% - 50%

- Caso você não utilize imagens na sua postagens, pode apagar o código abaixo:

<a href="url link" ><img border="0" src="url da imagem" /></a>

- Se for utilizar só imagens, deixe o código completo e altere apenas o Width.

Estou fazendo o meu superior do blog com esse mesmo código, divindo em 6 ou 7 colunas com o width em todos. Não vai ficar com efeito hover mas acredito que assim será mais fácil de personalizar. Com efeito hover, é preciso editar o html do blog.

Espero ter ajudado. Se ficou alguma dúvida, deixe um comentário abaixo.

Personalizar links de navegação do blog

2013-02-20T13:53:00.000-08:00

Para personalizar os links "postagens mais antigas", "postagens mais novas" e o link "início" com um texto ou com uma imagem é muito fácil. Veja exemplo de botões abaixo:

Se você for utilizar uma imagem como link pode baixar da internet ou criá-la no seu editor de imagens, eu usei o Gimp para criar as minhas, e depois hospedá-las. Copie o link e guarde no bloco de notas.

Agora vamos ver onde colocar o texto ou a imagem:

No seu painel do blogger, clique em "Modelo", "editar html" e depois em "expandir modelos de widgets".

Com o uso do atalho "Ctrl + f", procure pelo código abaixo:

<data:homeMsg/>

Essa é a parte do link "início".

Agora apague essa parte e, no seu lugar, escreva o seu texto (HOME, INÍCIO, ETC) ou coloque o seguinte código:

<img src="url_da_imagem"/>

A parte em vermelho é o link da sua imagem.

Visualize e se estiver tudo bem, salve.

Agora procure por:

<data:olderPageTitle/>

Essa é a parte do link "postagens mais antigas".

Apague e coloque o mesmo código do primeiro passo no lugar, apenas substitua a parte em vermelho pelo link da imagem (antigas) ou pelo texto (ANTERIOR, VOLTAR, ETC).

Por último, procure por:

<data:newerPageTitle/>

Esse é o código para "postagens mais novas".

Repita o passo anterior com o link da imagem ou com um texto (SEGUINTE, NOVAS, ETC).

Visualize e se estiver ok, salve.

VOLTAR INÍCIO AVANÇAR

Se você deseja personalizar esses textos, tipo de letra, tamanho, cor, etc., basta seguir os passos abaixo.

Use "Ctrl + f" e procure por:

#blog-pager {

Apague e cole o código abaixo no lugar:

#blog-pager {
clear:both;
text-align: center;
margin:0px auto;
padding:10px;
}
#blog-pager a:link, #blog-pager a:visited{
color: #ffffff;

font-size: 16px;

padding:5px;
background: #444444;

}
#blog-pager a:hover{
color: #000000;

font-size: 16px;

padding:5px;
background: #222222;

}

color: #ffffff é a cor do texto normal;

background: #444444 é a cor do fundo normal;

color: #000000 é a cor do texto hover;

background: #222222 é a cor do fundo hover;

Edite como achar necessário e se ficar do seu agrado, salve.

Contador visitas para blog grátis

2013-02-16T20:41:00.000-08:00

Colocar um contador de visitas, em tempo real, com mapa através de um gadget que mostra de onde seus visitantes estão acessando é uma gadget interessante não só pelo lado visual mas também para que eles tenham uma noção dos outros visitantes da mesma página. Isso dá um efeito de qualidade ao seu layout e isso conta pontos a seu favor quando pensam em voltar a um site ou blog.

Existem muitos sites que disponibilisam códigos (scripts) na internet e dentre eles vou citar os que eu gosto e uso em meus blogs. Esses widgets podem ser personalizados: modelo, tamanho, cor de fundo, cor de texto, etc.

- Contador de visitas:

Meu contador de visitas preferido é o webcontadores pela infinidade de modelos que ele tem nos arquivos. Veja abaixo a imagem do site e clique nela para escolher o seu:

- Localizador geográfico de visitantes:

O melhor script para esse localizador é fornecido pelo RevolverMaps. Ele é muito fácil de configurar e pode ser alterado a qualquer momento. Depois de pronto, é só copiar e colar o código em um gadget "html/javascript". Veja a imagem abaixo e clique nela para ir ao endereço:

DICA:

Se você quiser pode colocar os dois (2) códigos html no mesmo gadget, como eu fiz aqui no testandoscripts, basta colar um código abaixo do outro e usar as tags "<center> e </center>" para abrir e fechar os scripts. veja abaixo:

<center>

< ---- código do contador ---- >

* deixe um espaço aqui *

< ---- código do localizador ---- >

</center>

Esse formato eu usei no gadget das visitas.

Espero ter ajudado, um abraço!

Como criar Email Marketing

2013-02-12T14:51:00.003-08:00

Propaganda, divulgação, se fazer notar são coisas que todas as marcas de sucesso tem em comum. Afinal de contas, ninguém vai prestar atenção em você se não estiver na mente das pessoas. Nos dias de hoje somos fuzilados por todos os lados e por diversas formas, dentre elas, na TV, no rádio e também por emails que enchem nossa caixa postal. E essa é a forma mais eficaz de divulgar um produto ou marca. Estou falando de Email Marketing, mas como se faz isso?

Primeiro você precisa ter esses emails e isso você pode fazer de várias formas:

- Sua lista pessoal de contatos (Hotmail, Yahoo, Bol, Gmail, etc);

Sempre recebemos emails de amigos e, no corpo do email, uma lista de pessoas que também receberam essa mesma mensagem. Pois bem, esses contatos podem ser usados para divulgar sua marca/produto.

- Amigos das redes sociais (Facebook, Orkut, Google+);

Esses também são uma ótima forma de propaganda e fonte de contatos.

- Inscrições de FeedBurner (Feeds, RSS);

Todo site ou blog não pode viver sem ele. Os Feeds são uma fonte garantida de retorno de seus visitantes, aumentando seu faturamento.

Se você ainda não tem uma conta de Feeds, acesse:

http://testandoscripts.blogspot.com.br/2013/02/como-criar-feedburner-e-aumentar-suas.html

Como funciona o email marketing?

Existem vários sites na internet que disponibilisam esse serviço, na sua maioria, são pagos mas o valor não é nada absurdo. Dependendo do seu produto, pode ser insignificante.
Minha recomendação é o "E-goi", veja no link abaixo:

http://www.e-goi.com

Os planos variam de um site para outro, depende do oferecido por eles. Os que são grátis tem tempo de uso (trial) mas já da pra começar o seu Email Marketing de uma forma bem promissora.
Todos oferecem personalização do email com cores, letras, imagens e links.

Então, o que está esperando? Comece agora mesmo e veja suas visitas aumentar, suas vendas crescer e seu futuro mudar.

Boas vendas!

Como Configurar o FeedBurner corretamente

2013-02-12T12:16:00.000-08:00

Como eu já disse anteriormente, os feeds ou newsletter são importantíssimos para aumentar suas visitas e isso ninguém discute, mas como configurar o FeedBurner e tirar o melhor dele? É exatamente isso que eu vou mostrar neste post com algumas dicas que eu acredito serem as principais e se você procurar no seu painel deve encontrar mais algumas. Depende de você!

Se ainda não criou o seu FeedBurner, veja:

Como criar um FeedBurner

Depois de abrir seu painel de controle no FeedBurner, você verá o seu blog e ao lado dele alguns dados como assinantes de Feeds e leitores de RSS, clique no seu blog.

O primeiro passo é clicar em "Publicize (Publicar)" e depois em "Email descriptions". Vai aparecer uma página como a imagem abaixo:

Aqui você vai escolher o idioma do texto que aparecerá na janela de cadastro de assinantes.

Abaixo em ( Use as a widget in ) escolha a opção "blogger" e logo abaixo em "Preview Subscription Link…" você poderá ter uma prévia de como ficará o resultado.Veja a imagem no começo do post.

Eu aconselho você a usar o segundo código que aparece nessa página pois, o link vai abrir em uma nova janela flutuante o que não atrapalha o internauta.

No final da página, marque a opção "enviar-me um email...". A cada assinatura, você será notificado.

Se ainda não copiou o código, copie o código menor e depois salve!

O próximo passo é configurar a mensagem que o assinante receberá por email após o cadastro, para isso clique em "Communication preferences". Use o tradutor do google e faça a tradução do texto em "assunto..." e "corpo do email...".

Para ficar mais pessoal também pode alterar esses dois textos como desejar, mas isso não é importante. O que realmente importa é que a pessoa receba uma confirmação e as suas atualizações futuras.

Próxima etapa é configurar o "Email Branding" que é a parte responsável pela aparência do email que seu assinante receberá a cada nova atualização.

Dentre elas: O título do Email, tipo, tamanho, cor da letra e também o endereço de uma imagem como 200 x 200 pixels. Terá um aspecto mais profissional a mensagem.

No final da página você terá a prévia de como ficará sua mensagem. Veja o exemplo abaixo:

Se estiver tudo do seu agrado, salve!

Outra etapa que pode ser de extrema utilidade é "Headline Animator" onde podemos personalizar banners para divulgação e, como o próprio nome diz, "animado". Legal, né?

Configure da forma que desejar mas sem alterar o "Clickthrough URL" que é o endereço do seu feed.

Em "Theme" aparece o modelo de banner por tamanho.

No final da página você pode acompanhar com vai ficar seu banner.

Ao clicar em "Ativar", abrirá apágina onde estará o código html.

Copie e cole em um gadget "html/javascript" e posicione no lugar que quiser em seu layout.
Você poderá volta a esta página e configurar novos banners a qualquer momento.

Espero que tenha muitas visitas!

Inserir imagem no rodapé da postagem

2013-02-12T09:57:00.000-08:00

Para iserir uma imagem no rodapé da postagem, seja ela do autor do post, um gif animado ou banner de propaganda é muito fácil de se fazer e o resultado é muito melhor do que aquele rodapé sem graça que o blogger sugere.

Vou mostrar como isso é feito com o uso de um código bem simples e fácil de ser inserido no seu html, veja abaixo:

Clique em "Modelo" e depois em "editar html", agora clique em "expandir modelo de página".
Agora use "Ctrl + f" e procure pelo código "<div class='post-footer'>".

Abaixo dele cole o código abaixo:

<div align='right'>
<img src='URL da Imagem' style='border:0px;'/></div>

A sua imagem deve ficar do lado esquerdo do rodapé, como mostra a imagem acima (seta vermelha).
Visualize e se estiver todo ok, salve!

Outra alteração que você pode fazer é colocar um banner com link.
Nesse caso use o código abaixo:

<center>
<a href="Url do link">
<img src="Url da imagem"/>
</a></center>

A imagem fica centralizada com o uso das tags "<center> e </center>";

Se for usar as duas imagens ao mesmo tempo é só inserir o código abaixo depois de "<div class='post-footer'>":

<center>
<a href="Url do link">
<img src="Url da imagem"/>
</a></center>
<div align='right'>
<img src='URL da Imagem' style='border:0px;'/></div>

Aproveite essa dica!

Como criar FeedBurner e aumentar suas visitas no blog

2013-02-11T22:55:00.000-08:00

Quando se fala em aumentar as visitas em um site ou blog, logo vem o nome "Feed", afinal nada é mais garantido do que leitores fiéis, aqueles que encontram seu blog pelos mecanismos de busca (Google, Yahoo, Bing, etc), se inscrevam para receber as suas atualização por email, clicam em um link e são redirecionados novamente para o seu blog. Isso garante longa vida ao blog!

E uma coisa que é extremamente importante para um blog é o retorno de um leitor. É mesma coisa quando somos proprietários de uma loja de roupas (por exemplo) e queremos que nossos clientes voltem para comprar. Cadastramos o telefone e quando recebemos novos produtos, ligamos para dar a notícia à eles.

Somando os visitantes novos e o retorno dos antigos, suas visitas aumentam mês a mês.

Como criar o seu Feed?

O blogger já tem um gadget para ser incerido através do layout, basta clicar em "adicionar gadget" e escolher a opção "seguir por email", colocar o título e salvar.

Mas tem outra opção que é o FeedBurner do google e que, a meu ver, é mais eficiente.

Esse serviço é, certamente, o mais usado por internautas e blogueiros, até por que a facilidade está em usar a mesma conta do google que você já usa para acessar o blogger, mas se usa outro serviço, nada impede de usá-lo.

Depois de acessar o Google feedburner, digite o endereço do seu blog, clique "next" e depois a plataforma que você usa, no caso do blogger, mantenha o "Atom", clique "next".

Agora você precisa cadastrar a conta, use o nome do seu blog e escreva na caixa "Feed Title".

Em "Feed Adress" escreva o nome do seu blog sem espaços e letra minúscula, clique novamente em "next".

Agora você já tem o endereço para seus visitantes se cadastrarem para receber as atualizações do seu blog, como o exemplo abaixo:

http://feeds2.feedburner.com/meublog

Já aproveito para convidar você para se inscrever e receber as nossas atualizações diretamente em seu email, ficando por dentro de novas matérias.

Acesse o link abaixo:

http://feeds.feedburner.com/TestandoScripts

Voltando ao nosso assunto, o próximo passo é adicionar o seu link do feedburner na sua página do blog. Para isso, vá em "configurações" e clique em "outro". Cole o endereço no local indicado e pronto!

Colocar banner no rodapé do blog

2013-02-09T22:54:00.000-08:00

O rodapé do seu blog pode ser um local muito bom para colocar agradecimentos, links, contato, etc. Mas eu acho que o visitante, muitas vezes, não presta atenção nesse lugar. Eu costumo não dar importância para essa parte.

Mas isso pode ser alterado, basta adicionar uma imagem ou banner nesse local com um link de sua preferência.

Vamos ver, abaixo, como:

Clique em "Modelo", e depois em "editar html".

Agora clique "expandir modelo de widgets".

Com o atalho "Ctrl + F", procure por "</body>" e logo acima cole o código:


<center>
<div id='rodape'>
<img src="Url da imagem">

</img>
</div>
</center>

Se quiser colocar um texto ao invés da imagem, apague o trecho abaixo, e em seu lugar coloque o texto.

<img src="Url da imagem">
</img>

Agora procure por "]]></b:skin>" e acima dele cole o trecho abaixo:

#rodape {
width: 940px;
padding: 10px;
background: #606060 ;
border:1px dotted #888 ;
text-align: center;
color: #ffffff;
font-size: 12px;
}

Onde:

Width = é a largura da imagem;
Background = é a cor de fundo;
Border = é o estilo da borda;
Text-align = posição do texto (right, center ou left);
Color = cor do texto;
Font-size = tamanho do texto;

Visualize e se estiver do seu agrado, salve!

2013-02-09T21:08:00.000-08:00

Uma coisa muito importante para todo blog obter sucesso na rede são os feeds, mas nada o impede de esconder essa mensagem do rodapé das postagens. Então vamos ver como isso é feito:

Vamos ao nosso HTML clicando em "Modelo" e depois em "expandir modelo de widgets".

Com a ajuda do atalho "Ctrl + F", procure por ".feed-links {".

Deve aparecer o seguinte código:

.feed-links {

clear: both;

line-height: 2.5em;

}

Antes da tag "}" coloque o seguinte:

display: none;

Visualize e se estiver tudo ok, salve!

Se você não encontrou o código ou não funcionou, outra opção é procurar por "]]></b:skin>" e, logo acima, colar o seguinte trecho:

.feed-links{display:none !important;}

Salve e veja se funcionou.

Adicional botão do facebook e outras redes sociais no blog

2013-02-09T20:18:00.002-08:00

Um Gadget que não pode falta em um blog ou site nos dias de hoje é o "Botão de Redes Sociais", como o que eu coloquei abaixo das "postagens relacionadas". Com ele, o visitante pode compartilhar o que lhe interessa com diversas redes sociais, mandar por email, adicionar aos favoritos e até imprimir. Não é fantástico?

"Em layout, clicando em editar a área das postagens, também tem uma opção parecida, mas eu não gosto dela."
Voltando ao nosso assunto, para você colocá-lo no seu blog também, precisa seguir os passos que vou mostrar a seguir. É muito fácil.

O primeiro passo é acessar o link (https://www.addthis.com/get/sharing?frm=hp#.URcM-PJtyHc), mas não se preocupe com o cadastro, ele não é obrigatório, mas nada impede de você fazê-lo.

Na janela que abrir, escolha a sua plataforma: Blogger, Wordpress, etc.

Depois escolha o modelo que mais lhe agrada. Na direita tem um preview com o resultado final. Veja a imagem abaixo:

O segundo passo é clicar em "Install Blogger Widget" e na página que abrir você terá o nome do seu blog, o título (opcional) e o botão "adicionar widget", clique nele.

No terceiro e último passo, você será direcionado para o layout do seu blog. Se você colocou um título no segundo passo, seu gadget já vai estar devidamente instalado. Agora é só posicioná-lo abaixo da área da postagem ou no rodapé do blog.

Logo a seguir apague o título para que escondido e está pronto!

Postagens relacionadas no final do texto

2013-02-09T12:02:00.000-08:00

Um detalhe que pode manter seus visitantes mais tempo no seu blog, são as postagens relacionadas no final da postagem e o código é muito simples de ser implementado no layout.

Veja como:

Acesse o link: http://www.linkwithin.com/learn

Não necessita cadastro, é só preencher como na imagem ao lado e clicar em "Get Widget".
Na linha "Width" coloque a quantidade de links relacionados que você quer que apareçam.

Na página que abrir, clique em "Instal Widget", e na próxima, em "Adicionar Widget".

Na página de layout que abrir, posicione o Gadget abaixo da área da postagem.

Visualize, se não gostou do resultado, ou quiser alterar a quantidade de links que aparecem, volte a página inicial do Linkwithin e altere o Width.

Repita todo o processo anterior até ficar do jeito que mais lhe agrada.