Acessorios para Blogs

10 dicas para deixar seu Site/Blog mais rápido

noreply@blogger.com (Nauan) — Thu, 25 May 2017 08:49:00 -0300

Turbine seu Blog/Website para uma melhor leitura de conteúdo!

Quem nunca passou um bom tempo esperando uma página na web carregar, que atire a primeira pedra. Sempre nos deparamos com páginas pesadas e que por muitos motivos podem estar lentas.

Se uma página leva mais que 5 segundos para carregar, o vistante do seu site ou comprador da sua loja virtual pode ficar frustrado e simplesmente abandonar a página.

Velocidade é tudo, e há muitas maneiras de diminuir o tempo de carregamento de uma página na internet. Veja algumas dicas da Oficina da Net:

Altere todo o código HTML dentro das tags <style> para arquivos CSS externos. Estilos codificados nas próprias webpages tornam o site tumultuado já que são baixados toda vez que alguém acessa a página, enquanto um arquivo CSS externo é baixado apenas uma única vez no computador do visitante.
Diga não à elementos em Flash ou objetos Quicktime que rodem automáticamente quando a página é carregada. No caso de animações e mídias, os vídeos do Youtube, que iniciam apenas quando o botão Play é pressionado, podem ser uma boa alternativa.
Se suas páginas possuem muito código Javascript, altere todo o código para um arquivo externo que será carregado uma única vez.
Divida as páginas com excesso de conteúdo em páginas menores. Até os mecanismos de busca preferem essas páginas.
Grandes quantidades de imagens devem ser evitadas em webpages. Mas se você não puder ficar sem as imagens, seria bom dividí-las em imagens menores, evitando sempre as de grandes dimensões.
Caso não haja necessidade, diga adeus à recursos como chat, abas, previsão do tempo, mural, etc. Se essas coisas não forem tão importantes assim para o seu site, livre-se delas, já que aumentam muito o tempo de carregamento da página.
Atributos simples de largura [width] e altura [height] na tag da imagem otimizam significantemente sua exibição já que os navegadores leêm as dimensões das imagens mesmo antes de as baixar do servidor onde estão hospedadas e exibí-las na página.
Faça a compressão de seus gráficos usando qualquer um dos utilitários de edição gratuitos, como Irfanview. Uma imagem jpeg com 60% de qualidade após comprimida é suficiente.
Limpe manualmente seu HTML – se você tiver montado o template do blog no Macromedia Dreamweaver ou Microsoft Frontpage, esses programas devem ter adicionado algumas tags HTML extra e outras informações que você provavelmente não precisará. Abra a template no Notepad e delete o que for desnecessário.
Fique bem longe de tabelas HTML (especialmente as aninhadas). Elas confundem o browser e complicam o carregamento da página. Prefira os layers CSS.

Botão Abrir e Fechar (Chat) Flutuante Para Blog

noreply@blogger.com (Nauan) — Sun, 14 May 2017 14:16:00 -0300

Esse botão é um recurso bem útil para queles blogueiros que utilizam Bate-papo Xat no blog, pois o botão deixará o Xat acessível e visível para o visitante acessá-lo, e a vantagem também é, que, o xat não ficará ocupando um grande espaço no seu blog...

Veja uma DEMONSTRAÇÃO.

Sobre o Botão abrir Xat, ele ficará posicionado na parte inferior direita da tela, e quando o botão é clicado o Xat é executado automaticamente e exibido sobre a página do seu blog, ainda contando com a opção Fechar Xat.

Como Colocar o Botão Abrir e Fechar Chat no Blog

Para colocar no blog é bastante fácil galera, então vamos lá.

1º Passo: Copie o código mostrado logo abaixo:

Selecione a área de transferência, depois pressione Ctrl+C

<div id="botao_xat" style="position:fixed;right:5px;bottom:0;text-align:right; z-Index:9999; background-color:transparent;"><img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5acOOVDJK8mcf12ZBmiXzc8D_S1WG2rJo9piGKKX6YzsL-s3zXX2JtBEdwUcMfvEM72Aw0_USONXUdYHsY8X1keRH3R__pZVdpleHQ83D3TAf7YUjNWBbVto3zJSwY3bVOXoPJULyoSo/s1600/abrir+xat.png" /></div>
<script type="text/javascript">
function abrir_xat(){
document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy09mPCmLsr7aVz3xNuNkoXWIdkmvOWxVXLF_DC0bwE3xFbLBDv83oxreZDpznvRGTeLk7Loucomhyphenhyphenyl01yQDx4ouiEhgB0cH-JH8HAGDWZ328SusPInCxXiVMcADfYVwxzfQHsjlNK-Y/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br>';
document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy09mPCmLsr7aVz3xNuNkoXWIdkmvOWxVXLF_DC0bwE3xFbLBDv83oxreZDpznvRGTeLk7Loucomhyphenhyphenyl01yQDx4ouiEhgB0cH-JH8HAGDWZ328SusPInCxXiVMcADfYVwxzfQHsjlNK-Y/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="550" height="405" name="chat" FlashVars="id=000000000" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.php" />';}
function fechar_xat(){ document.getElementById("botao_xat").innerHTML = '<img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5acOOVDJK8mcf12ZBmiXzc8D_S1WG2rJo9piGKKX6YzsL-s3zXX2JtBEdwUcMfvEM72Aw0_USONXUdYHsY8X1keRH3R__pZVdpleHQ83D3TAf7YUjNWBbVto3zJSwY3bVOXoPJULyoSo/s1600/abrir+xat.png" />';
}</script>

2º Passo: Em seguida, vá no painel de Edição do seu blog, clique na opção "layout" >> clique em "Adicionar um Gadget" >> adicione a opção "HTML/JavaScripts".

3º Passo: Agora vamos editar o código. Veja que no código, eu destaquei uma pequena parte em corVermelhar: "000000000" essa parte significa o "Número ID" do Xat, sendo assim, você terá que substituir essa parte do código pelo o "ID" do seu Xat.

Obs.: Pra encontrar o Número ID do Xat é fácil. Esse fica presento no código do seu Chat:

4º Passo: Depois de editar o código, Salve o novo Gadget e pronto, seu xat estará funcionando.

Então pessoal, é só isso, espero terem gostado desse botão. Queria que vocês deixassem comentário sobre o Gadget, e não esqueçam de segui nosso blog, certo. obrigado!
Observe: Caso alguém deseja mudar a cor do botão abrir e fecha podem ficar a vontade, esse Gadget utiliza duas imagens, basta vocês criarem duas imagens com base nessas que estarei deixando logo abaixo, depois de prontas as imagens, hospede-as no blog e substitua o link das imagens antigas pelo que criaram:

Botão Abrir Xat:

Botão Fechar Xat:

Quatro Formas de divulgar o seu blog

noreply@blogger.com (Nauan) — Sun, 14 May 2017 13:16:00 -0300

Ter um blogue não é só escrever o que se pensa e está bom. Para quem realmente quer ter um blogue a sério, tem de pensar no conteúdo, nos temas, na escrita. E também terá de pensar em como pode fazer chegar a sua mensagem ao maior número de pessoas.
Esta conversa pode parecer um pouco narcisista mas o mundo dos blogues é um pouco assim: podemos escrever para os nossos amigos e família ou só para nós. E também podemos escrever para um público mais largo e até ter uma carreira focada neste meio: e se esse é o objectivo então temos de divulgar.
E aí surgem as perguntas importantes: como chego ao maior número pessoas? Como posso ter mais visitantes? Como posso ter mais pessoas a visitarem-me e a comentar?

Um blogue é uma plataforma onde se pode partilhar ideias, pensamentos, produtos, serviços e a sua divulgação é importante, nem que seja para mostrar ao mundo que estamos aqui e que ele também pode ter ideias semelhantes às nossas.
Com o crescimento brutal das redes sociais e da importância da publicidade na Internet, que ferramentas posso usar para divulgar o meu blogue?

- A plataforma de alojamento importa
Quando quis criar o meu primeiro blogue em português a sério, escolhi utilizar o Sapo Blogs. Primeiro, vi que uma boa parte das bloggers mais conhecidas a nível nacional utilizavam esta plataforma e porque vi que se dava primazia por conteúdos em português e de ideias originais de escrita, e não meramente fotografias ou músicas partilhadas. Para podermos ter uma boa divulgação, temos de pensar no nosso público e temos de perceber se ele está em Portugal, no Blogger, no Wordpress ou noutra plataforma. O primeiro objectivo será ter um blogue que seja visto e por isso temos de escolher a melhor plataforma para tal efeito.

- As redes sociais são indispensáveis
Partilhar o blogue com amigos e familiares nas redes sociais parece ser fácil mas se quer ter um ar mais profissional, crie uma página no Facebook. O nosso blogue é o nosso trabalho mas náo é a totalidade da nossa identidade, pelo que temos de o separar da nossa "identidade virtual". Além disso, podemos seguir blogues ou outros websites com interesses comuns ao nosso blogue e assim criar mais visibilidade. O LinkedIn pode ser um ponto a favor para quem escreve sobre negócios e o Medium é ideal para escrita criativa ou em inglês. Quantas mais plataformas utilizarmos, mais alcance teremos, desde que escolhamos os sítios certos a publicar consoante o público que queremos atingir.

- O email não é coisa do passado
A nova funcionalidade do Sapo Blogs permite que os seus leitores possam receber todos os artigos da semana na sua caixa de email. É fácil esquecermo-nos um dia ou outro de verificar os nossos blogues preferidos mas alguém se esquece de ver o email mais do que uma vez por dia? O email é mais uma forma rápida e prática de chegarmos às pessoas que podem não conseguir aceder às redes sociais mas que têm ligação à internet. Além disso, termos o endereço de email de um leitor mostra-nos o seu interesse directo em ler aquilo que publicamos e melhor que o alcance só mesmo o engajamento do público.

- Estar presente em directórios
E se existisse uma plataforma que agregasse todos os blogues do mundo para que pudesses ler tudo aquilo de que gostamos em apenas um clique? O Bloglovin nasceu para ser o Facebook dos blogues, uma plataforma agregadora de blogues onde podemos ver todas as actualizações no nosso feed personalizado. Funciona bastante bem para blogues de moda e para imagem pois a leitura pode ser feita em simples scrolldowns. Mais uma vez, ter mais do que uma plataforma para divulgar o nosso blogue é essencial, ainda mais quando essa plataforma é dedicada a 100% a esse conteúdo.

Resumindo, para divulgar um blogue de forma eficaz temos de saber quem é o nosso público, onde é que ele anda e utilizar o máximo de ferramentas disponíves, pois é com uma estratégia com muita acção que os resultados aparecem!

Gadget flutuante na lateral do Blogger

noreply@blogger.com (Nauan) — Sun, 14 May 2017 13:10:00 -0300

Pouco tempo atrás um mostrei aqui no Espaço Blog como colocar Widget flutuante na lateral do WordPress e agora venho mostrar como fazer isso para quem usa o Blogger.

Esse gadget flutuante nos permite colocar alguma coisa na lateral do blog e conforme o usuário vai descendo na página, esse gadget que normalmente ficaria parado em seu lugar na parte de cima do blog, vai seguir o usuário descendo também, ficando sempre visível na tela para o visitante.

Vale lembrar que você não pode fazer isso em anúncios do Google AdSense já que é contra os regulamentos do programa. Faça em box para Facebook, Twitter, caixa para se increver e receber atualizações por e-mail.

Gadget flutuante no Blogger

Atenção: É proibido usar isso com os anúncios do Google AdSense.
1º Passo: Entre no painel do seu Blogger e clique em “Modelo” e depois “Editar HTML“:

2º Passo: Clique “levemente” sobre o código do seu template para pesquisar dentro do código e não usando a pesquisa do navegador.
Aperte CTRL + F e pesquise por:

</head>

3º Passo: E logo acima desse código copie e cole esse outro código:

Selecione a área de transferência, depois pressione Ctrl+C

Veja no exemplo abaixo como deve fazer:

Feito isso clique em “Salvar modelo“.

4º Passo: Agora copie o código abaixo e coloque em um gadget no seu blog substituindo apenas o final do código destacado em amarelo onde está “SEU CÓDIGO AQUI” pelo código do seu gadget.

Selecione a área de transferência, depois pressione Ctrl+C

Não sabe como adicionar um gadget no Blogger? Clique no botão abaixo para aprender:

Em Breve

Legendar as imagens no Blog ou Website

noreply@blogger.com (Nauan) — Sat, 6 May 2017 22:54:00 -0300

Demonstração

Código sendo Usado:

Demonstração da Legenda.

Se você gostou das legendas das imagens do blog, venho lhes trazer o código para testarem em suas respectivas plataformas sendo blog ou website.

Comece colando a CSS que é o estilo da Legenda, procurando a tag b:skin e aciam dela cole este código:
Código:

Selecione a área de transferência, depois pressione Ctrl+C

td.tr-caption {
font-size: 90%;
background-color: #333;
display: inline;
padding: 5px 20px;
font-style: italic;
top: -50px;
float: right;
position: relative;
margin-bottom: -30px;
-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.325);
-moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.325);
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.325);
}

As partes em vermelho, vocês podem editar e colocarem as cores que vos desejarem.
Background-color: é a cor de fundo da legenda.
Color: é a cor da fonte do texto escrito.

Para ativar o código é só irem na imagem e clicar em adicionar legenda.

Se for ativar o código em outra plataforma, copie o seguinte código e cole em baixo da imagem em formato HTML:

Selecione a área de trasferência, depois pressione Ctrl+C

<tr><td class="tr-caption" style="text-align: center;"> Digite aqui sua legenda.</td></tr>

Pronto, agora o resultado é igual ao da imagem acima:

Demonstração da Legenda.

Como criar um Sitemap para Blogger

noreply@blogger.com (Nauan) — Sat, 6 May 2017 19:41:00 -0300

Visualização em grades do Website.

Os sitemaps são representações hierárquicas de todos os links do seu Website. Eles são muitos importantes para melhorar a indexação das suas páginas nos motores de busca, podendo aumentar as suas visitas do seu Blog.

A boa noticia é que o Blogger gera automaticamente os sitemaps, excluindo a necessidade de usar os “Feeds” como acontecia antigamente. No entanto, mantem-se a necessidade de enviar os sitemaps para serviços como o Google Webmasters Tool e Bing Webmasters Tool.

Como criar um Sitemap para Blogger

Para aceder ao sitemap do seu blog, basta adicionar “sitemap.xml” no final do link. Por exemplo, “http://exemplo.blogspot.com/sitemap.xml”. Os sitemaps gerados, respeitam as normas exigidas pelo próprio Google (seria estranho se assim não fosse), incluindo a data de atualização do post.

Agora, basta criar uma conta Webmaster no Google e no Bing. De salientar, que as ferramentas de Webmaster da Yahoo, foram fundidas com os serviços do Bing.

O Montar um Blog já explicou como cadastrar um blog nas ferramentas para Webmasters do Bing e do Google. Você poderá consultar esses artigos nos seguintes link:

Cadastrar blog no Bing Ferramentas para Webmaster
Cadastrar blog no Google Ferramentas para Webmaster.

Para terminar, vamos adicionar o sitemap no Google Ferramentas para Webmaster. Aceda ao Google Ferramentas para Webmaster e selecione o seu blog. No menu esquerdo, clique a opção “Rastrear” – “Sitemaps”.

Como criar um Sitemap para Blogger

Clique no botão “Adicionar / Testar Sitemap” e digite o seguinte expressão:

/sitemap.xml?page=1

Atenção: Se o sitemap do seu blog possui mais de 500 artigos, deverá adicionar um segundo sitemap e alterar o parâmetro “page” de “1” para o número de páginas necessárias.

No Bing Webmasters tool, selecione o seu blog e no menu esquerdo clique a opção “Configurar o Meu Site” – “Sitemaps”. O seu sitemap deverá ficar da seguinte forma:

http://nomedoblog.com/sitemap.xml?page=1

Não se esqueça de adicionar o nome do seu blog, e clique no botão “Submeter” do Bing Ferramentas para Webmaster. Se o seu blog possuir mais de 500 artigos, deverá adicionar um segundo sitemap alterando o número da página (como fez no Google Ferramentas para Webmasters).

Ocultar widgets em determinada página

noreply@blogger.com (Nauan) — Fri, 5 May 2017 16:05:00 -0300

Eu publiquei um artigo ensinando a ocultar elementos em página específica, onde explico como ocultar ou exibir elementos para que eles apareçam somente nas páginas que você definir, ou seja, você define quais elementos você quer que apareça somente na página inicial, somente nas páginas internas, ou nas páginas internas, incluindo as páginas de arquivos e marcadores.
Neste artigo veremos como ocultar ou exibir widgets em determinadas páginas.

Por padrão, no blogger, toda vez que inserimos um gadget na sidebar ou até mesmo no footer, através do menu “layout” >>”adicionar um gadget”, ele aparece em todas as páginas do blog (inicial, interna e de marcadores e arquivos).
Porém é possível definir, através de uma condicional, em quais páginas os widgets devem aparecer.
Você pode controlar a exibição de um widget/gadget em seu template.

Agora você vai ver como é fácil poder escolher e definir onde ficará a exibição de cada gadget que você instalou no seu template.

Com esta dica você pode melhorar a usabilidade dos seus widgets fazendo com que eles apareçam somente nas páginas onde são mais importantes, sem falar que também ajuda a melhorar o carregamento do seu blog, ao ocultar certos Widgets ‘pesadinhos’ na página inicial.

Exemplificando para um melhor entendimento:
Digamos que você tem um Widget de “Postagens Populares” e queira ocultá-lo nas páginas internas, de marcadores e arquivo. Quer que ele apareça somente na página inicial.
Acesse o painel do Blogger, clique no menu “layout” e entre na edição HTML do seu template, clicando no botão “editar html”.
Marque a opção “Expandir modelos de widgets” e procure pelo título do widget que você quer controlar a exibição.

Exemplo – Widget somente na página inicial:

Cole o código que define onde este Widget irá aparecer logo depois dessas linhas, que no exemplo acima será:

Agora você precisa fechar a condicional.

Cole:
</b:if>

Antes de :
</b:includable>

Deverá ficar assim:

Selecione a área de trasferência, depois pressione Ctrl+C

<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'>

<b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<ul>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>

<b:else/>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == "false"'>

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

</a>

</div>

</b:if>

</div>

<b:else/>

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

</a>

</div>

</b:if>

</div>

</b:if>

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:if></b:includable>

</b:widget>

Pronto, seu widget/gadget vai aparecer somente na página inicial do blog.

Portanto não se esqueça:
Sempre que você quiser ocultar um Widget em determinada página você deve localizar o título que você deu ao Widget e colar o código da condicional desejada logo APÓS a linha:

<b:includable id='main'>
e depois cole a linha:
</b:if>
antes do trecho:
</b:includable>

Veja o Código especifico da condicional para cada função:

Selecione a área de trasferência, depois pressione Ctrl+C


Para OCULTAR um widget somente nas Páginas Iniciais

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>


Para OCULTAR um widget somente nas Páginas
internas(de postagens), mas com exibição na Página Inicial, de Marcadores e de Arquivos:


<b:if cond='data:blog.pageType != "item"'>




Para MOSTRAR um widget somente nas Páginas de Publicações:

<b:if cond='data:blog.pageType == "item"'>



Para OCULTAR um widget na página inicial, de
marcadores e arquivo, mas com exibição nas páginas internas:

<b:if cond='data:blog.pageType =="item"'>


Para OCULTAR um widget somente nas Páginas Estáticas:

<b:if cond='data:blog.pageType != "static_page"'>


Para MOSTRAR um widget somente na Página Inicial:

<b:if cond='data:blog.url ==
data:blog.homepageUrl'>


Para MOSTRAR um widget somente nas Páginas de
Arquivos:

<b:if cond='data:blog.pageType == "archive"'>


Para MOSTRAR um widget somente nas Páginas
Estáticas:

<b:if cond='data:blog.pageType ==
"static_page"'>

Lembrando que: Alguns gadgets, são "problemáticos, como o de seguidores por exemplo,por mais que a gente insira a condicional para ocultá-lo em determinada página, eles não ficam ocultos. Se alguma condicional que você inseriu não deu certo, eu recomendo que você teste, usando a outra.

Menu Fixo no topo do Blog

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 18:27:00 -0300

Gostou do estilo de menu fixado no topo do meu blog? Você poderá colocar um parecido ou do jeito que quiser, apenas modificando alguns códigos a seguir.

Atenção! O modelo utilizado abaixo é um padrão da plataforma do blogger, e por isso, se estiver usando um modelo personalizado, é possível que não funciona da forma correta, ou até mesmo não encontre o trecho de código em questão. E nestas circunstâncias, será necessário que tente inserir o código do menu em outro ponto do seu blog.

INSTALANDO EM SEU BLOG/Website

A instalação é feita diretamente no código HTML do seu blog, e por isso, aconselho que antes de qualquer modificação, faça Backup do seu template.

1. Acesse o painel do blogger, e clique no blog desejado, e selecione Modelo e em seguida Editar HTML.
2. No editor de códigos, clique dentro da caixa de códigos e pressione as teclas Ctrl + F.
3. Procure por </header> e abaixo da tag cole o Código HTML.

4. Em seguida, procure por ]]></b:skin> e acima dela cole o Código CSS.

5. E por fim, bastará colarmos o Código JavaScript, procurando pela tag </head> e colando o código acima dela.

6. Salve o Modelo e visualize seu blog.

Pronto! Seguindo esses passos, você está inserindo um belo menu fixo em seu blog. Sendo possível que adicione sessões e novos links a ele, ou o personalizado da maneira que achar melhor. Em caso de alguma dúvida ou questão referente a postagem deixe seu comentário, que responderei o mais breve possível!

Biblioteca de Armazenagem e Interface Visual

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 18:19:00 -0300

Visualização do Website.

Imagine você, web designer e desenvolvedor, entrando numa biblioteca com mais de 38 mil itens de interface, como menus, animações jQuery, barras de rolagem, botões, ícones e milhares de elementos que compõe a interface de um site? Pois apresento a busca que você sempre sonhou.

Trata-se do UICloud, uma busca de elementos de interface. Nele você irá encontrar milhares de elementos, de ícones até caixinhas de tabela de preço, passando por formulários até barras de download. Todos os elementos gráficos que compõe um layout web você vai encontrar aqui.

Portanto comece sua visita serelepe a esta busca e seja feliz.

Para o alto e Avante!

39 Efeitos legais com o CSS3

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 18:13:00 -0300

Visualização do WebSite

Talvez você nem imagina a quantidade de animações que podemos fazer utilizando o CSS 3. Efeitos desde o tradicional pisca pisca até movimentação de elementos, background, curvas, gradientes e distorções.
Para você ter uma idéia do que o CSS é capaz de fazer, trago para vocês o animatable, uma tabela com 39 animações e efeitos diferentes utilizando apenas CSS.
Clicando em “animate all” você verá todas as animações em movimento. Clicando em “Animate on hover” as animações só irão ocorrer se passar o cursor por cima. Caso queira pegar o código, recomendo utilizar o Chrome, clicar com o botão direito em cima do elemento, clicar em “Inspecionar elemento” para ter acesso completo ao CSS.
Então anime-se, clicando aqui!

Transferir fitas K7 para o Computador

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 14:26:00 -0300

Bons tempos aqueles em que as fitas cassete passavam de mão em mão para que todos pudessem ter as músicas mais tocadas do momento e playlists exclusivos. Há quem sinta falta das históricas K7, contudo, há quem agradeça todos os dias o fato de a música digital chegar e acabar com os perrengues relacionados às antecessoras do CD.

Assim como nas fitas VHS, muitas pessoas guardam relíquias em fitas K7, que, com o tempo, vão se apagando ou se perdendo. Hoje você vai aprender a transferir o áudio das suas fitas antigas para o computador e digitalizar as músicas que embalaram grandes momentos da sua vida ou que guardam ocasiões que não podem se apagar.

O que você vai precisar
Um cabo P2/P2 ou;
Um RCA/P2;
Uma fita cassete;
Um tocador de fitas cassete;
Um software para gravação de áudio;
Placa de som;
Gravador de CD (opcional);
Espaço em disco.

O grande diferencial será o tipo de saída que seu tocador de fitas tem, já que ele pode ter saídas RCA (fig. 1) ou P2 (fig. 2). Sendo assim, o tipo de cabo que você vai precisar depende do tipo de saída do player.

Além disso, vale lembrar que ter um tocador e fitas em bom estado de conservação são fundamentais para o sucesso da transferência de áudio. No nosso caso, usamos um cabo P2/P2, ligando uma das saídas no plugue do fone de ouvido do nosso toca fitas.

Trabalhando com o que você tem

Há várias maneiras de realizar esta tarefa: com os cabos RCA, P2 e até aparelhos que fazem esta conversão quase que automaticamente, como o Ion Cassete Deck ou o Ion uRecord Vinyl & Cassete Ripper, que transformam o K7 em MP3 em instantes. Claro que é inviável adquirir produtos assim, a não ser que você tenha milhares de fitas para digitalizar. Do contrário, os cabos corretos, fitas e tocador de qualidade já bastam.

Como começar

Para começar a digitalizar suas fitas, é importante frisar que seu tocador precisa ter uma saída de áudio (Line Out), já que o som sairá do tocador e entrará no seu computador por intermédio da placa de som.

Se você for usar cabos RCA, preste atenção para ligar as cores entre os conectores corretamente; se for um usar um cabo P2, lembre-se de colocar na saída de áudio (saída dos fones de ouvido) ou se você tiver uma saída AUX, também pode usar.

No computador
A maioria dos computadores, especialmente os mais atuais, contam com placas de som com vários tipos de entradas, porém, para transferir o áudio das fitas para ela, você vai precisar da entrada analógica (conector azul).

Depois de conectar seu tocador à placa, é hora de ajustar as configurações de volume. Para isso, clique no atalho para os controles de volume localizado ao lado do relógio e verifique se está tudo funcionando corretamente.

Convertendo o analógico em digital
Se você conseguiu fazer com que o som do seu toca fitas fosse reproduzido, é hora de utilizar um software para gravar o som analógico da sua cassete e transformá-lo em digital no seu HD. Para isso, você vai precisar de um aplicativo que grave áudio.

Sendo assim, vamos usar o Audacity, pois ele oferece a opção de gravar o áudio executado no seu computador, além de diversas alternativas para edição — e o melhor: é gratuito. Desta maneira, faça o download do Audacity e instale-o no seu computador.
Está gravando?

Assim que conectar o tocador na placa de som e se certificar que ela reconheceu a conexão, basta abrir o Audacity e clicar em “Gravar” (círculo vermelho). Obviamente, você vai precisar ajustar o volume da gravação, pois certamente haverá distorções. Para saber se o volume é o adequado para que o som saia nítido na gravação, preste atenção nos níveis de volume, pois eles indicam se o som está adequado, muito alto ou muito baixo.

Na figura acima, é possível observar as variações volume. Inicialmente, a gravação estava muito alta, o que ocasionou a distorção no áudio. Em seguida, o volume foi diminuído, e os níveis foram se encaixando dentro das linhas cinza. Posteriormente, a música foi desligada e as linhas de volume ficaram estáveis.

Você pode controlar estas variações de volume no seu tocador de fitas ou com os controles de volume do Windows na barra “Line In”. Se você quiser saber mais sobre o funcionamento do Audacity, consulte o artigo “Audacity: como gravar sons”. Depois de acertar todos os detalhes, você pode editar suas faixas com o próprio Audacity. É possível inserir efeitos, criar mais faixas ou separá-las, extrair o som dos vocais e muito mais.

Se você acha que está tudo perfeito, é hora de salvar seus arquivos. Para isso, vá até o menu “Arquivo/Exportar”. Você pode inserir o nome do artista e da faixa, criar categorias para suas músicas e muito mais em uma janela como esta.

Há vários formatos disponíveis no Audacity, mas os mais comuns são o WAV e o MP3. Vale lembrar que, para salvar em MP3, você vai precisar baixar uma DLL. Isso é simples, pois, assim que você solicitar que a faixa seja salva em MP3, uma pequena janela será aberta. Desta forma, clique em "Baixar" para ser direcionado ao site de downloads.

Obviamente, há várias opções de aplicativos para realizar a mesma tarefa do Audacity. Além dele, você pode usar o MAGIX Audio Cleaning Lab (pago), Sony Sound Forge (pago), Wavosaur (gratuito) e o GTS Studio Recorder (gratuito).

Vale lembrar que o Windows disponibiliza uma ferramenta para captura de som chamada “Gravador de Som”, mas ela é muito básica, logo, não custa nada baixar um aplicativo mais completo. Contudo, se você não quer complicação ele é ideal.

Espaço em disco

É importante frisar que, além destes componentes, você também precisa ter espaço disponível no seu HD para gravar o áudio das fitas. Dependendo do formato de gravação, você vai precisar de mais ou menos espaço.

Por exemplo, se você gravar no formato WAV, cada um minuto de áudio equivale a 10 MB; já em MP3, um minuto corresponde a 1 MB. O próprio Audacity informa quanto tempo de gravação ele consegue armazenar de acordo com o espaço disponível. Estes valores eficam visíveis na parte inferior da janela do aplicativo.

Tudo digitalizado
Finalmente você digitalizou todas as suas fitas K7 e está com vários arquivos no PC ou todo o conteúdo de uma fita em um arquivo único. Se você preferir gravar as faixas em um arquivo só, sem problemas, mas, se por acaso se esqueceu deste detalhe, não se preocupe.

Você pode usar vários aplicativos que dividem arquivos de áudio. O próprio Audacity faz isso, mas há opções mais simples, como o Slice Audio File Splitter,DJ Audio Editor e o MP3 Cutter, todos gratuitos. É claro que você precisa verificar se o formato de arquivo que você gravou (MP3, WAV, OGG) é suportado pelo programa escolhido.

No Audacity, o recorte de áudio pode ser feito da seguinte maneira: selecione o trecho da música que você quer cortar e vá até o menu Editar/Separar > Criar novo. Pronto, você terá duas faixas na tela do Audacity, agora basta selecionar uma delas e Exportar com o nome correspondente.

O que fazer?

Depois de digitalizar sua coleção de fitas do Patinho Feio, a coletânea do Roberto Carlos que sua mãe tanto ama ou o som da sua banda, é possível utilizar os arquivos de áudio das mais diferentes formas. Uma delas é a gravação das faixas em um CD.

Para isso você vai precisar de um gravador de CDs e um aplicativo que realize esta função. Além disso, você pode incluir as faixas como trilha sonora em menus de DVDs, usar as músicas para criar e editar filmes no Movie Maker ou outro editor, além de ouvir em seu Player MP3, iPod ou DVD.

Confira abaixo um trecho de uma fita K7 digitalizada. Ao longo da gravação, o volume da música sofreu variações.

Morte e vida do K7
Depois de digitalizar suas K7, você acha que será fácil se livrar delas? Com certeza a tecnologia usada na gravação das fitas já foi superada há muito tempo, mas há quem afirme que elas já fazem parte da história das pessoas e que, assim como os discos de vinil, se tornaram objetos de coleção e saudosismo.

Pelo o que parece, as fitas ainda despertam a criatividade e interesse dos designers, geeks e antenados na moda, tendo em vista que o número de objetos que usam o tema “fita K7” ainda é muito popular e considerado como venda garantida. Confira abaixo alguns objetos inspirados nos cassetes e tire suas conclusões sobre a morte e vida delas.

Se você se interessou pelo assunto, aproveite enquanto as músicas estão gravando e confira mais alguns artigos relacionados ao tema.

Como baixar um site inteiro da Internet

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:37:00 -0300

Neste tutorial, iremos explicar como baixar um site inteiro da Internet diretamente para o PC, podendo editar o conteúdo em offline usando um editor HTML (por exemplo o Notepad++).

Na prática, são baixados todos os elementos relacionados ao website, como imagens, arquivos de estilo, etc. Dessa forma conseguirá visualizar as páginas no seu estado original.

Para isso, iremos usar o “HTTrack” um programa gratuito e disponível em português.

Como baixar um site inteiro da Internet

Comece por instalar o programa no seu computador. Como o programa é open Source, não possui uma assinatura digital, e como tal, é normal que o Windows exiba uma mensagem de aviso durante a instalação do programa tentando bloquear a sua instalação.

Algo que pode ser contornado clicando no link “mais opções”. Após a instalação indique o nome do seu projecto (um nome à sua escolha, não precisa ser igual ao nome do site).

Poderá igualmente definir o directório onde pretende guardar os arquivos do site. Por defeito, os arquivos são guardados no directório c:/meus sites.

Em seguida, defina a ação que pretende executar, neste caso, “Copiar site da web”, bem como o link da página que pretende baixar.

Agora, basta clicar no botão concluir e aguardar enquanto o Httrack baixa todos os elementos. Quando terminar, basta aceder ao diretório que definiu no início. Está pronto.

Guardar páginas de um site em PDF

Sabia que o Google Chrome permite guardar páginas Web em formato PDF? Para isso, basta aceder à página que pretende guardar e tocar no botão de opções (3 pontos). Para terminar, selecione a opção “Imprimir” (teclas de atalho CTRL+P) e no Destino (Impressora), escolha “Guardar como PDF”.

Como mudar o nome do autor no Blogger

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:36:00 -0300

Neste tutorial, iremos explicar como mudar o nome do autor no Blogger. O nome do autor pode estar associado ao seu perfil Blogger ou Google Plus (Mais).

Em ambos os casos, é possível fazer a alteração do nome do autor, embora quando existe uma associação ao perfil do Google Plus, o número de vezes que você pode mudar o nome, está limitado pelo próprio serviço.

Como mudar o nome do autor no Blogger

1º Método (perfil Blogger)

Comece por fazer login na sua conta Blogger e no topo da página clique no seu nome de usuário. Surgirá toda a informação do seu perfil Blogger, proceda à alteração do seu nome e salve as alterações.

2º Método (perfil Google Plus)

Comece por aceder ao seu perfil Google Plus e clique no seu nome. Digite o seu novo nome, lembrando que o Google limita o número de vezes que pode alterar esta informação, isto porque, nenhuma pessoa muda de nome várias vezes ao longo da vida.

3º Método (manualmente)

Comece por aceder à sua conta Blogger e selecione o blog que pretende editar. No menu de navegação, selecione a opção modelo – editar HTML.

Importante: antes de avançar, talvez seja uma boa ideia criar um backup do seu template, podendo reverter todas as alterações facilmente. Para mais detalhes consulte, como criar um backup do template Blogger.

Posicione o cursor do rato (mouse) no código fonte do template e pressione as teclas de atalho CTRL + F para ativar a pesquisa do navegador.

Procure o seguinte trecho de código :

<data:post.author/>

Substitua o trecho de código pelo nome que desejar.

Se o novo nome ainda não apareceu no seu blog, poderá ser necessário apagar os arquivos cache do navegador. Para isso, pressione as teclas de atalho CTRL + SHIFT + DEL (ou delete).

Confirme a exclusão dos dados e recarregue a página pressionando a tecla de atalho F5.

Como criar um Podcast (Grátuito)

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:34:00 -0300

Os podcasts são arquivos de áudio distribuídos pela Internet, usando um sistema RSS para se atualizar.

Qualquer utilizador pode criar um podcast, podendo abordar os mais variados assuntos (humor, politica, dia-a-dia, etc.).

Como criar um Podcast

A criação do podcast é bastante simples, embora seja um pouco trabalhoso ao inicio. No entanto, após a configuração inicial, a sua única preocupação será mesmo publicar os podcasts.

Em primeiro lugar, será necessário gravar o seu primeiro podcast. Para isso, você irá necessitar de um microfone (alguns computadores possuem microfone embutido), e um programa de gravação de áudio, por exemplo o Audacity.

Após a criação do podcast deverá hospedar o arquivo de áudio num servidor. Poderá usar o seu próprio servidor caso possua hospedagem própria, ou usar um serviço externo. No nosso exemplo, iremos usar o SoundCloud (se necessário crie uma conta gratuita no SoundCloud).

*Cuidado: Ao criar os seus podcasts é muito importante respeitar os direitos de autor, e como tal, não poderá usar música protegida. Em vez disso, utilize músicas livres de direitos de autor, por exemplo, usando as músicas fornecidas no seguinte link do YouTube: Músicas livres do YouTube.

Após hospedar o seu arquivo deverá embuti-lo nas suas páginas. No Soundcloud, clique no botão “Share” – “Embed Code”. Copie o código de incorporação e cole nas suas páginas.

É importante organizar os seus podcasts numa categoria do seu Website, pois dessa forma garante que o Feed RSS apenas publicará os podcasts. Para isso, crie uma categoria específica na edição do seu Website. Se utiliza o Blogger e precisar de ajuda, consulte seguinte tutorial:

Criar categorias no Blogger

Criar RSS para Podcast

Chegamos agora à última parte, em que teremos de criar um Feed RSS para os utilizadores possam subscrever o seu Podcast. Caso contrário, você apenas teria arquivos de áudio hospedados na Internet, e não um Podcast.

Para isso, iremos utilizar o serviço FeedBurner. Comece por fazer o login no FeedBurner com uma conta Google (caso não possua, crie uma gratuitamente). Na caixa de texto “Burn a feed right this instant.” digite o link da sua categoria (etiqueta) que organiza os podcasts, e marque a caixa de seleção da opção “I am a podcaster!”.

Clique em Next, para iniciar a criação do Feed. Use o link do Feed do seu Podcast para divulgar o seu canal.

Inserir o Podcast no iTunes

Uma das melhores formas de ganhar audiência, é inserindo o seu podcast no iTunes. Para isso, é recomendado que você possua o iTunes instalado no seu PC (mesmo que não possua produtos Apple), e seguir os procedimentos descritos na seguinte página: Podcast no iTunes.

Está pronto, agora é só começar a publicar os seus podcasts com regularidade. Boa sorte!

Programa para criar Templates para Blogger

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:32:00 -0300

Atualmente o Blogger já possui um Designer de Modelos, que permite criar um template único através da sua conta Blogger.

Caso pretenda mais informações dessa funcionalidade, consulte o seguinte tutorial: Criar templates Blogger – Designer de Modelos.

No entanto, existe outra solução para criar um template para o seu Blog (Blogger), bastando para isso usar o programa Artisteer.

Este programa permite criar templates para várias plataformas (WordPress, Drupal, Joomla, Blogger, etc.) com grande facilidade e sem conhecimentos de programação. Para facilitar a sua utilização, o Artisteer está disponível em Português.

O interface do programa é bastante agradável, bastante semelhante ao interface do Microsoft Office.

Criar templates Blogger

O Artisteer disponibiliza várias ferramentas (imagens de fundo, fontes, Menus, Botões, etc.) para personalizar o seu template.

Todas as opções de edição estão distribuídas no menu horizontal no topo do programa.

O programa possui ainda a opção “Sugerir” que pode pressionar sempre que necessitar de uma “ajudinha” extra.

Download Artisteer.

Quando terminar a criação do seu template, basta clicar no símbolo do Artisteer e selecionar “Exportar” – “Exportar Modelo”.

De salientar que o Artisteer hospeda automaticamente as imagens do seu template no ImageShack.

Contras do Artisteer

O único contra do Artisteer é deixar uma marca d’água “Trial” no seu template, que desaparece caso você adquira o programa.

Cabe ao leitor decidir se o Artisteer merece o seu investimento. Lembrámos o leitor que um template atrativo poderá ser o início de um blog muito lucrativo. Veja como ganhar dinheiro no Blog.

Hospedar uma página HTML no Firebase

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:29:00 -0300

Precisa de hospedar uma página HTML na Internet gratuitamente? Com o Firebase poderá hospedar a sua página e obter um serviço rápido, seguro e confiável. O serviço armazena a sua página em cache, usando servidores equipados com discos SSD, espalhados por todo o mundo numa rede CDN.

A versão gratuita possui 1 GB de espaço de hospedagem e 10 GB/mês de tráfego, sendo mais do que suficiente para hospedar as suas páginas. Caso pretenda um site estruturado, com várias páginas de navegação, talvez o Google Sites ou o WordPress.org se possam adequar melhor às suas necessidades.

Como hospedar uma página HTML no Firebase

Em primeiro lugar, será necessário baixar e instalar o Node.Js no seu computador. Poderá baixar o Node.js aqui: Página Oficial.

Em seguida, crie uma pasta no ambiente de trabalho do seu computador contendo a página que pretende hospedar no Firebase.

Altere o nome da página para Index.html e inicie a linha de comandos do seu computador. Para isso, basta pressionar as teclas de atalho CTRL+SHIFT+ESC para iniciar o Gestor de Tarefas e aceder ao menu Arquivo – Nova tarefa. Digite cmd.exe confirme a lançar a janela de comandos.

Agora, digite is seguintes comandos:

npm install -g firebase -tools
[pressione ENTER] firebase login [ENTER]

Será necessário fazer o login com a sua conta Google e autorizar o acesso aos dados necessários para continuar. Agora, aceda à pasta que contém a página HTML para hospedar no Firebase e inicie a linha de comandos. No Windows, isso poderá ser feito digitando cmd.exe na linha de endereço de diretório.

Agora digite:

firebase init

Surge um conjunto de opções do Firebase. Use as setas do teclado para selecionar a opção “Hosting” a tecla “Espaço” para confirmar.

Associe o seu projeto Firebase (se existir), caso contrario, poderá ser necessário criar um novo projeto. Para terminar, selecione as seguintes configurações:

Rewrite all urls - > N Already Exits - > N

Agora basta escrever na linha de comandos

Firebase deploy

Está pronto. A sua página já estará online, bastando aceder ao site do Firebase -> Ir para a consola – Selecionar o projeto Hosting.

Aqui encontrará o link para a sua página estática. Caso tenha dúvidas, poderá enviar o seu comentário.

Como obter um domínio grátis para Website (.tk)

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:26:00 -0300

Após termos explicado como hospedar um site no seu PC usando o WampServer, prosseguimos os nossos tutoriais explicando como obter um domínio grátis. Dessa forma, o leitor evita que os seus visitantes tenham de usar um IP para encontrar o seu website (por exemplo, http://192.168.xxx.xxx)

Como obter um domínio grátis

Para obter um domínio grátis iremos usar o serviço dot.tk. Durante os nossos testes o serviço mostrou-se bastante fiável, permitindo inclusivamente fazer alterações aos registros de DNS, que foram essenciais para colocar o nosso site WordPress (que hospedamos no PC) online a funcionar corretamente.

Comece por aceder ao site dot.tk e selecione o nome de domínio que pretende usar. Toque no botão “Go” para testar a disponibilidade. A extensão deste domínio gratuito é “.tk”, para obter os tradicionais “.com” ou “.org” será necessário comprar um domínio personalizado.

Após encontrar um domínio “livre” selecione que tipo de funcionalidade pretende usar. Poderá redirecionar o link para uma nova página, ou usar o serviço gratuito de DNS, que permite atribuir um domínio a um endereço de IP (neste caso do seu servidor).

Se optou por hospedar o site no PC, basta digitar o IP do seu servidor no campo “Endereço de IP”. Você poderá ainda definir o tempo máximo do registro do domínio (máximo 12 meses), que poderá renovar após este terminar.

Para concluir, será necessário criar uma conta gratuita. Se não quer perder tempo pode usar a sua conta Facebook para cadastrar no serviço.

Ao fazer o login você será redirecionado para o site “Freenom”. Se aceder “Domain” – My Domains, encontrará a opção “Manage Domain” que lhe permite gerir várias opções fulcrais do seu domínio.

Ficou com alguma dúvida? Envie o seu comentário explicando qual o problema que está enfrentando e qual o resultado final que pretende obter. Teremos todo o gosto em ajudar.

Como Criar Loja Virtual Grátis – Começar agora

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:24:00 -0300

A venda de produtos na Internet atingiu uma dimensão impressionante. E como tal, é importante aproveitar ao máximo esta “janela” de negócio para maximizar as suas vendas.

Para começar a vender produtos online, deverá criar uma loja virtual. A sua loja deve transmitir confiança ao cliente, possuindo um design atrativo e um sistema de pagamentos fácil e seguro de usar.

Criar loja virtual grátis

A forma mais simples de criar uma loja virtual gratuita é utilizando o Jimdo. Mas quais são as vantagens de usar o Jimdo?

O Jimdo possui todas as ferramentas essenciais para gerir seu comércio online;
Possui bons servidores para que a sua loja virtual esteja sempre online;
Possui vários templates prontos, dispensando a contratação de Webdesigners;
Os sites Jimdo estão otimizados para obter boas classificações nos motores de busca (Google, Bing, etc.);
É possível adicionar várias fotos dos produtos;
Rapidez na divulgação dos produtos;
Preço dos produtos em várias moedas mundiais;
Uma equipa de suporte pronta a responder às suas dúvidas;
Etc.

Para começar a sua loja virtual, basta preencher o seguinte formulário:

Como seria de esperar, a versão gratuita da loja virtual Jimdo possui algumas limitações. Você apenas poderá publicar 5 produtos e apenas um modo de pagamento.

Se gostou da experiência com o Jimdo, poderá adquirir um plano profissional. Dessa forma, você conseguirá ainda mais recursos para a sua loja, como por exemplo:

Domínio próprio (www.exemplo.com);
Possibilidade de adicionar mais produtos;
Mais métodos de pagamento para seus clientes (Transferência bancária, pagamento contra entrega, etc.);
Sem publicidade Jimdo;
Sistema de Newsletter (para divulgar novos produtos);
Estatísticas do site;
Login ocultado;
Mais opções de SEO;
Etc.

Para adquirir um plano comercial JimdoPro ou JimdoBusiness, você possui os seguintes métodos de pagamento:

Em Portugal: transferência bancária, cartões de crédito;
No Brasil: cartões de crédito e boleto bancário;

Vender os produtos no Facebook

Uma forma simples de aumentar as suas vendas é usar o Facebook para promover os seus produtos.

Para o ajudar na promoção, você poderá utilizar o aplicativo StoreYa, que consegue publicar os produtos exibidos no seu Website, diretamente na sua página de fãs do Facebook (automaticamente).

Para mais detalhes, consulte o seguinte tutorial: Como vender produtos no Facebook.

Alternativa…

Se pretende conhecer outra alternativa para criar a sua loja virtual, aceda ao nosso artigo: Como criar um site – Loja Virtual.

Como obter ícones grátis para seu Site (Font Awesome)

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:17:00 -0300

O Font Awesome é uma ferramenta gratuita, que lhe permite usar ícones (mais de 500) gratuitamente. À primeira vista, poderíamos pensar que estamos perante um tipo de letra (fonte), no entanto, o Font Awesome é muito mais que isso.

Na prática, o Font Awesome permite adicionar vários tipos de ícones diferentes usando a tag <i>, fornecendo ícones de redes sociais, pagamentos, aplicações Web, etc.

Você poderá ainda personalizar o tamanho dos ícones, aumentando o seu tamanho sem perda de qualidade.

Aqui no Montar um Blog já explicamos várias vezes como usar ícones e imagens gratuitamente. Claro que nem sempre encontramos a imagem (ou ícone) ideal, e temos de recorrer a bancos de imagens.

Como obter ícones grátis para seu Site? – Font Awesome

Existem duas formas de adicionar o Font Awesome no seu site / blog. A primeira, usando os arquivos do Font-Awesome hospedados através da MaxCDN (ideal se não possui um servidor para hospedar arquivos CSS).

E a segunda, baixando o Font Awesome para o seu computador, e fazendo o upload dos arquivos para o seu servidor.

1. Comece por adicionar a seguinte tag na secção </head> do seu site:


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Agora sempre que pretender usar um ícone basta usar a tag <i> (que em HTML é usada para apresentar texto em itálico). Com a respectiva class associada ao ícone. Aqui fica uma lista de classes que poderá usar para chamar os ícones: Lista de ícones Font Awesome.

2. Em alternativa, você poderá simplesmente baixar o Font Awesome para o seu computador e proceder ao upload do arquivo CSS (font-awesome.min.css) via FTP. Se necessário, poderá fazer o upload do arquivo para o Google Drive. Caso tenha dúvidas, consulte o seguinte tutorial: Como hospedar CSS no Google Drive (exemplo Blogger).

Onde comprar templates para Blogger?

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:06:00 -0300

O template possui um papel crucial no desempenho do seu blog, podendo fazer pender a balança para o sucesso ou fracasso. O template ideal deve ser otimizado para SEO, carregar rapidamente, garantir uma boa navegação, ser personalizável, e possuir todas as ferramentas necessárias.

Como tal, a escolha de um template para o seu blog não deve ser feita de forma leviana, especialmente se já possui um blog de sucesso.

Para garantir maiores probabilidades de sucesso, poderá comprar um template para Blogger.

Ao comprar um template está a “comprar” um produto otimizado, em que o autor é “obrigado” a corrigir falhas e a aplicar todas as funcionalidades disponíveis.

Onde comprar templates para blogger?

Onde posso comprar um template para Blogger? Um dos serviços mais credíveis é o ThemeForest.

Na verdade, o ThemeForest faz parte da empresa Envato, que disponibiliza praticamente todo o tipo de conteúdo para o seu Website, incluindo templates, plugins, fotografias, modelos 3d, etc.

Disclamer: o Site Montar um Blog não possui relação de afiliado com a Envato. Ao sugerir estes recursos, fazemos de livre vontade, sem receber qualquer valor em troca.

O ThemeForest possui vários templates à sua escolha. Após concluir a compra irá baixar o template para o seu computador. Antes de avançar, é recomendável fazer o backup do seu template atual.

Para isso, basta aceder ao menu “modelo” (ou Tema) e clicar no botão “efectuar cópia de segurança / Restaurar backup do template” – “Transferir tema”.

Agora, basta fazer o upload do novo template. Para isso, aceda ao menu “Modelo” – “efectuar cópia de segurança / Restaurar backup do template” – “Escolher arquivo” – enviar o arquivo do template (formato .xml) – “Carregar”.

No primeiro carregamento poderá ser necessário fazer algumas correções extras (como o posicionamento de widgets). Caso exista algum problema profundo, poderá reverter as alterações usando o template anterior, podendo fazer as correções em offline (ou usando um segundo blog).

Reinstalar o Google Analytics

Muito Importante! Ao trocar de template o script do Google Analytics irá desaparecer, e consequentemente o serviço deixará de contabilizar as visitas.

Para reinstalar o script consulte o seguinte tutorial: Como adicionar o Google Analytics no Blogger. Caso possua alguma dúvida, envie o seu comentário.

Como editar o template Mobile no Blogger

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:04:00 -0300

Possuir um template mobile no Blogger é essencial para melhorar a experiência de navegação e melhorar os rankings nos motores de busca. Os templates mobile são normalmente mais “leves”, promovendo um carregamento mais rápido das páginas.

Ao ativar a versão mobile, os usuários do Blogger deparam-se com impossibilidade de fazer modificações diretas no template. Essa limitação pode ser superada com um pequeno truque.

Editar template mobile no Blogger

1. Comece por entrar no Blogger e aceda ao menu “Modelo”. Certifique-se que o template Mobile está ativo, clicando no botão de opções (roda dentada) e ativando a opção “Sim. Mostrar o modelo para dispositivos móveis em dispositivos móveis.”.

2. Selecione o template “Personalizado” e clique no botão “Guardar” (ou Salvar).

3. Agora, clique no botão “Editar HTML” do template para computador para começar as edições. Repare que alguns widgets do Blogger possuem um atributo “mobile” que indica se esse widget deve ser carregado na versão mobile. Você poderá ainda adicionar esse atributo manualmente caso este não exista.

Mobile=”yes” – elemento carregado no template mobile;
Mobile=”no” – elemento excluído no mobile;
Mobile=”only” – exclusivo do template mobile;

Por exemplo, imagine que pretende carregar um elemento exclusivamente no template mobile. Deveria adicionar o código mobile=”only”:


<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>

Alternativa…

No Blogger você também pode adicionar “condições”, permitindo executar determinado código apenas em algumas páginas. Essas condições também podem ser usadas para executar “trechos” de código exclusivamente na versão mobile. Por exemplo:

<b:if cond="data:blog.isMobile">
<!– mostra o link do Blogger na versão Mobile–>
<a href="http://www.blogger.com">
Powered By Blogger
</a>
</b:if>

Personalizar o CSS:

A linguagem CSS permite adicionar estilos a diferentes elementos do seu blog. No Blogger você pode personalizar o CSS do template principal bem como do Template Mobile. Antes de avançar é importante criar um backup do seu template atual.

1. Em primeiro lugar, é importante substituir a tag “<body>” do seu template pela seguinte tag:

Agora, é só adicionar a class “.mobile” nos elementos que pretende personalizar. Por exemplo:

No template normal o texto encontra-se sublinhado:

.posts{ text-decoration: underline;}

No template mobile o texto não possui estilos:

.mobile .posts{ text-decoration: none;}

Salve as alterações e verifique se as alterações foram implementadas. Possui dúvidas? Envie o seu comentário e ajude-nos a completar o nosso tutorial com informação útil para os nossos leitores.

Como otimizar o Feedburner Email com 9 Dicas

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:02:00 -0300

Construir uma lista de subscritores por email, é essencial manter os seus leitores “ligados” ao site. Uma pequena pesquisa na Internet, revela vários serviços de “Email Marketing” capazes de enviar as “Newsletters” para os seus leitores (como o MailChimp ou o Aweber). No entanto, muitos usuários optam pelo Feedburner, um serviço gratuito e sem limite de utilização.

Como otimizar o Feedburner Email

À primeira vista, os emails enviados pelo Feedburner possuem um aspecto “simplista”. No entanto, com algumas dicas simples, é possível otimizar o FeedBurner Email gerando mais visitas e mais subscritores.

1. Criar um formulário de inscrição

Em primeiro lugar, é preciso concentrar a sua atenção em “ganhar subscritores”. A forma mais simples de ganhar subscritores para a sua lista de email, é através de um formulário de inscrição. O próprio Feedburner permite criar um formulário, bastando aceder ao menu “Publicize” – Email Subscriptions – Subscription Management.

Altere o idioma do formulário para português e copie o código de incorporação. Poderá adicionar o formulário na parte lateral do seu site.

2. Otimizar o horário de entrega

O horário de entrega também é fulcral para garantir que os seus emails são visualizados. Para isso, aceda ao menu “Publicize” – “Delivery Options”. Selecione o horário de entrega dos seus emails.

Qual é o melhor horário de envio? Se você possui uma página de fãs do Facebook (deveria ter), poderá ter acesso às estatísticas do seu público, nomeadamente o horário em que os seus fãs estão “online”. Esse pode ser um bom “indicio” de qual será o melhor horário para enviar os seus emails. Para mais detalhes, consulte o nosso tutorial: Qual o melhor horário para publicar no Facebook.

3. Adicionar Logótipo

Outro aspecto fundamental é adicionar o logótipo do seu site no email. Dessa forma, conseguirá reforçar a sua imagem de marca perante os seus leitores, bem como conseguir um link directo para a página inicial do seu site.

Como os emails do Feedburner são puramente texto, possuir uma imagem dará outra vida (e interesse) à mensagem. Para isso, basta aceder ao menu “Publicize” – “Delivery Options” – “Email Branding”. Adicione o link da imagem (que já deve estar hospedada online) no campo “Logo URL”.

E se eu não possuir um logótipo? Existem diversos serviços online capaz de o ajudar a criar o seu logótipo em poucos minutos. Para mais detalhes consulte o seguinte tutorial: Como criar um logótipo.

4. Personalizar o texto de inscrição

Outro aspecto (muitas vezes esquecido), é o texto que surge no email de confirmação da inscrição. Ou seja, após o leitor adicionar o email na sua lista, é necessário clicar no link de confirmação que recebe por email.

Por defeito, o texto recebido pelo leitor está em “Inglês”. O que pode ser uma enorme barreira a nível “linguístico”, bem como criar “desconfiança” no leitor sobre a segurança do seu conteúdo. Para adicionar um conteúdo personalizado, aceda ao menu “Publicize” – “Email Subscriptions” – “Communication Preferences” – “Confirmation Email Body”.

5. Formate o texto do email

O Feedburner permite formatar o texto do seu email, através da alteração do tipo de letra e o tamanho de fonte. Dessa forma, você poderá melhorar o visual da sua mensagem, bem como tornar o seu email mais fácil de ler.

6. Ativar a opção “Sumário”

Outra recomendação que podemos fazer, é ativar a opção “Sumário”. Porquê? Primeiro, porque você pretende receber visitas, se oferecer o conteúdo completo, deixará de existir interesse em visitar a página. Segundo, porque o seu conteúdo irá aparecer “incompleto” por email (sem imagens, sem scripts, etc.), não refletindo toda a sua qualidade.

Para ativar o sumário, basta aceder ao menu “Optimize” – “Summary Burner”. Digite o número de caracteres que devem ser usados no “sumário”, bem como um texto de rodapé capaz de chamar a atenção do leitor.

7. Adicionar links de partilha

As redes sociais são essenciais na divulgação do seu conteúdo. Como tal, é do maior interesse adicionar links de partilha diretamente no email do enviado pelo FeedBurner. Para isso, basta aceder ao menu “Optimize” do Feedburner e selecione a opção “FeedFlare”.

Selecione os serviços de partilha (redes sociais) que pretende adicionar. Você poderá selecionar por partilhar o link do Feed ou o link do site (recomendado).

8. Usar título do post

Outra dica interessante (sugerida pelo próprio Feedburner), é usar o título do seu post como “assunto” no email. Para isso, basta aceder ao menu “Publicize” – “Delivery Options” – “Email Branding”.

Altere o campo “Email Subject/Title:” para “${latestItemTitle}” (sem aspas).

9. Se usa Adsense…cuidado!

Se você adiciona “scripts” do Google Adsense nos seus posts (garantindo um melhor posicionamento), é importante garantir que o script não irá atrapalhar a exibição do email. O Feedburner não exibe anúncios, nem converte os códigos que possam surgir. Portanto, se você adicionar um script do Adsense juntamente com o texto que irá ser enviado, ele surgirá assim:

Criar logotipo grátis para Website/Blog

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:01:00 -0300

Criar um logotipo é essencial para “cimentar” a sua posição na Internet, associando uma imagem à sua empresa ou Website.

Dessa forma, você poderá ser mais facilmente reconhecido nas redes sociais, anúncios, publicações, notícias, etc. Atualmente existem diversos serviços que permitem criar um logotipo grátis.

No entanto, usando apenas um editor de imagens (por exemplo, o Gimp) e um serviço de imagens gratuitas para uso comercial (conheça algumas soluções), poderá criar um logotipo bastante aceitável.

Caso pretenda um serviço capaz de gerar um logotipo em poucos segundos, recomendamos os seguintes serviços descritos.

Criar logotipo grátis

1. Logo Factory Web

O Logo Factory Web permite criar logotipos 100% gratuitos. O seu funcionamento é bastante simples e intuitivo. Em primeiro lugar, clique no link “Select your Image”, para adicionar uma imagem ao seu projeto.

Em seguida, digite o nome da sua empresa / website, e personalize o tipo de letra que irá utilizar.

Por fim, clique na seta verde para avançar (3 Step). Digite o seu email, para receber o código de download do logotipo. Consulte a caixa de entrada do seu email, em busca mensagem do Logo Factory Web. Copie o código presente no email, e confirme na janela de criação do logotipo.

O download do seu logotipo, inicia automaticamente.

2. CoolText

Outra solução gratuita para criar um logotipo é o CoolText. Com este serviço, você poderá criar textos animados que poderá utilizar para criar o seu logotipo.

O CoolText não fornece imagens de apresentação, mas é uma ferramenta muito interessante, que certamente lhe dará jeito, mais cedo ou mais tarde. Aproveite as capacidades desta ferramenta, e dê asas à sua imaginação.

Exportar código HTML do Notepad++ para documento de Texto

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 12:00:00 -0300

Precisa de exportar código HTML do seu projecto Notepad++ para um documento de texto (do Word ou PDF)? Na prática, será possível manter toda a formatação de cores e estilo de letra.

Exportar código HTML do Notepad++

Se utiliza o Windows 10, poderá exportar o seu código para PDF usando a funcionalidade “Microsoft Print to PDF”. Na prática, basta aceder ao menu “Ficheiro” (ou Arquivo) e selecionar “Imprimir”. Em seguida, selecione a impressora “Microsoft print to PDF” e indique o nome que pretende atribuir ao arquivo. Está pronto.

E se eu não possuir o Windows 10?

Em alternativa, poderá usar o programa “PDF Creator“. O modo de funcionamento é bastante semelhante, criando uma impressora “fictícia” que converte os arquivos para PDF. A grande vantagem é que permite a criação de arquivos PDF usando praticamente todos os programas.

Exportar Documento usando o NppExporter

O Notepad++ pode ser equipado com dezenas de plugins gratuitos para aumentar as suas funcionalidades. Na prática, basta aceder ao menu “Plugins” e procurar o NppExporter.

Caso o plugin ainda não se encontre instalado basta aceder ao menu “Plugins” – Plugins Manager – Show Plugins Manager e proceder à instalação do respectivo plugin.

Para terminar, basta aceder às opções do NppExporter e selecionar “Copy HTML to Clipboard”.

Agora, aceda ao editor de texto que pretende usar (por exemplo, o Word) e cole o respectivo conteúdo (teclas de atalho CTRL+V). Caso tenha dúvidas, basta enviar o seu comentário ou aceder ao nosso fórum.

Como usar a Font Awesome (com exemplos)

noreply@blogger.com (Nauan) — Thu, 6 Apr 2017 11:59:00 -0300

A Font Awesome é um conjunto de ícones altamente personalizável, que pode ser usada gratuitamente (mesmo para uso comercial). Para começar a usar a Font Awesome, basta adicionar 2 linhas de código nas suas páginas.

Atualmente, a Font Awesome disponibiliza mais de 600 ícones. A nossa primeira preocupação, foi o impacto que este recurso poderia ter na velocidade da página.

Nos nossos testes (usando a MaxCDN) a Font Awesome adicionou “apenas” 65.1KB, que foram carregados em 27ms (um dos elementos que carregou mais rápido). Uma agradável surpresa, tendo em conta as enormes potencialidades deste recurso.

Como usar a Font Awesome?

A Font Awesome permite introduzir os ícones desejados através das tags <i> ou <span>. Para começar, basta adicionar o código de incorporação na seção “<head>” das suas páginas. Atualmente, a Font Awesome é distribuído através de dois CDN de elevada qualidade (MaxCDN e CloudFare). Escolha qual o serviço que pretende usar nas suas páginas:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Exemplos Font Awesome

Após a instalação, já poderá usar os ícones livremente. Para usar um determinado ícone, será necessário conhecer o “código” de identificação. Poderá consultar a lista completa aqui: Ícones Font Awesome.

Tal como já foi referido, os ícones são “chamados” usando a tag “i”. No entanto, podem ser personalizados como se fossem um tipo de letra (Fonte). Por exemplo:

<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-official" style="font-size:48px;"></i>
<i class="fa fa-facebook-official" style="font-size:80px;color:#8b9dc3"></i>

Resultado:

Criar uma lista com o Font Awesome:

Os leitores adoram as listas, elas permitem uma melhor organização e visualização da informação. Dê outra vida às suas listas em HTML, usando ícones personalizados. Aqui fica um exemplo:

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Quadrado</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Lista de ícones</li> <li><i class="fa-li fa fa-square"></i>Lista de ícones</li> <li><i class="fa-li fa fa-hand-o-right"></i>Lista de ícones</li> <li><i class="fa-li fa fa-plus-square"></i>Lista de ícones</li> <li><i class="fa-li fa fa-arrow-circle-right"></i>Lista de ícones</li> <li><i class="fa-li fa fa-caret-right"></i>Lista de ícones</li> <li><i class="fa-li fa fa-star"></i>Lista de ícones</li> <li><i class="fa-li fa fa-chevron-right"></i>Lista de ícones</li> </ul>

Resultado:

Quadrado
Lista de ícones
Lista de ícones
Lista de ícones
Lista de ícones
Lista de ícones
Lista de ícones
Lista de ícones
Lista de ícones

Pretende um menu personalizado sem gastar dinheiro?

O Font Awesome também pode ser usado em menus CSS, proporcionando um aspecto bastante profissional. O método de funcionamento é exactamente igual, bastando usar os elementos <i> ou <span>.

Caso tenha alguma dúvida, envie o seu comentário.