Hdblog

Facebook Messenger para Windows não receberá mais suporte do Facebook

2014-02-26T18:33:00.000-03:00

Há cerca de 1 ano e 6 meses atrás, eu publiquei aqui no blog um passo-a-passo explicando como baixar e instalar o programa Facebook Messenger para Windows, que foi criado pela própria equipe do Facebook com o intuito de permitir que os usuários de sua rede social pudessem conversar com seus contatos sem precisar acessar o site através de um navegador. Contudo, no dia 03.03.2014, esse programa não receberá mais suporte do Facebook e deixará de funcionar.

Eu acredito que a decisão de descontinuar o suporte, ao mensageiro para windows, tenha sido tomada pelo fato de que, hoje em dia, a maior parte do acesso à rede social é feita através de dispositivos móveis. E com a recente compra do aplicativo WhatsApp Messenger, pela bagatela de 19 bilhões de dólares, pelo Facebook, é de se esperar que eles estejam focando na comunicação móbile.

Aviso do Facebook diretamente no programa

Devo confessar que o programa era útil pra mim, pois gostava do fato de não ter que deixar o navegador aberto, ou ter que ficar visitando a rede social, para poder conversar com meus contatos e/ou visualizar notificações sobre pedidos de amizade e atualizações da linha do tempo. Enfim, não há mais nada a fazer. Se você tem o programa instalado em seu computador, execute o processo padrão (Iniciar > Painel de Controle > Desinstalar um programa > Facebook Messenger) de desinstalação para removê-lo.

O que você achou dessa decisão? Usava o programa? Deixe sua opinião!

Saiba qual é a diferença entre layout móbile e responsivo

2014-01-22T19:12:00.000-02:00

Se alguém te perguntar se o template que aparece no seu blog, quando ele é acessado através de um smartphone ou tablet, é "responsivo" ou "móbile", você saberia responder? Se pra você esses dois termos representam a mesma coisa, saiba que existe uma bela diferença entre eles — e não é apenas na escrita! Atendendo ao pedido da leitora Sybylla, dona do blog Momentum Saga, nesse artigo falaremos sobre a diferença entre um template responsivo e um template móbile.

Embora haja diferença entre os dois, a finalidade é a mesma: fornecer recursos e acesso facilitado aos usuários que acessam um site/blog através de um dispositivo que não seja o desktop (computador convencional), como, por exemplo, os famosos smartphones e tablets. Contudo a finalidade é a única coisa que eles possuem em comum, pois as técnicas utilizadas para cada um são totalmente diferentes. Confira abaixo uma explicação detalhada de cada uma.

Características de um template móbile

Se você possui uma smartphone, você já deve ter notado que ao acessar alguns sites através dele o endereço aparece com a letra "M" (ou a palavra "mobile") no começo. Por exemplo, ao acessar o site do Facebook através do computador o endereço é: https://www.facebook.com/, e ao acessar a rede social através de um dispositivo móbile o endereço passa a ser: https://m.facebook.com/, conforme ilustra a imagem abaixo.

Versão móbile e para desktop do site Facebook — Clique para ampliar

Já a plataforma de microblogs Twitter, quando acessada através de um computador possui o endereço: https://twitter.com/, porém, quando acessada através de um smartphone ou tablet, passa a ter o seguinte endereço: https://mobile.twitter.com/.

Versão móbile e para desktop do site Twitter — Clique para ampliar

Essa mudança na URL (endereço) do blog caracteriza um template móbile. Ou seja, o blog possui dois endereços: o principal e o móbile. Sendo o endereço móbile um subdomínio do endereço principal do blog. Sendo assim, os desenvolvedores do blog utilizam arquivos para redirecionar o leitor para o endereço móbile quando é detectado que ele está utilizando um dispositivo que não seja o desktop.

O fato de haver dois endereços para o blog (o domínio principal e o subdomínio), possibilita que os desenvolvedores criem templates específicos para cada um deles, ou seja, eles criam um template para ser utilizado quando o leitor acessa o site através de um computador, e criam um template mais leve e com menos recursos (ou recursos adaptados) para quem acessa o site com um dispositivo móbile — uma vez que a Internet nesses aparelhos é bem mais lenta.

Características de um template responsivo

Diferente do template móbile, que é aplicado a um subdomínio do site e altera a URL do mesmo, os templates responsivos são criados para adaptarem o template principal às pequenas telas dos dispositivos móbiles, escondendo sidebars (barras laterais), alterando a posição de elementos do site e etc. conforme o tamanho da tela aumenta ou diminui. Confira um exemplo de layout responsivo no vídeo abaixo.

Note que conforme o espaço para o blog no navegador é reduzido (para simular uma tela pequena de um smartphone) os elementos do blog vão mudando de posição, elementos desaparecem, os menus mudam de formato e etc. E toda essa mudança é aplicada no template principal, sem redirecionamento para outro endereço ou aplicação de uma template secundário.

Toda essa mudança no template é realizada através de códigos CSS específicos para esse tipo de mudança, que são aplicados somente quando o tamanho da tela atinge o tamanho que você especificou. Sendo assim, você pode aplicar códigos CSS específicos a serem utilizados em diversos tamanhos de tela, permitindo que em certos tamanhos você mostre a sidebar no rodapé do blog e em outros tamanhos você a esconda definitivamente, por exemplo.

O que escolher: template móbile ou responsivo?

Você deve estar se perguntando qual dessas técnicas é a melhor escolha para um site/blog, certo? Porém, a resposta para essa pergunta é um tanto quanto particular. Leve em consideração que para ter um template móbile, você terá que comprar um domínio principal para seu blog e criar um subdomínio para ele (haverá o gasto de manter o seu domínio ativo).

Para templates móbiles, também haverá o trabalho de criar um template específico para o seu subdomínio (exige conhecimento em criação de templates), e de manter os dois templates sempre atualizados. E vale lembrar que nem todas as plataforma de blog permitem que você configure subdomínios e faça certos tipos de redirecionamento (o Blogger, por exemplo, não permite). Em contrapartida, um endereço móbile passa um profissionalismo maior para seu site/blog.

Já os templates responsivos não precisam de gastos para serem criados, basta que você utilize códigos CSS para ocultar, mostrar, alterar o posicionamento e etc. dos elementos que você possui em seu blog. Mas, em contrapartida, é necessário que você possua conhecimentos em HTML e CSS, e conheça a estrutura do seu blog para saber o que você pode alterar ou não, e como você pode alterar um elemento.

Sabendo dessas coisas fica a critério de cada um optar por um template móbile ou responsivo.

Gostou do artigo? Tem algo a acrescentar? Participe postando um comentário!

Saiba como colocar um badge (botão) do Instagram em seu blog

2014-01-21T17:36:00.000-02:00

O Instagram é, sem dúvidas, um dos aplicativos/serviços mais utilizados por quem possui um smartphone. O serviço permite que seus usuários tirem fotos, apliquem filtros e as compartilhem com seus seguidores no serviço ou em suas redes sociais. E se você possui um blog, a equipe do Instagram preparou alguns botões para ajudar você na divulgação do seu perfil. Confira nesse artigo como implantar tais botões.

1. Primeiramente, você deverá obter o código de incorporação do botão, associado ao seu perfil no serviço. Para isso, acesse o endereço: http://instagram.com/, clique no botão "Entrar" e faça login em sua conta utilizando seu nome de usuário e senha.

2. Após feito login, clique na sua foto de perfil, localizada no canto superior direito da página e, em seguida, escolha a opção "Atalhos", conforme ilustra a imagem abaixo.

3. Após acessar a opção descrita você verá cinco botões disponíveis para uso na seção "Select your badge". Clique sobre qualquer um deles para que o código de incorporação seja gerado. Conforme ilustra a imagem abaixo.

4. A partir desse momento, basta que você copie o código que foi gerado e cole-o dentro de um gadget do tipo HTML/JavaScript ou em qualquer outra parte do seu template/blog que aceite HTML e salvar.

O que achou desse artigo? Participe postando um comentário!

[Utilidade] - Saiba como alterar a letra de uma unidade de disco no Windows

2013-07-22T22:45:00.000-03:00

Olá querido leitor, no artigo de hoje eu mostrarei a você como alterar a letra de uma unidade de disco (hd externo, pen drive etc.), para qualquer outra que você quiser — e que esteja disponível, é claro. Eu costumo instalar todos os meus programas no meu HD Externo, e deixo apenas o atalho dos programas na área de trabalho do computador. Sendo assim, se meu HD Externo não estiver conectado ao computador, os atalhos não funcionam, não sendo possível acessar os programas.

Pelo fato de instalar os programas no HD Externo, os atalhos ficam associados à letra dele. Por exemplo, a letra do meu HD Externo é "E:", então, quando eu crio um atalho para algum programa que esteja instalado nele, o caminho do atalho será: "E:\Nome da pasta\Nome do programa.exe". Portanto, é importante que meu HD Externo possua sempre essa letra, pois se ela for alterada, quando eu clicar no atalho do programa o computador não encontrará o caminho para abri-lo.

Ao conectar uma unidade de disco no computador o windows associa uma letra automaticamente à ela. Quando você conecta várias unidades de disco no seu computador, pode acontecer de a letra de alguma delas ser alterada, e caso você, assim como eu, precise que uma delas tenha sempre a mesma letra, isso poderá te atrapalhar um pouco. Então, abaixo você poderá conferir como alterar a letra da sua unidade de disco para a que você precisa.

Alterando a letra da unidade pela interface do Windows

A opção de alterar a letra da unidade de disco utilizando a interface do Windows, por ser uma opção muito simples e intuitiva, é extremamente recomendada. Não há necessidade de ter conhecimentos avançados. Confira o passo-a-passo abaixo.

NOTA: para esse artigo eu utilizarei o Windows 7 Start Edition, mas acredito que o procedimento seja o mesmo (ou semelhante) para quem usa outras versões do Sistema Operacional. Caso não encontre as opções citadas abaixo, tente a alterar a letra através da opção Prompt de Comando, disponível no final do artigo.

1. Clique no menu Iniciar e, em seguida, digite no campo de busca a frase "Gerenciamento do computador", como ilustra a imagem abaixo. Clique na opção que aparecer.

2. Na estrutura de pastas, disponível no painel esquerdo, localize a opção Repositório. Em seguida, clique na opção Gerenciamento de disco, como ilustra a imagem abaixo.

3. Feito o clique você verá todas as unidades de disco que você possuí no computador, incluído os dispositivos (hd externo, pen drives etc.) que estão atualmente conectados. Clique sobre a unidade de disco que você quer alterar a letra, e escolha a opção "Alterar letra de unidade e caminho...".

4. Uma janela surgirá. Nela você verá a letra da unidade que você escolheu. Selecione novamente a unidade e clique no botão Alterar.

4. Uma nova janela aparecerá. Nessa nova janela, a opção "Atribuir a seguinte letra de unidade" já estará marcada por padrão, e à frente dela haverá um pequeno botão com a letra que está atualmente atribuída à sua unidade de disco. Clique nesse pequeno botão, escolha uma nova letra para sua unidade e clique em OK.

6. Após isso, provavelmente será mostrado um alerta com a seguinte mensagem: "Talvez alguns programas que usam letras de unidade não sejam executados corretamente. Deseja continuar?". Clique em "Sim" para prosseguir com a alteração da letra.

7. A mensagem será fechada e o windows fará a alteração da letra da sua unidade de disco (pode demorar alguns segundo). Após a conclusão da alteração, você poderá visualizar que a letra da unidade terá sido alterada. Pronto, agora você já pode voltar a usar seu dispositivo com a letra desejada.

Alterando a letra da unidade pelo Prompt de Comando (cmd)

Caso você não tenha conseguido fazer a alteração pela interface do windows — o que eu duvido —, não tenha encontrado as opções que foram mostradas acima e/ou queira conhecer uma forma diferente de fazer a alteração, você poderá seguir os passos abaixo para fazer a alteração pelo Prompt de Comando.

1. Clique no menu Iniciar e, em seguida, digite no campo de busca a frase "cmd" (ou vá em: Iniciar > Todos os programas > Acessórios > Prompt de Comando). Clique com o botão direito do mouse sobre uma das duas opções e escolha a opção "Executar como administrador", em seguida, na mensagem que aparecer, clique no botão "Sim". Uma janela como a mostrada abaixo será mostrada.

2. Digite (em letras minúsculas) o seguinte comando: diskpart, e pressione Enter. A janela do seu prompt de comando mostrara algumas informações e ficará semelhante a mostrada abaixo.

3. Agora digite o comando: list volume, e pressione Enter. O prompt irá listar todas as unidades de disco que você possui conectadas em seu computador. Note que, nas informações que aparecerem, cada unidade de disco possuirá um número de volume (veja o destaque na imagem abaixo), você deverá visualizar qual desses volumes é o dispositivo que você quer alterar a letra. No meu caso é o Volume 2, também facilmente percebido pelo Rótulo "HD Pessoal".

4. Após identificar o volume do seu dispositivo, digite o seguinte comando: select volume X, onde "X" deve ser substituído pelo número do volume que você escolheu. No meu caso eu vou digitar "select volume 2", para selecionar meu HD Externo. Após digitado o comando, você verá a mensagem "O volume X está selecionado.", como ilustra a imagem abaixo.

5. Com o seu volume selecionado, digite o comando: assign letter=X, onde "X" deve ser substituído pela nova letra que você quer para seu dispositivo. No meu caso, alterarei a letra do meu HD Pessoal para "H", portanto, digitarei "assign letter=H". Pressione Enter para confirmar o comando e, se tudo ocorreu de maneira correta, você verá no seu prompt de comando a mensagem "DiskPart atribuiu com êxito a letra de unidade ou o ponto de montagem.", como ilustra a imagem abaixo.

Pronto, agora é só fechar o prompt de comando e curtir o seu dispositivo com a letra desejada.

O que achou desse artigo? Participe postando um comentário!

[Utilidade] - Passo-a-passo para resgatar os créditos da Nota Fiscal Paulista

2013-05-19T15:15:00.001-03:00

No artigo de hoje, eu mostrarei a você como resgatar os créditos que são gerados para os consumidores que exigem a inclusão do CPF na nota/cupom fiscal no momento de uma compra, referente ao programa da Nota Fiscal Paulista. Caso você não saiba como funciona esse programa, você poderá acessar a página de Perguntas Frequentes do site da Secretaria da Fazenda, do Governo do Estado de São Paulo.

Resgatando os créditos da Nota Fiscal Paulista

A solicitação de resgate dos créditos gerados pelo programa Nota Fiscal Paulista (NFP), é bastante simples e intuitivo. Em alguns minutos você poderá solicitar o resgate de seus créditos para sua conta corrente ou poupança, ou o abatimento do valor do seu IPVA (caso disponível). Confira abaixo o passo-a-passo para fazer a solicitação de resgate.

1. Primeiramente, acesse o site da Secretaria da Fazenda, no seguinte endereço: http://www.nfp.fazenda.sp.gov.br.

2. No painel disponível à esquerda, clique sobre a opção Acesso ao Sistema, como mostra a imagem abaixo.

3. Você será direcionado para a página de login do sistema, como mostra a imagem abaixo. Preencha os campos solicitados (CPF/CNPJ e Senha), e escolha o seu tipo de usuário — no meu caso é Consumidor. Em seguida, clique no botão Acessar para concluir o acesso ao sistema.

4. Após ter inserido suas informações, você se deparará com a mensagem ilustrada na imagem abaixo — essa mensagem só aparecerá caso você nunca tenha feito um resgate —, basta clicar no botão Continuar para prosseguir com o acesso ao sistema.

Clique na imagem para ampliar

5. Concluído o acesso ao sistema, vá até o menu Conta Corrente, e clique sobre a opção Utilizar Créditos, como mostra a imagem abaixo.

6. Em seguida, será mostrado as opções disponíveis para você efetuar o resgate dos seus créditos. São elas: Crédito em conta corrente, Crédito em conta poupança, e Quitação ou abatimento do IPVA. Escolha uma das opções de resgate.

INFORMAÇÃO: é importante que você saiba que a opção de quitação ou abatimento do valor do IPVA, só fica disponível no mês de Outubro, portanto, caso você esteja acessando o sistema fora desse mês, tal opção aparecerá desabilitada para escolha. E as opções de conta corrente e poupança só aceitam resgates acima de R$ 25,00 (vinte e cinco reais), portanto, caso não haja créditos suficientes você não poderá fazer o resgate até acumular esse valor.

Para este tutorial — e para o meu primeiro resgate — eu escolhi a opção de "Crédito em Conta Corrente". Escolhendo essa opção, uma mensagem como a ilustrada na imagem abaixo será mostrada. Clique em OK.

7. Nesse momento, você será questionado sobre as informações do banco aonde deseja receber os créditos da NFP, como mostra a imagem abaixo.

É importante que a conta corrente ou poupança para a qual você transferirá o valor, esteja em seu nome. Preencha os campos solicitados, lembrando que caso a sua agência não possua o dígito verificador, você deverá inserir o número zero (0), do contrário você receberá o erro mostrado na imagem abaixo, depois clique no botão Confirmar.

8. Após esse processo, você deverá visualizar uma mensagem de confirmação de transferência. Confira seus dados, os dados da sua conta e agência e o valor a ser transferido. Caso esteja tudo certo, clique no botão Efetuar Transferência, como ilustra a imagem abaixo.

9. Após ter confirmado a transferência do valor de seus créditos para sua conta, você deverá visualizar a mensagem de sucesso ilustrada abaixo.

Na mensagem você poderá ver uma estimativa do prazo para que o crédito ocorra em sua conta bancária. No site da Secretaria da Fazenda há a informação de que os créditos são lançados na quarta-feira da semana seguinte à solicitação, ou seja, após solicitar o resgate, o crédito aparecerá na sua conta na quarta-feira da semana seguinte.

Como você pode ver na imagem acima, a estimativa do prazo para ocorrer o crédito em minha conta bancária era o dia 15/05/2013. Para essa primeira transferência o prazo foi cumprido com exatidão, como você pode ver na ilustração do meu extrato logo abaixo. Note que a transferência tem a identificação "SEC DA FAZEN", que informa que o crédito foi transferido pela Secretaria da Fazenda.

Pronto. Caso você tenha feito tudo certinho, seu resgate terá sido solicitado e o crédito será lançado na sua conta até a quarta-feira da semana seguinte à sua solicitação. Num próximo artigo eu mostrarei as opções que são liberadas após a conclusão de seu primeiro resgate, como é informado no final da imagem "Sucesso na operação" disponível logo acima.

Atualização — 18.01.2014 às 14h44
Após publicar esse artigo, que tem a finalidade apenas de demonstrar como realizar o resgate dos créditos do programa Nota Fiscal Paulista, diversos leitores têm entrado em contato através dos comentários, e por e-mail, com dúvidas sobre questões relacionadas a cadastro e recursos do sistema.

Questões essas que eu não tenho recursos para responder de uma forma muito efetiva. Portanto, afim de agilizar a resposta à esses tipos de questões, abaixo postarei uma espécie de FAQ com as dúvidas mais frequentes que me são enviadas. Porém, muitas delas eu não tenho como resolver.

1. Você, Igor, possui algum tipo de vínculo com a Secretaria da Fazenda?
Não, eu não possuo nenhum tipo de vínculo com a Secretaria da Fazenda.

2. Com que autoridade você responde às perguntas dos leitores sobre esse assunto?
Não possuo nenhum tipo de autoridade para fornecer instruções que sobreponham as fornecidas pela Secretaria da Fazenda. Minhas respostas são fornecidas com base em meus conhecimentos e deduções, visando apenas tentar ajudar o leitor.

3. Faz algum tempo que forneço meu CPF e tenho poucos créditos, por quê?
Tome as seguintes precauções e fique atento aos seguintes detalhes: confira sempre a nota/cupom fiscal para ter certeza de que foi emitido com o CPF correto, pois em alguns casos pode acontecer de o "caixa" digitar um número errado e os créditos irem para outro CPF.

Sempre guarde as notas/cupons fiscais, pelo menos até que apareçam no sistema da nota fiscal paulista, pois alguns estabelecimentos podem acabar não lançando os créditos, e você tendo os documentos fiscais em mãos poderá abrir uma reclamação junto a Secretaria da Fazenda, denunciando o estabelecimento e requerendo seus créditos. E note também que nem todas as mercadorias que você compra geram créditos.

4. Posso resgatar os créditos para conta corrente/poupança de outra pessoa?
Não. O resgate deve ser feito para uma conta corrente/poupança que pertença ao CPF (pessoa) que possui direito aos créditos.

5. Posso resgatar para minha conta poupança vinculada à minha conta corrente?
Não. O resgate para conta poupança deve ser feito para uma conta com identificação própria. Ou seja, não deve ser feito o resgate para as contas poupanças que são vinculadas à conta corrente, como os casos em que o número da conta corrente é: 01234-5 e o da conta poupança é 01234-5/600. Você deve abrir uma conta poupança sem qualquer vinculo com conta corrente.

6. A opção "Utilizar Créditos" não está disponível para mim, por quê?
Não possuo acesso ao cadastro dos usuários do programa Nota Fiscal Paulista, portanto, eu não tenho como saber o motivo do seu cadastro estar com essa opção desabilitada. Os motivos podem variar de usuário para usuário. Por favor, entre em contato com Secretaria da Fazenda para obter esse tipo de informação.

7. Fiz o resgate mas o valor não foi creditado em minha conta, por quê?
No site da Secretaria da Fazenda há a informação de que os créditos são lançados na conta sempre na quarta-feira da semana seguinte à solicitação do resgate, ou seja, após solicitar o resgate, o crédito aparecerá na sua conta na quarta-feira da semana seguinte.

Contudo, verifique o seguinte: você deve ter no mínimo R$ 25,00 de crédito para poder fazer a transferência; a conta para a qual você vai transferir os créditos deve estar no seu nome e CPF; verifique se já passou o prazo estipulado para o ocorrer o crédito na sua conta (conforme ilustra a imagem do passo 9 desse artigo); vá no menu "Consultar > Transferências", no sistema da nota fiscal paulista, e verifique se a transferência que você solicitou foi computada, em caso positivo verifique a coluna "Status Retorno" para ver se houve algum erro na transferência. Se o problema persistir, por favor, entre em contato com a Secretaria da Fazenda para saber como proceder.

8. Sempre que acesso o sistema meus créditos estão "calculando", por que esse cálculo demora tanto?
Existe um prazo de 3 a 4 meses para a realização do cálculo. Pois esse é o prazo que os estabelecimentos têm para retificar (corrigir) os documentos fiscais que foram emitidos.

O que achou deste artigo? Gostou? Não Gostou? Deixe sua opinião!

[Blogger - Novidade] - Artigo completo sobre o novo visual do Editor HTML do Blogger

2013-04-13T17:37:00.000-03:00

Olá querido leitor, depois de um tempinho sem publicar nenhum artigo — por causa da correria no trabalho —, hoje vou falar sobre a mais nova mudança na plataforma Blogger: o visual do Editor HTML. Como você deve saber a equipe do Blogger trabalha bastante para implantar melhorias em sua plataforma de acordo com o feedback dos usuários, e há alguns dias a equipe do Blogger anunciou uma melhoria que será muito útil para os desenvolvedores que criam templates para a plataforma, e para os aventureiros do código-fonte.

Novo visual no "Editar HTML" dos templates da plataforma Blogger

Blogger implanta novo Editor HTML com realce de sintaxe, numeração de linhas e muito mais...

É comum que em tutoriais para "melhorar" o visual e/ou recursos do blog, seja necessário que você inclua/exclua códigos diretamente em seu template (código-fonte). Porém, antigamente essa tarefa era aconselhável somente para os usuários com conhecimentos em linguagens web (HTML, CSS, Javascript etc.), até porque o visual dos códigos eram um tanto quanto monocromáticos e apareciam como um monte de códigos dentro de uma caixa de texto — uma espécie de bloco de notas —, e isso podia causar muita confusão se você não soubesse, e prestasse atenção, no que você estava mexendo.

Porém, com essa nova melhoria no Editor HTML do Blogger, ficou mais fácil identificar o que está sendo alterado, e o código-fonte ficou mais organizado. Agora o código-fonte pode ser visualizado com realce de sintaxe, numeração de linhas, agrupamento de códigos, auto-identação — que antes só podiam ser obtidos se você usasse programas próprios para desenvolvimento web, tais quais: Notepad++, Adobe Dreamweaver, e outros menos conhecidos. Houve também a implantação de novos recursos, que serão descritos mais abaixo.

Realce de sintaxe

Como você pode ver na imagem abaixo, e em tempo real no painel de controle do seu blog (Modelo > Editar HTML), agora o estilo monocromático, e de texto plano, do seu código-fonte foi substituído por linhas com códigos totalmente coloridos — um pouco atrasado para o carnaval, mas tudo bem. Essa coloração nas linhas, num primeiro momento, pode acabar confundindo os usuários, e até passando a impressão de um código bagunçado, mas isso é questão de se acostumar!

Essa coloração facilita bastante na identificação de erros — geralmente códigos "quebrados" —, e também ajuda na formatação do código, pois fica mais fácil de visualizar a estrutura do código-fonte. A coloração é adiciona automaticamente, e está ligada ao tipo de código que está presente no seu template.

Numeração de linhas

A numeração de linha, sem dúvida nenhuma, é uma das melhorias mais importantes e úteis que a equipe do Blogger implantou. Chega daquelas mensagens de erro ao tentar salvar o template, que dizem que um erro foi encontrado, mas que não mostram aonde o erro está. Quando esse tipo de coisa acontecia era necessário, dependendo da alteração que você fez, olhar todo o código-fonte para encontrar o erro que você cometeu — pior ainda quando o erro era a falta de uma única letra no código.

Como você pode ver na imagem acima, eu apaguei o sinal de "menor que" (<) que indicava o começo da tag b:section, na linha 1902. Ao apagar esse único caractere eu quebrei o código-fonte do template e não consigo salvá-lo. Como eu disse no parágrafo anterior, se o Editor HTML do Blogger não tivesse sido melhorado, eu, provavelmente, teria um baita trabalho para descobrir que faltava esse caractere.

Mas agora, com a opção de linhas numeradas, o Blogger informa a você o número da linha aonde está o erro. Como você também pode ver na imagem acima, fui informado que o erro está na linha 1918, que é aonde se encontra a tag de fechamento do código b:section. Na verdade, o erro se encontra na linha 1902, que foi aonde eu apaguei o código, mas só de a plataforma informar a tag de fechamento como erro, eu consigo visualizar que o erro está nessa tag.

NOTA: veja que ao encontrar o erro, a plataforma realçou a linha de azul claro e alterou a cor do texto para vermelho, reforçando o que eu falei no tópico "Realce de Sintaxe" quanto a ajuda que a coloração do texto proporciona no momento de encontrar erros.

Agrupamento de códigos

Talvez, ao olhar seu código-fonte, você deva ter notado que algumas partes do seu código "sumiram", destacando principalmente a parte do CSS que é uma das partes mais alteradas de um template, e que é responsável por adicionar as cores, formas e efeitos do seu blog. E deve ter notado também que o tamanho do seu código-fonte reduziu consideravelmente — mas apenas visualmente!

Não se assuste com esse sumiço e com essa redução do seu código-fonte, pois continua tudo em seu devido lugar. A equipe do Blogger apenas ocultou algumas partes do seu código. Note na imagem acima, que em alguns trechos a numeração de linha dá um salto, por exemplo, da linha 13 a contagem pula para a linha 572. Note também que após o número 13 há uma pequena seta. Essa seta, e esse salto na numeração, indica que o código da linha 14 até a linha 571 está oculto. Para mostrar o código oculto, basta que você clique sobre a numeração da linha 13 — ou, se você for uma pessoa perfeccionista, basta que você clique exatamente sobre a pequena seta. Ao fazer o clique o código que estava oculto será mostrado automaticamente, permitindo que você o edite normalmente.

Auto-identação do código

A auto-identação, caso você não saiba, é a estrutura em "escadinha" do código-fonte. Quando escrevemos o código-fonte de alguma página, precisamos estruturar esse código de uma maneira que possamos visualizar aonde cada código se encaixa. Por exemplo, no trecho de código abaixo temos uma tag DIV, em seguida uma tag P e, em seguida, um texto qualquer.

<div><p>Texto qualquer</p></div>

A maneira que o código foi escrito está correta, pois não há nenhuma tag quebrada e todas elas estão na posição correta, porém, ao olhar o código rapidamente fica difícil identificar sua estrutura, ou em palavras mais simples: "o que é que está dentro do quê". Okay, esse código é pequeno e dá para visualizar sua estrutura sim, mas pense no enorme código-fonte do seu template ao ler a explicação.

O código acima, ao ser analisado, informa que temos uma DIV e que, dentro dessa DIV, temos uma tag P que por sua vez, possui um texto qualquer dentro de si, voilà! Nada muito complexo, certo? Okay, ainda não entendeu? Então, visualmente "falando" temos o que é demonstrado na imagem abaixo.

Pronto. Acho que agora ficou bem explicado. Contudo, o código que foi mostrador acima teria permitido uma análise muito mais rápida se tivesse sido escrito da seguinte maneira:

<div>
   <p>
      Texto qualquer
   </p>
</div>

Pois bem, esse espaço que existe a frente das tags, fazendo com que ganhem uma estrutura de "escadinha", é a tão falada "identação" do código-fonte. Quando um código é escrito com essa "identação" fica muito mais fácil de analisá-lo e de entender sua estrutura. E esse recurso de auto-identação do Blogger, permite que, ao escrever algo em seu código-fonte, ele seja estruturado automaticamente.

Novos recursos do "Editar HTML" da plataforma Blogger

Além do visual propriamente dito, a equipe do Blogger adicionou novas opções e reformulou outras com o intuito de agilizar a edição do template e/ou para facilitar a procura por trechos específicos do seu código-fonte. Confira abaixo uma explicação do que cada um desses novos recursos pode fazer por você.

Opção "Voltar"

Essa é a opção mais avançada de todas as opções presentes no novo Editor HTML da plataforma, pois através dela você voltar para o menu Modelo. Ooh!

Opção "Salvar modelo"

Após ter feito todas as alterações que você encontrou na web para deixar o seu blog do jeito que você quer, é esse o botão que você deve clicar para ~~terminar de ferrar com o seu template~~ salvar o seu template. Ou, em palavras mais simples, é através dele que você salva todas as modificações que você fez.

Opção "Ir para um widget"

Essa opção permite que você pule diretamente para o código dos gadgets/widgets que você possui instalado em seu blog. Muito útil para evitar o famoso "Ctrl+F", quando se está procurando o código-fonte de um gadget específico. Basta escolher um gadget na lista (como ilustra a imagem abaixo), e clicar sobre ele para visualizar seu código.

Opção "Editar modelo"

Essa opção já aparece selecionada quando você acessa o Editor HTML do Blogger, e ela permite que você volte a visualizar/editar o seu código-fonte caso você tenha clicado na opção "Visualizar modelo".

Opção "Visualizar modelo"

Essa opção permite que você visualize seu blog antes de salvar as modificações feitas. Muito útil para quem quer apenas fazer alguns testes, sem precisar aplicar as modificações ao blog para visualizá-las em ação. Para voltar a visualizar/editar o código-fonte basta selecionar a opção "Editar modelo".

Opção "Reverter modelos de widget para o padrão"

Essa opção, além de ser a que tem o nome mais comprido no Editor HTML, permite que você reverta ao padrão do código-fonte dos seus gadgets, caso você tenha feito alterações nele. Ao clicar sobre ela, uma janela como a mostrada na imagem abaixo se abrirá, e você poderá escolher dentre reverter o padrão do código-fonte de um (ou mais) gadget específico, ou de todos os gadgets que estão instalados.

Opção "Formatar modelo"

Essa opção permite que você organize o código-fonte do template. Ao clicar sobre ela, a estrutura do seu código-fonte será automaticamente "identada" (estruturada em escadinha).

Opção "Reverter alterações"

Essa opção permite que você apague todas as alterações que você fez no seu código-fonte, e que ainda não foram salvas. Portanto, caso você tenha alterado algo e tenha clicado sobre a opção "Salvar modelo", as alterações não poderão ser revertidas.

INFORMAÇÃO: note que esse novo editor está disponível para todos os usuários da plataforma, e os recursos podem ser utilizados também por quem possui um template não-oficial do Blogger.

Com informações: Blogger Buzz.

O que achou do novo Editor HTML? Gostou? Não gostou? Deixe sua opinião!

[Blogosfera] - Diga adeus ao Google Reader pois ele será aposentado!

2013-03-17T21:24:00.000-03:00

Não é de hoje que a equipe da Google vem aposentando diversos de seus produtos, baseando tal atitude na falta de utilização por parte das pessoas, ou pelos produtos não darem os lucros desejados. Pois bem, baseado nisso a mais nova vítima desse acontecimento é o Google Reader, produto que ~~tem~~ tinha a finalidade de fornecer aos seus usuários uma forma mais organizada, rápida e centralizada de acompanhar o feed de seus blogs e sites favoritos.

A blogosfera se despede de mais um produto da Google, o Google Reader...

O anúncio da aposentadoria foi feito dia 13.03.2013 no blog oficial do Google Reader, e também em uma lista de serviços que tiveram suas cabeças destinadas à guilhotina no blog oficial do Google, completando uma gama de 70 produtos e serviços aposentados desde que a empresa começou essa limpeza em 2011.

Eu fiquei sabendo da notícia justamente pelo próprio serviço do Google Reader, onde eu costumo acompanhar diariamente os artigos publicados pelos meus sites/blogs preferidos — ironia? De acordo com o artigo publicado pela equipe da Google, eles informam que sabem que o serviço possui diversos devotos que ficarão tristes com sua partida, e que eles também ficarão.

Eles informam também que existem duas razões simples para a aposentadoria do serviço: a diminuição na utilização do mesmo, e que como uma empresa eles estão focando seus esforços em uma quantidade menor de produtos, pois acreditam que esse foco mais restrito trará uma experiência melhor aos usuários — aposto que os usuários do Google Reader discordam disso.

Mas não há nada que possa ser feito, a decisão já foi tomada. O artigo oficial informa ainda que o serviço deixará de funcionar no dia 01.07.2013, dando três meses de folga para que os usuários procurem um novo serviço para lerem os feeds de seus blogs/sites favoritos. Os interessados poderão fazer o download de seus dados através do Google Takeout, que é um outro serviço da Google que tem como finalidade permitir o download de dados dos produtos da Google.

Se você, assim como eu, ao ler essa notícia pensou: e agora como vou acompanhar os artigos de meus sites/blogs favoritos, fique calmo, pois a equipe do site Tecnoblog, preparou um artigo com uma lista de cinco serviços que poderão servir de sucessor ao Google Reader. Você pode conferir tal artigo no seguinte link: Conheça cinco alternativas ao Google Reader.

Com informações: Reader Blog.

E você, usava o Reader? O que acha da aposentadoria dele? Deixe sua opinião!

[Youtube] - Usando o player branco do Youtube em seus artigos do Blogger

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

É bastante interessante que, ao escrever um artigo para o blog, você procure dar destaque ao conteúdo usado para ilustrar o mesmo, como por exemplo as imagens e vídeos. As imagens podem ser customizadas com puro CSS, mas poucas pessoas sabem como "customizar" os vídeos que inserem em seus artigos. Portanto, neste artigo eu resolvi mostrar como usar o player branco dos vídeos do Youtube no Blogger, que é uma mudança simples, mas que pode dar um destaque a mais para seus vídeos.

O procedimento para usar o player branco é extremamente simples, permitindo que qualquer pessoa, até mesmo aquelas que não tenham conhecimentos em linguagem web, façam tal implementação. Mas antes de mostrar como fazer a implementação desse player, mostrarei a você qual é a aparência do mesmo. Veja o vídeo abaixo, e note que o player do primeiro vídeo é o tradicional preto do Youtube.

Agora veja o mesmo vídeo, só que com o player branco.

A mudança é bem simples e altera somente a cor do player, mas é uma mudança que pode dar um ar diferente para os vídeos do seu artigo, pois tem um bom contraste com blogs que possuem fundo escuro — e até mesmo com blogs que possuem fundo claro.

Código para o player branco do Youtube

Agora que você já sabe como é a aparência do player, veja abaixo como é fácil utilizá-lo.

1. Primeiramente escreva seu artigo normalmente, como você sempre fez.

2. Após ter criado seu artigo e escolher o local onde você o incluirá, vá até o site do Youtube e pegue o código de incorporação do vídeo que você desejar adicionar ao artigo (veja imagem a abaixo).

3. Ao pegar o código de incorporação do vídeo, o mesmo será semelhante ao mostrado no campo abaixo.

<iframe width="636" height="358" src="http://www.youtube.com/embed/635pVw3Xtc0?rel=0" frameborder="0" allowfullscreen></iframe>

4. Note que uma parte do código foi destacada em vermelho. Essa é a parte responsável por indicar qual vídeo será incorporado, e por repassar algumas informações sobre opções que você escolhe no momento de obter o código de incorporação. Para alterar o player preto, pelo player branco, você deverá adicionar o código: ;theme=light, ao final do código que foi destacado. Seu código deverá ficar como o mostrado no exemplo abaixo.

<iframe width="636" height="358" src="http://www.youtube.com/embed/635pVw3Xtc0?rel=0;theme=light" frameborder="0" allowfullscreen></iframe>

5. Depois de feito isso basta publicar o seu artigo, ou visualizá-lo, para ver como o player está aparecendo.

NOTA: você pode usar esse código em qualquer parte do seu blog, não precisa ser necessariamente nos vídeos que você incorpora diretamente dentro dos artigos. Você pode usar o código também nos vídeos que você incorpora em sua barra lateral, por exemplo.

E esse é o código usado para deixar o player do Youtube branco. Você pode usá-lo em qualquer plataforma, pois código é inserido diretamente dentro do iframe de incorporação do Youtube. Portanto, se você tem uma blog no Blogger, no Wordpress, no Tumblr ou qualquer outra plataforma que permita a você adicionar o código de incorporação do Youtube, você poderá usar o código. Se gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

[Blogger] - Como adicionar um botão de notificação no final dos artigos no Blogger

2013-02-01T18:39:00.003-02:00

Olá querido leitor, no artigo de hoje eu atenderei ao pedido do leitor Samuel, e mostrarei a você como inserir um botão de notificação no rodapé de todos os seus artigos, onde você poderá solicitar que seus leitores lhe avisem caso o artigo esteja desatualizado, com erros de gramática, ou qualquer outro motivo que você julgar importante — assim como o botão que eu estou usando nesse exato momento no rodapé dos artigos do blog.

Inserindo os códigos para gerar a frase e o botão

Antes de começar a instalar esse recurso, é importante que você possua um formulário de contato que será usado unicamente para o funcionamento desse recurso — você pode usar seu formulário de contato padrão caso queira, mas aconselho que você separe as coisas. Caso você não tenha um formulário de contato, leia o artigo: Como colocar um formulário de contato em um blog, para saber como criar um; caso você já tenha um formulário, basta seguir os passos descritos abaixo.

1. Primeiramente iremos adicionar a estrutura do recurso, que conterá uma frase e um link para o formulário. Para isso, faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
</div>

...caso não encontre o código acima, tente procurar por esse outro código:

<div class='post-footer-line post-footer-line-3'/>
</div>

NOTA: repare que se você estiver usando um template que não tenha sido criado pelo Blogger, você poderá não encontrar os códigos citados acima. Nesse caso você deverá localizar o código que indica o rodapé dos artigos do seu blog.

3. Ao encontrar um dos códigos que foram informados acima — ou o código referente ao rodapé dos artigos no seu template —, adicione este outro código logo abaixo dele:

<b:if cond='data:blog.pageType == "item"'>
<div id='update-box'>
As informações contidas neste artigo estão desatualizadas? <a class='update-link' href='javascript:window.open('LINK-DIRETO-DO-SEU-FORMULÁRIO-DE-CONTATO', 'blank','scrollbars=yes,toolbar=no,width=700,height=500')'>Notifique-me!</a>
</div>
</b:if>

...a parte destacada em azul deve ser substituída por uma frase que lhe agrade, e a parte destacada em vermelho, deve ser substituída pelo link direto do seu formulário de contato. Note que ao clicar no link, o formulário de contato se abrirá em uma janela pop-up, sendo assim, você pode alterar o tamanho da janela mudando os valores destacados em rosa: width e height, largura e altura, respectivamente. A frase do link pode ser alterada mudando a parte destacada em roxo.

NOTA: caso você tenha criado seu formulário através do site Wufoo, você poderá pegar o link direto dele clicando sobre a opção "Code" do formulário, e escolhendo o primeiro link da opção "Permanent Shortlink URL".

4. Após ter feito as substituições como deseja, clique sobre o botão Visualizar modelo e, se estiver tudo certo, clique sobre o botão Salvar modelo. A partir desse momento o recurso já estará disponível e em funcionamento no rodapé dos artigos de seu blog.

Customizando o recurso de notificação com estilos CSS

Embora o recurso já esteja funcionando, é importante que você dê um destaque a ele para chamar a atenção de seus leitores. Portanto, nos passos descritos abaixo, você verá como adicionar estilos CSS para customizar a fonte e a cor do recurso.

1. Ainda no menu Modelo, pressione Ctrl+F novamente para abrir a janela Localizar do navegador, e procure o código abaixo.

]]></b:skin>

2. Imediatamente acima desse código, adicione esse outro código:

/* ----- CSS do Recurso de Notificação ----- */

div.update-box {
font: normal normal 12px Arial, serif, sans-serif; /* customização da fonte do recurso */
color: #000000; /* cor da fonte do recurso */
background: #EEEEEE; /* cor de fundo do recurso */
border: 1px solid #DDDDDD; /* customização da borda do recurso */
padding: 10px;
}

Font

Essa propriedade é responsável por adicionar estilos à fonte (texto) do recurso de notificação. Caso você queira que o texto fique automaticamente em itálico, mude o primeiro "normal" para "italic"; se você quiser que o texto apareça automaticamente em negrito, mude o segundo "normal" para "bold". Você pode alterar também o tamanho do texto, mudando o valor "12" e a fonte do texto, mudando o nome "Arial" para outro que você queira.

Color

Essa propriedade é responsável por adicionar a cor da fonte (texto), o valor "#000000", representa a cor preta, mas você pode mudá-lo para qualquer outra cor que desejar, basta informar o código hexadecimal da cor que você quer.

Background

Essa propriedade é responsável por adicionar a cor de fundo ao recurso. Você pode mudar a cor de fundo para a que mais lhe agradar, basta inserir o código hexadecimal da cor que você quer — o código "#EEEEEE" se refere a um cinza claro.

Border

Essa é a propriedade responsável por adicionar uma borda ao redor da tag. O valor "1" informa a grossura da borda, o valor "solid" indica o tipo de borda (veja a tabela abaixo) e, por fim, você pode escolher também a cor da borda alterando o código hexadecimal da mesma.

Estilos de bordas disponíveis
Valor	Estilo	Demonstração
solid	borda sólida
dashed	borda tracejada
dotted	borda pontilhada
double	borda dupla

Caso você tenha conhecimentos sobre CSS você poderá alterar o código como achar melhor. Você pode alterar as cores como bem desejar mudando o código hexadecimal das mesmas de acordo com essa tabela de cores.

3. Após alterar o código como achar melhor, clique sobre o botão Visualizar modelo e, se estiver tudo certo, clique sobre o botão Salvar modelo. Pronto, a partir desse momento o recurso já estará disponível e com um destaque adequado para a sua importância. Caso queira saber como transformar o link do formulário de contato em um botão, leia o artigo: Como transformar links em botões utilizando CSS3 no Blogger.

E se você tem interesse em melhorar a experiência de leitura dos seus artigos, por parte dos leitores, não deixe de ler também os artigos citados abaixo:

Gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário. E se tiver alguma sugestão de artigo, faça como o leitor Samuel e envie-a para nós!

[Monetização] - Saiba como se cadastrar no serviço NetAffiliation e rentabilizar seu blog

2013-01-23T22:19:00.000-02:00

Se você possui um blog na plataforma Blogger, ou em qualquer outra plataforma, você já deve ter se perguntado o que é preciso para mostrar anúncios em seu blog, certo? Pois bem, essa é uma dúvida muito comum entre os blogueiros menos experientes, por isso, neste artigo eu mostrarei a você como criar uma conta no serviço NetAffiliation, que é um dos mais utilizados por blogueiros para rentabilizar seus blogs. Então confira abaixo como se cadastrar no serviço.

O que é a NetAffiliation e como o serviço funciona?

Antes de mostrar como se cadastrar no serviço, é improntante que você saiba do que o mesmo se trata. A NetAffiliation é uma das maiores empresas do setor de Marketing Digital, e permite a seus usuários (afiliados) divulgar anúncios de empresas (anunciantes) de diversos setores de atuação. A remuneração pelos anúncios funciona da seguinte maneira: os afiliados do serviço divulgam anúncios em seus blogs, e a NetAffiliation paga a eles de acordo com os critérios estabelecidos pelos anunciantes.

Ou seja, a Empresa X vende equipamentos de informatica e é uma anunciante na NetAffiliation, ela informa que pagará 10% ao afiliado, por cada venda que for realizada vinda do site/blog do mesmo. Sendo assim, ao mostrar um anúncio de tal empresa em seu blog, e algum dos seus leitores clicar no anúncio e fizer uma compra no site da Empresa X, você receberá de remuneração 10% do valor da compra que seu leitor fez.

Mas é importante que você saiba que a remuneração varia de anúncio para anúncio, alguns anunciantes pagam por clique, outros por preenchimento de algum formulário, outros pagam por duplo-clique, enfim, a remuneração dependerá do anúncio que você irá divulgar em seu blog.

Fazendo o cadastro no serviço da NetAffiliation

Atenção: recentemente, a plataforma de afiliados NetAffiliation foi vendida para outra empresa. A nova proprietária, por sua vez, decidiu que a plataforma precisava passar por uma remodelação em seu layout, e há algum tempo atrás eles migraram o sistema para outra plataforma, e por esse motivo o serviço tem apresentado alguns erros. Aconselho que você aguarde esse momento de turbulências passar para fazer o seu cadastro. Assim que a situação for normalizada esse rtigo será atualizado para refletir as mudanças.

1. Criar uma conta no serviço é bem simples, e em apenas quatro passos você terá concluído o seu registro. Acesse a página de registro da NetAffiliation, e você se deparará com o formulário de cadastro do serviço, onde deve preencher informações de contato — esse é o primeiro passo. Preencha o formulário de cadastro, como ilustra a imagem abaixo, e clique no botão Etapa seguinte.

2. Como segundo passo, após ter clicado no botão, você deverá fornecer informações sobre o seu site/blog (veja a imagem abaixo). Essas informações são importantes para que seja gerado um código exclusivo para o seu blog, afim de identificar os cliques que seus leitores fizerem nos anúncios. O cadastro do seu blog também será utilizado pela equipe da NetAffiliation para validar seu blog no serviço. Em seguida, clique no botão Etapa seguinte.

3. No terceiro passo, você deverá fornecer mais algumas informações sobre o seu blog, como por exemplo, se você já divulga anúncios em seu blog, se você utiliza links em seus artigos, se você possui uma newsletter, se você possui um feed RSS e etc. — esses dois últimos são bem importantes, portanto, aconselho que cadastre o feed do seu blog, e crie um sistema de newsletter. Em seguida clique no botão Etapa seguinte, como ilustra a imagem abaixo.

4. Neste quarto e último passo, você deverá informar um e-mail e senha para a criação da sua conta no serviço da NetAffiliation. Preencha os campos solicitados e clique no botão Validar o registro. Após clicar no botão, você receberá um e-mail da NetAffiliation no endereço que você cadastrou, verifique sua caixa de entrada (e também a lixeira ou caixa de spam) e clique no link de confirmação que estará no corpo do e-mail.

ATENÇÃO: é importante que você confirme seu cadastro, clicando no link do e-mail recebido, para que a NetAffiliation valide a sua inscrição no serviço.

Pronto, a partir desse momento você já possui uma conta criada no serviço da NetAffiliation, agora basta aguardar que a equipe da NetAffiliation visite seu blog, e valide sua inscrição. Para facilitar, e agilizar, a validação da sua conta no serviço, é importante que seu blog esteja de acordo com a política da NetAffiliation. Confira abaixo um dos pontos importantes para a validação da sua conta.

Quais são as condições para se tornar difusor?
Deve ser proprietário de um site de internet que corresponda aos critérios de aceitação e ter o direito (e a possibilidade técnica) de distribuir a publicidade sobre esse mesmo site.
Deve igualmente ser maior de idade, ou consoante o caso, dispor de autorização dos seus pais para distribuir a publicidade no seu site. Se for menor de idade não autorizado pelos seus pais, a NetAffiliation não poderá lhe pagar os seus ganhos!
Uma vez inscrito, a NetAffiliation aceita ou não a sua inscrição (Prazo de 1 dia útil!). Assim que você seja aceite, terá acesso ao conjunto de campanhas propostas pela NetAffiliation.
Fonte: http://www.netaffiliation.com/home/aff/faq.php

Para tirar outras dúvidas sobre o serviço, enquanto a equipe da NetAffiliation avalia o seu blog, visite o FAQ (Perguntas Frequentes) do serviço. E assim que sua conta for validada, você já poderá divulgar os anúncios em seu blog e começar a ganhar dinheiro! Num próximo artigo eu mostrarei como gerir e divulgar anúncios no blog, para quem já tem a conta validada no serviço.

[Blogger] - Blogger implementa os resultados de pesquisa em blogs de sua plataforma

2013-01-11T11:30:00.000-02:00

A equipe do Blogger "acaba" de fazer uma implementação nos resultados de busca dos blogs criados em sua plataforma. Não sei dizer ao certo quando essa implementação foi feita efetivamente, mas acredito que nada tenha sido divulgado por se tratar de uma implementação um tanto quanto básica, e por poucas pessoas a terem percebido — eu mesmo quase não percebi. Antigamente, ao se fazer busca em um blog criado na plataforma Blogger, aparecia a seguinte mensagem na página de resultados: "Mostrando postagens com o marcador 'termo-pesquisado'.", e também um link chamado "Mostrar todas as postagens", que ao ser clicado redirecionava o leitor para a página inicial do Blogger. Porém, ao fazer uma busca em blogs do Blogger agora, a mensagem aparece como ilustrado na imagem abaixo.

Como você pode ver, a frase mudou para: "Mostrando postagens classificadas por relevância para a consulta 'termo-pesquisado'." e, além da frase, agora há dois links na mensagem: o "Mostrar todas as postagens", que continua redirecionando os leitores para a página inicial do blog, e o link "Classificar por data".

Ao clicar no link de classificação por data, os resultados de pesquisa serão mostrados do mais recente para o mais antigo. Isso permite que os seus leitores vejam primeiramente os artigos mais recentes, que provavelmente contêm informações mais atualizadas do que os mais antigos. Note, no entanto, que após clicar no link de classificação por data, ele passará a se chamar "Classificar por relevância", assim como, a frase da mensagem também será alterada para: "Mostrando postagens classificadas por data para a consulta 'termo-pesquisado'.".

Ao utilizar a classificação por relevância, os artigos serão mostrados pela sua relevância (óbvio), ou seja, do que tiver mais visualizações para o que tiver menos visualizações. Essa opção serve para que seus leitores vejam os artigos que possuem mais visitas em primeiro lugar, afinal de contas, um artigo que é muito visitado só pode o ser pelo seu conteúdo de qualidade — pelo menos na teoria!

E essa foi a pequena mudança que a equipe do Blogger fez em sua plataforma — sabe-se lá quando. Mas isso mostra que o Blogger vem tentando, cada vez mais, adicionar recursos que possam ter alguma utilidade para os usuários da plataforma!

E você, o que acha desse novo recurso? Vinga ou não vinga? Comente!

[Blogger - Customização] - Remover âncora de redirecionamento do "Leia Mais"

2013-01-10T11:30:00.000-02:00

Olá querido leitor, seja bem-vindo a mais um artigo. No artigo de hoje eu mostrarei como remover a âncora de redirecionamento do recurso "Leia mais" da plataforma Blogger. Se você não sabe de qual âncora eu estou falando, eu explico: se você utiliza um template padrão da plataforma Blogger, e faz uso do recurso "Leia mais", você já deve ter percebido que, ao clicar nesse link, você é direcionado para a página interna do artigo, mas o mesmo não aparece carregado no topo permitindo que você veja o título, ele desce automaticamente para o ponto aonde você parou de ler.

Essa "descida" automática, nada mais é do que uma forma que o Blogger encontrou para evitar que, o leitor, ao entrar no artigo, precise ler o primeiro parágrafo novamente. Sendo assim, o artigo desce até o parágrafo em que o leitor parou. Porém, o leitor do seu blog pode não estar preparado para essa "descida", e ficar meio perdido ao tentar continuar lendo o artigo. Pode acontecer também de você exibir anúncios do AdSense, ou qualquer outro programa de afiliados, abaixo do título do artigo, e essa descida poderá fazer com que o seu leitor não os veja, consequentemente fazendo com que você perca uma possível receita.

Por isso, neste artigo eu mostrarei como evitar essa "descida" automática. Ela é gerada por um pequeno código, em em poucos passos você poderá concluir a remoção do mesmo. Mas, embora a remoção seja simples, siga os passos com cautela para evitar problemas.

Removendo o código âncora do "Leia mais" no Blogger

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

3. Após encontrar o código, exclua a parte que foi destacada em vermelho, mas tome cuidado para não apagar outras partes do código. Seu código deverá ter ficado como o mostrado abaixo.

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

4. Para finalizar, clique no no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Depois é só acessar o seu blog e clicar no link "Leia mais", para verificar se o artigo continua descendo ou não.

Esse artigo surgiu da dúvida do leitor Josimar. Se você tem alguma dúvida, faça como o Josimar e envie-a para nós através de nossa página de contato. E se você gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário!

[Serviços] - Como remover inscrições inativas de sua newsletter do FeedBurner

2013-01-02T20:24:00.001-02:00

Um dos principais recursos de um blog, sem dúvida nenhuma, é o sistema de newsletter. Através do sistema de newsletter, é possível enviar os artigos automaticamente para os leitores que cadastrarem seus e-mails. Isso evita que os leitores precisem ficar visitando seu blog para saber se há novidades. Porém, para que os e-mails sejam entregues aos leitores, é importante que os mesmos confirmem seus e-mails clicando no link de confirmação que é enviado automaticamente, quando eles fazem o cadastro. Sem essa confirmação, o cadastro do leitor fica "pendente", e ele não recebe os e-mails quando os artigos são publicados. Por isso, neste artigo eu mostrarei a você como remover essas inscrições pendentes/inativas para quem usa o sistema de newsletter do FeedBurner.

Removendo inscrições pendentes/inativas do FeedBurner

1. Primeiramente, faça login em sua conta do FeedBurner acessando o endereço: http://feeds.feedburner.com/.

2. Acesse o feed do seu blog clicando sobre o nome do mesmo, depois acesse a aba Publicize (Publicar) e, em seguida, acesse o menu "Email Subscriptions". Role a página até o final e clique no link "View Subscriber Details".

3. Uma lista com o endereço de e-mail de todos os leitores que se cadastraram em sua newsletter será mostrada. Ao lado de cada e-mail você verá três colunas — veja a imagem abaixo e confira as explicações:

START DATE: essa coluna informa a data em que o leitor se cadastrou em sua newsletter;
STATUS: essa coluna informa o atual status da inscrição do leitor, que pode ser:
- Active: esse status informa que a inscrição do leitor está ativa, e que ele está recebendo os e-mails com os artigos que são publicados no blog. Esse status só aparece quando o leitor clica no link de confirmação, que é enviado para ele quando o mesmo se cadastra na newsletter.
- Inactive: esse status informa que a inscrição do leitor está "pausada", ou seja, ele se cadastrou, confirmou o endereço de e-mail, mas não está sendo notificado quando novos artigos são publicados. Essa "pausa" só pode ser feita pelo autor do blog. Para mais informações de como essa pausa pode ser útil, confira esse outro artigo: Cancelando o recebimento de newsletter de blogs que usam o FeedBurner.
- Unverified: esse status informa que a inscrição do leitor ainda não foi verificada, ou seja, o leitor se cadastrou, porém, não clicou no link de confirmação do e-mail que foi enviado para ele no momento do cadastro.
ACTION: essa coluna possui botões de ação, que permitem desativar (pausar), reativar e excluir inscrições.

...você deve procurar os e-mails que possuem o Status "Unverified" — que indicam que a confirmação está pendente. Após encontrar tais e-mails você deve clicar no botão de excluir (X) que está localizado na coluna "Action" referente a esse e-mail. Após clicar no botão, uma janela aparecerá perguntando se você realmente deseja excluir essa inscrição, clique em OK para confirmar a exclusão.

Por que excluir as inscrições não verificadas (pendentes)?

Você deve estar se perguntando qual é o motivo de excluir essas inscrições que estão pendentes, certo? E a resposta para essa pergunta é simples: organização! É bem melhor você ter em seu sistema de newsletter inscrições que estejam realmente ativas, assim você pode ter uma visãomais consistente de quantas pessoas realmente estão recebendo seus e-mails.

Confira também os artigos:

E essa foi a dica de hoje. Se você gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário! E aproveite para se inscrever em nossa newsletter!

[Blogger] - Novo recurso de marcação de usuários e páginas do Google Plus em artigos

2012-12-18T23:06:00.000-02:00

Olá querido leitor, venho trazer a você uma notícia em primeira mão! A equipe do Blogger acaba de anunciar, em seu blog oficial (Blogger Buzz), um novo recurso que possibilita os autores de blogs do Blogger a marcar usuários da rede social Google Plus, diretamente nos artigos de seus blogs. Confira abaixo as informações que foram fornecidas até o presente momento.

Blogger adiciona marcação de usuários e páginas dentro dos artigos

Facilidade para notificar usuários do Google Plus

A equipe do Blogger informa, em seu artigo oficial, que este recurso veio para facilitar a interação dos usuários da rede social com os artigos que são publicados no blog. Pois ao marcar alguém em um artigo, e compartilhar esse artigo na rede social, a pessoa que foi marcada será automaticamente notificada de tal marcação.

A equipe do Blogger também informa, que este recurso poderá ser muito útil no caso de você querer dar créditos a alguém, fazer alguma pergunta a este alguém, ou simplesmente incluir tal pessoal na discussão do seu artigo. O que torna torna mais dinâmica, e facilitada, a interação com os artigos de seu blog.

Como ativar e usar o recurso de marcação nos artigos

Para que você possa utilizar esse novo recurso, é importante que você tenha integrado seu perfil do Google Plus a sua conta do Blogger. Para saber como fazer tal integração, leia o artigo que publicamos há algum tempo, clicando no link abaixo.

Blogger adiciona integração direta com a rede social Google Plus - Hdblog

Após fazer tal integração, você já poderá marcar os usuários. Para marcar alguém, basta digitar "+" (mais) e, em seguida, digitar o nome do usuário que você deseja marcar. Fazendo isso, diversas opções de usuários aparecerão, bastando que você clique sobre o usuário que você deseja marcar, como ilustra a imagem abaixo.

Marcação de usuários e páginas do Google Plus dentro dos artigos do Blogger

Ao marcar alguém em um artigo, o nome de usuário dessa pessoa aparecerá como um link comum. Porém, ao passar o mouse por cima do link, seus leitores verão uma pequena caixa de diálogo (veja imagem abaixo), onde verão algumas informações sobre o usuário marcado e um botão chamado "Adicionar a", para que os leitores possam adicionar essa pessoa à seus círculos na rede social. Se o leitor clicar no link, será levado diretamente para o perfil do usuário marcado na rede social.

Janela de diálogo com informações do usuário marcado

Observações:

Como falei acima, é importante que para que esse recurso funcione, você tenha feito a integração do seu perfil com a rede social. Outra questão que deve ser observada, é que esse recurso só funciona no editor de artigos do Blogger, quando o mesmo está no modo "Escrever", no modo "HTML" o recurso não funciona! E saiba que além de usuários, você também pode marcar páginas.

E esse é o novo recurso fornecido pela equipe do Blogger, que mostra que a saga de unificação de todos os produtos da gingante da web, a Google, continua. Aguardemos para saber qual será a próxima integração a ser feita por eles. Enquanto isso, adicione nossa página em seus círculos: +Hdblog.

Com informações: Blogger Buzz.

Atualização — 11.07.2013 às 19h30
Ao que tudo indica o recurso de marcação de usuários e páginas do Google Plus, que é demonstrado nesse artigo, não está mais disponível. Também não há nenhuma informação no artigo oficial do recurso que indique que o recurso foi descontinuado. Qualquer novidade esse artigo será atualizado novamente.

E você, o que você achou deste novo recurso? Útil, inútil? Comente!

[Comunicados do Blog] - O nascimento de um novo blog: Hdblog!

2012-12-13T23:52:00.000-02:00

Olá querido leitor, seja bem-vindo a mais um artigo do "Bloggando Na Web", ou melhor dizendo: seja bem-vindo a mais um artigo do Hdblog! Como você deve ter notado, faz muito tempo que não publico nenhum artigo aqui no blog, e isso se deve ao fato de a vida andar muito corrida. Já não sou mais aquele adolescente sem responsabilidades que iniciou o blog, agora os tempos são de correria, muito trabalho, contas e agora muita responsabilidade. Porém, não perdi a paixão por escrever artigos que possam ajudar você de alguma forma, e é por isso que resolvi fazer uma grande mudança no blog, como você poderá conferir nos tópicos abaixo!

O nascimento de um novo blog: Hdblog!

Mudança de nome e de domínio

Pois bem, a primeira grande mudança — e a mais visível —, é sem sombra de dúvidas a mudança do nome do blog. Há quase três anos quando eu iniciei o blog, resolvi chama-lo de Bloggando Na Web, pois seria um local aonde eu iria escrever coisas que achasse interessante enquanto eu navegava pela web, e sem falsa modéstia o blog fez bastante sucesso, nada muito grandioso, mas eu ocupei meu espaço na blogosfera.

Entretanto, como a vida não é um mar de rosas, aconteceu tudo o que aconteceu, e eu fiquei afastado da blogosfera. Depois de muito pensar, achei que deveria tentar retornar a escrever artigos, afinal de contas escrever é um hobby muito prazeroso. Foi então que notei que muitas pessoas continuavam postando comentários, mesmo com a falta de artigos, e me veio na cabeça que o blog tinha se tornado um espaço de armazenamento de grande parte do conhecimento que eu adquiri na blogosfera, e nesse momento veio a grande sacada: agora o blog vai se chamar Hdblog — meu disco rígido na web!

Embora eu tenha dito nos parágrafos anteriores que a vida não é um mar de rosas — e realmente não é —, e que eu tenho trabalhado muito, isso me trouxe algumas "vantagens": trabalho é igual a dinheiro, e dinheiro gera investimento! Foi então que resolvi fazer meu primeiro investimento no blog, comprando um domínio próprio. Eu queria um outro domínio que não fosse o ".com.br", mas todos os outros domínios com o nome "hdblog" já estavam comprados, então comprei esse mesmo — viram como a vida não é um mar de rosas?!

A propósito, se você estiver pensando em comprar um domínio próprio para seu blog — o que eu recomendo fortemente, sem contar que é extremamente barato —, confira o artigo escrito pelo Adelson:

Tutorial completo para domínio próprio no Blogger - Gerenciando Blog

...no artigo que ele escreveu, você verá todas as instruções (passo-a-passo) para obter um domínio próprio, que vão desde a compra do domínio, até a configuração dos registros DNS e integração no Blogger. Enfim, e foi assim que nasceu o Hdblog, ou renasceu o Bloggando Na Web!

Novo template para o blog

Já que eu mudei o nome do blog e comprei um domínio próprio, decidi que deveria criar um novo template para ele, afinal de contas, não adianta nada você tomar banho e não trocar de roupa! E já faz alguns meses que comecei a trabalhar (nas horas vagas) num novo template, que no caso é este que você está vendo agora.

Eu optei por usar cores claras no template (branco e tons de cinza) para deixar o blog com um ar mais leve e simplista. Evitei de usar muitos "fru-frus", e também evitei de abusar dos efeitos que o CSS3 permite criar. Enfim, optei por criar um template bem "clean" (limpo), destacando somente o que é necessário.

Participação nas redes sociais

Um dos pontos que eu não dei muito valor nesses quase três anos de blogosfera, foram as redes sociais. Eu possuía uma conta no Twitter, mas as atualizações eram automáticas e eu quase não interagia com os seguidores. Mas agora, com todas essas mudanças no blog, resolvi investir nelas e mantê-las sempre atualizadas! Portanto, se você quiser seguir o blog nas redes sociais e ficar por dentro das novidades, você pode fazê-lo através dos seguintes links: Facebook, Twitter e Google Plus.

Atualização dos artigos

Embora o novo domínio já esteja funcionando, e o novo template já tenha sido instalado, estou me esforçando ao máximo para atualizar todos os artigos do blog, e para colocar de volta ao ar os artigos que tive que reverter para rascunho por estarem totalmente desatualizados. Esse processo será um pouco demorado, mas em breve tudo voltará ao normal.

Enquanto isso não acontece, você poderá encontrar artigos desatualizados ou com citações antigas ao "Bloggando Na Web". Então peço paciência para você durante essa fase, que está sendo necessária para planos futuros! Peço também que ao notar qualquer erro você entre em contato para nos avisar, assim poderemos corrigir o erro o mais rápido possível!

Recursos do blog

Apesar de todas as mudanças, existem alguns recursos que não foram alterados e continuam funcionando no blog para auxiliar a leitura dos artigos, dos quais você pode conferir abaixo.

Botões de aumentar e diminuir fonte

Como eu sei que a leitura através da tela do computador, muitas vezes acaba afetando de forma negativa a visão de quem lê, optei por manter os botões de aumentar e diminuir fonte, para aqueles que prefiram uma leitura com fontes maiores! Você pode ter acesso a esse recurso através dos botões disponíveis logo abaixo do título de cada artigo.

Impressão de artigos

Com o crescimento dos meus conhecimentos sobre recursos web, eu melhorei a opção de impressão de artigos, que também está localizada abaixo dos títulos, para que você possa imprimir somente o conteúdo do artigo, que é o que realmente importa. Antigamente, ao tentar imprimir um artigo do blog, todo o conteúdo saia na impressão, tais quais: rodapé, barra lateral, gadgets etc. Agora, ao pressionar o botão de imprimir ou usar o atalho Ctrl+P, você poderá imprimir somente o conteúdo do artigo em si.

Para ver um exemplo deste recurso, sem precisar de fato imprimi-lo, acesse o blog usando o navegador Google Chrome e, sem seguida, pressione o botão de imprimir! O novo layout de impressão, funciona em qualquer navegador, mas o Google Chrome é o único que mostra uma prévia da impressão ao usuário, antes que a impressão de fato ocorra!

Notificação de artigos desatualizados

Uma das grandes queixas que recebi durante o período que fiquei sem postar no blog, foi a de que diversos artigos estavam desatualizados. Portanto, a partir de agora você poderá nos avisar de artigos desatualizados através de um botão presente no final de cada artigo.

Shadowbox padrão do Blogger

Outra questão que foi analisada, foi a de utilização de imagens. Como grande parte dos artigos publicados no blog são de tutorais, é importante que as imagens tenham uma boa qualidade, e que possam ser vistas em tamanho original, portanto, optei por utilizar o efeito Shadowbox padrão do Blogger para exibir as imagens dos artigos. Agora você pode clicar em qualquer imagem dos tutoriais para vê-las em tamanho original!

Então é isso caros leitores, essas são algumas mudanças, de muitas, que eu tenho planos de fazer aqui no blog, e que ocorrerão durante o ano de 2013. Durante os próximos dias estarei trabalhando para atualizar o blog o mais rápido possível, então fique sempre ligado em nosso blog para conferir as novidades!

E então, o que achou de todas as mudanças? Deixe sua opinião!

[Blogger] - "Nova" navbar do Blogger traz botões de compartilhamento

2012-08-31T01:51:00.000-03:00

Pouco tempo após o lançamento de um recurso nativo, que permite a desativação da barra de navegação (navbar) da plataforma Blogger, a mesma sofreu uma leve mudança: a adição de botões de compartilhamento. Agora, todos os usuários da plataforma que possuem a navbar ativa em seus blogs, poderão usufruir de tais botões, evitando que precisem adicionar códigos de terceiros para gerar os botões de compartilhamento.

Essa opção é nativa e está presente em toda a plataforma, portanto, não é necessário que você faça a ativação dos botões, basta estar utilizando a navbar em seu blog.

Clique para ampliar

A mudança não é muito grande, uma vez que já havia um link para compartilhamento na navbar. A grande diferença fica pela integração do botão de compartilhar do Google Plus (rede social da Google) à navbar, o que chama um pouco mais a atenção dos visitantes, podendo servir de estimulo para que compartilhem os artigos. As demais redes sociais (Twitter e Facebook) podem ser encontradas clicando sobre o link "mais", ao lado do botão do Google Plus.

Com certeza essa modificação virá a calhar para os usuário que possuem dificuldade em adicionar tais botões de compartilhamento manualmente em seus blogs. É a equipe do Blogger tentando ~~talvez~~ incentivar a utilização da navbar por parte dos usuários. Confira outros artigos sobre a navbar clicando neste link.

[Blogger] - Templates dinâmicos ganham versão para smartphones

2012-08-30T18:05:00.000-03:00

Voltamos ao velho — mas nem tanto assim — assunto sobre a acessibilidade dos blogs. Com o grande crescimento da venda de celulares smartphones, o acesso à Internet foi facilitado. Você pode acessar qualquer site, blog ou rede social através de seu smartphone, basta ter um pacote de dados ou estar conectado a uma rede wi-fi. Sendo assim, você precisa começar a pensar se o seu querido blog está preparado para essa nova tecnologia!

Foto por: William Hook

Quem tem um blog hospedado na plataforma Blogger, possui uma vantagem nessa questão. A plataforma Blogger possui, desde dezembro de 2010, um recurso que mostra uma versão simplificada do template quando o blog é acessado através de um aparelho celular. Você pode conferir o artigo que postamos quando o recurso foi lançado, clicando neste link.

Porém, quando este recurso foi lançado, ainda não existiam os templates dinâmicos do Blogger, o que fez com que esses templates não pudessem usufruir de tal recurso — até agora. Ontem, 29.08.2012, a equipe do Blogger anunciou em seu blog oficial a primeira compatibilidade dos templates dinâmicos com o recurso mobile da plataforma. Confira as informações abaixo.

Como ativar a versão mobile do template dinâmico?

A ativação da versão mobile para quem utiliza os templates dinâmicos, é exatamente a mesma para quem usa um template padrão do Blogger. Confira como fazer a ativação nos passos descritos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo. Dentro desse menu você verá o template que está sendo usado no seu blog e a versão mobile dele, como ilustra a imagem abaixo.

2. Clique no ícone de engrenagem, e em seguida marque a opção: Sim, mostrar modelo para celular em aparelhos celulares. Feito isso a janela se atualizará e você verá uma prévia de como ficará a versão mobile do seu blog. No menu dropdown, escolha a opção Visualização Dinâmica, e clique no botão Salvar.

Pronto, a partir deste momento, seu blog já estará disponível para quem acessá-lo através de um smartphone.

Outras informações

Confira abaixo algumas informações de que você deve estar ciente sobre esse novo modelo de versão mobile.

Todos os templates dinâmicos possuem versão mobile?

Sim, só que não. A equipe do Blogger informa em seu artigo que, no momento, apenas o template Classic possui uma versão mobile. Mas caso você esteja usando um template dinâmico que não seja o Classic, você poderá utilizar a versão mobile normalmente.

Preciso usar o template Classic para ter a versão mobile?

Não. Como foi respondido na questão acima, todos os blogs com templates dinâmicos, indiferente de qual template seja, abrirão com a versão mobile do template Classic, quando acessados através de um celular.

Porque apenas o template Classic possui versão mobile?

A equipe do Blogger informa, também em seu artigo, que apenas esse template possui versão mobile, pelo fato de ser o único dos sete templates dinâmicos com estrutura adequada para as telas pequenas dos smartphones.

Há alguns erros na versão mobile do meu blog, por quê?

A equipe do Blogger informa que apenas navegadores com suporte a webkit conseguem exibir corretamente a versão mobile, tais quais: Navegador Android, Chrome para Android e iOS, e Safari Mobile. Embora eu tenha testado a versão mobile em um navegador android, constatei alguns erros durante a navegação.

Não posso dizer que o mesmo ocorre nos outros navegadores, porque meu smartphone não é tão smart assim, mas se você tiver a oportunidade de testar a versão mobile com o Google Chrome para Android ou outro navegador, poste sua experiência nos comentários!

Com informações: Blogger Buzz

[Blogger - Hacks] - Menu dropdown para os Templates Dinâmicos do Blogger

2012-08-18T15:00:00.000-03:00

Olá querido leitor, seja bem-vindo a mais um artigo. Se é você quem customiza o seu template, você deve saber o quão difícil é ter exclusividade na blogosfera hoje em dia, pois o plágio também assola os templates dos blogs. Diferente dos plagiadores, você deve saber o trabalho que dá customizar um template, e abrir mão dele após ter tido todo esse sofrimento não é fácil. Há quase 1 ano atrás, eu publiquei o artigo: Dynamic Views apresenta sete novos modelos de template no Blogger, onde mostro como tornar um dos novos templates dinâmicos do Blogger, no template padrão do seu blog.

Mas, como eu falei, é difícil abrir mão de um template que você batalhou bastante para customizar, por isso, no artigo de hoje, eu mostrarei a você como adicionar um menu dropdown em seu blog, para que seus leitores possam visualizá-lo com um dos sete novos templates dinâmicos do Blogger, mas sem que você precise abrir mão do seu tão querido template. O menu possui a seguinte aparência:

Visualização Dinâmica

...se você selecionar algum dos modelos e clicar no botão Visualizar, o blog se atualizará e passará a ser exibido com o template dinâmico que você escolheu. Porém, esse método não é permanente, ou seja, se o leitor fechar a página do seu blog e acessá-la novamente, ele verá o blog com o template original, e se quiser visualizá-lo com o template dinâmico novamente, deverá clicar no botão de visualização de novo.

Você pode instalar esse menu em qualquer lugar do seu blog que aceite HTML, mas neste tutorial eu mostrarei como adicioná-lo à sidebar (barra lateral) do blog. Agora chega de falar e vamos ao que interessa. Siga os passos abaixo para instalar o menu em seu blog.

Adicionando o menu na sidebar do blog

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > HTML/JavaScript.

2. Adicione o código mostrado abaixo, dentro do campo de conteúdo do gadget.

<div align="center">
<div style='color: #000000;font-weight: bold;'>Visualização Dinâmica
<select id='dropdowndynamicview'>
<option selected='selected' value=''>Escolha um modelo...</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/classic'>Classic</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/flipcard'>Flipcard</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/magazine'>Magazine</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/mosaic'>Mosaic</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/sidebar'>Sidebar</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/snapshot'>Snapshot</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/timeslide'>Timeslide</option>
</select> <button onclick='document.location.href=document.getElementById('dropdowndynamicview').value;'>Visualizar</button></div>
</div>

Agora, veja abaixo quais são as modificações que você pode fazer no código.

As partes destacadas em azul, você deve substituir pelo nome do seu blog. Caso você possua um domínio próprio deve substituir o endereço inteiro, não somente a parte em azul;
A parte destacada em vermelho, é a frase do botão Visualizar. Você pode substituí-la para qualquer outra que desejar;
A parte destacada em rosa, é apenas uma frase que aparecerá acima do menu dropdown. Caso você esteja adicionando o menu em um gadget novo, você pode apagar esta frase e escrevê-la no título do gadget, ou então mudá-la para qualquer outra que você desejar.

3. Após fazer as modificações, basta clicar no botão Salvar. Agora é só acessar seu blog e conferir se o menu está funcionando de maneira correta. Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

[Programas] - Como baixar e instalar o Facebook Messenger em seu computador

2012-08-12T18:23:00.000-03:00

Uma das maiores redes sociais da atualidade é, sem dúvida nenhuma, o Facebook. Através dela você pode compartilhar fotos, criar grupos de interação privada ou pública, conversar com seus contatos etc. Pois bem, esse último recurso que eu citei, acaba de ser facilitado aos usuários. Até um tempo atrás, só era possível que você conversasse com seus contatos através da web (acessando o site do Facebook), ou pelo seu smartphone, através do aplicativo Facebook Messenger.

O que poucas pessoas sabem, é que agora é possível conversar com os contatos do Facebook sem precisar acessar o site da rede social. Isso pode ser feito através do programa: Facebook Messenger para Windows. Esse programa foi criado pela própria equipe do Facebook, portanto, é um programa oficial. Através dele você poderá conversar com seus contatos do Facebook em uma interface similar a do MSN Messenger, recebendo alertas sempre que alguém falar com você. Veja uma imagem ilustrativa desse programa na imagem abaixo.

Sem dúvidas esse programa veio para facilitar a vida dos ~~viciados~~ usuários da rede social. Como você pode perceber, há a possibilidade de conversar com mais de um contato ao mesmo tempo, e cada conversa fica em uma aba específica. Caso tenha se interessado em testar o Messenger do Facebook, verifique os passos abaixo.

Baixando e instalando o Facebook Messenger para Windows

1. Primeiramente você deve baixar o arquivo de instalação do programa, você pode fazer o download na página oficial do programa, acessando o endereço: http://adf.ly/Rvdgh.

2. Ao clicar no link acima, uma janela com publicidade será mostrada, aguarde 5 segundos e clique na frase "Fechar Propaganda" localizada no canto superior direito da página. Após clicar na frase você será direcionado automaticamente para a página de download. Ao acessar a página de download, clique no botão Instalar agora para começar a baixar o instalador.

3. Após ter feito o download do instalador, clique sobre ele duas vezes para executá-lo (processo padrão para instalar programas no computador), após executar o arquivo o programa será instalado automaticamente em seu computador. Ao final da instalação, a janela de login do messenger será aberta, como ilustra a imagem abaixo.

A partir deste momento você já terá o programa em seu computador, e poderá conversar com qualquer contato do seu Facebook através dele. Para isso, basta inserir seu endereço de e-mail e senha na rede social, e clicar no botão Log In. Após o login você verá todos os seus contatos, bastando clicar sobre eles para começar a conversar.

Prós do programa

Não é preciso acessar a rede social para conversar com os contatos;
Instalação rápida e simples;
O programa pode ser minimizado para a bandeja de notificações (próximo ao relógio);
Possibilidade de ver solicitações de amizade, conversas e notificações de marcação etc.;
Funcionalidades do bate-papo (bloquear, aparecer offline etc.) estão disponíveis no programa;
Possibilidade de fixar o messenger na lateral direita do desktop;
Possibilidade de conversar com mais de um contato ao mesmo tempo;
Conversas separadas em abas.

Contras do programa

O programa não é suportado no Windows XP;
Não há suporte a conversas em grupo;
Não há suporte a chamadas de vídeo.

Para tirar dúvidas e obter mais informações sobre o programa, visite a Central de Ajuda do Facebook. Caso queira desinstalar o Facebook Messenger para Windows futuramente, basta executar o processo padrão de desinstalação de programas: Iniciar > Painel de Controle > Desinstalar um programa > Facebook Messenger.

Com certeza esse programa traz muitas vantagens para quem gosta de conversar através do bate-papo da rede social, é o Facebook investindo pesado para manter os usuários conectados a todo instante em sua rede social. Espero que tenha gostado do artigo e que faça bom uso do programa.

Gadgets que podem ser utilizados nos templates dinâmicos do Blogger

2012-08-11T15:00:00.000-03:00

Uma das grandes queixas que os usuários da plataforma Blogger fizeram quando os templates dinâmicos foram lançados, foi a falta de suporte à uma maior customização e à utilização de gadgets. Embora os novos templates tivessem sido criados com o que há de melhor em tecnologia web, eles pecaram nesse quesito, fazendo, talvez, com que poucos usuários os utilizassem. Mas passado é passado, e eu estou escrevendo este artigo para mostrar que os templates dinâmicos já possuem suporte aos gadgets. Nem todos os gadgets são suportados, apenas os principais e mais recentes. Abaixo você pode conferir quais são os gadgets que você pode utilizar em seu template dinâmico.

Gadget Arquivo do blog

Este gadget é responsável por adicionar uma lista com todos os artigos que você publicou em seu blog. A lista dos artigos pode ser apresentada de diversas formas, tudo dependerá de como você irá configurar o gadget. Ele é, com certeza, uma ótima maneira de facilitar a busca de artigos no seu blog, e de facilitar que seus leitores visitem outros artigos, consequentemente, permanecendo mais tempo em seu blog.

Gadget Botão +1

Esse gadget facilita a instalação do botão Plus One do Google. Tal botão serve para que os leitores possam marcar seus artigos com +1. Para mais informações sobre esse botão, veja nosso artigo: Novidade: botão +1 (mais um) para blogs do Blogger. E para saber como instalá-lo manualmente em qualquer parte do seu blog, leia este outro artigo: Instalando o botão +1 (mais um) em blogs do Blogger.

Gadget Google Tradutor

Se você recebe visitas de outros países, este gadget foi feito para você. Ele permite que os leitores do seu blog visualizem seus artigos no idioma deles. Sem dúvida esse é um dos gadget mais importantes na questão de conquistar leitores de outros países. Caso você queira utilizar um sistema de tradução em outra parte do seu template, confira nosso artigo: Barra de tradução no topo dos artigos no Blogger.

Gadget Lista

Este gadget permite que você crie uma lista sobre qualquer coisa: seus livros favoritos, filmes, seriados, sites, ou qualquer outra coisa que você goste. Os itens da lista podem ser mostrados em texto plano, ou um link direcionando para qualquer endereço da web.

Gadget Lista de blogs

Todos têm seus blogs e sites preferidos na web, e esse gadget permite que você adicione uma lista bem dinâmica no seu blog, que mostra qual foi o último artigo publicado pelos blogs/sites que você mais gosta. Você pode adicionar seus blogs favoritos manualmente ou importá-los do Google Reader — sem dúvidas uma ótima forma de acompanhar seus blogs favoritos, e ao mesmo tempo divulga-los em seu blog.

Gadget Links de inscrição

Este gadget fornece a opção de seus leitores acompanharem seus artigos através do Google Reader, ou do RSS Feed. Assim eles poderão saber sempre que você publicar um novo artigo. Você pode ver outra maneira de informar seus leitores sobre novos artigos, lendo nosso artigo: FeedBurner - Criando um sistema de newsletter para o seu blog.

Gadget Lista de links

Este gadget tem a mesma função do Gadget de Lista, que foi explicado acima. Porém, ele não permite que sejam adicionados itens em texto plano, apenas links. E ele pode ser utilizado também como menu horizontal no blog. Para mais informações, leia o artigo: Como colocar um menu horizontal em blogs do Blogger.

Gadget Marcadores

Este é um dos principais gadgets a serem utilizados no Blogger. Através dele os seus leitores podem encontrar artigos relacionados a um determinado assunto. Porém, é importante que, para que esse gadget funcione, você adicione marcadores a seus artigos quando você os escreve.

Gadget Perfil

Este gadget mostra uma pequena descrição e uma foto do autor do blog, isso se o autor tiver adicionado uma descrição sobre si e uma foto em seu perfil. O gadget poderá mostrar o perfil do autor no Blogger ou na rede social Google Plus, isso dependerá se o autor fez ou não a integração entre o perfil do Blogger e o perfil do Google Plus.

Gadget Seguidores

Antigamente este gadget era indispensável em um blog do Blogger, pois ele permite que os leitores sigam um determinado blog. Inclusive, este gadget já foi um dos principais medidores de popularidade de um blog, pois quanto mais seguidores um blog tivesse, mais popular ele era. Hoje em dia esse gadget já não é mais tão utilizado e já não tem mais um peso tão grande na popularidade de um blog, mas ainda há pessoas que o utilizam.

Gadget Selo do Google+

Este gadget permite que você adicione um botão com o link do seu perfil na rede social Google Plus, ou da página do seu blog na rede social. Isso facilita que seus leitores lhe adicionem no serviço.

E estes são os gadgets que você pode utilizar em seu blog caso goste dos templates dinâmicos do Blogger. Lembre-se que os gadgets ficam quase ocultos, e para que possam ser visualizados é necessário passar o mouse por cima da pequena parte que fica visível na lateral direita do blog, como ilustra a imagem abaixo.

Gadgets no canto direito dos templates dinâmicos do Blogger

A equipe do Blogger tem se esforçado bastante para tornar todos os gadgets compatíveis com seus templates, mas vamos torcer para que, após a atualização de todos os gadgets, novos gadgets sejam adicionados à plataforma. Assim que novos gadgets ficarem compatíveis com as visualizações dinâmicas, esse artigo será atualizado.

[Blogger - Customização] - Como alterar a imagem dos marcadores em blogs do Blogger

2012-08-11T00:53:00.000-03:00

No artigo de hoje, responderei a pergunta feita pela leitora Patrese Fan no artigo: Customizar links externos com seletores CSS em blogs do Blogger. Ela me perguntou como eu fiz para alterar a imagem dos marcadores que eu utilizo na sidebar do blog, no gadget: Marcadores, para ser mais exato. Isso é extremamente fácil de ser feito, e é o que mostrarei neste artigo.

Alterando a imagem dos marcadores da sidebar (barra lateral)

É possível que alteremos a imagem dos marcadores apenas da sidebar (barra lateral) do blog, evitando que as imagens apareçam em marcadores que são colocados em outras áreas do blog. Para alterar os marcadores somente da barra lateral siga os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- CSS para alterar a imagem dos marcadores ----- */
.column-right-inner ul li, .column-left-inner ul li {
list-style: url(link-da-imagem) inside;
}

4. O código acima afetará os blogs que utilizam tanto a sidebar do lado direito do blog, quanto do esquerdo. Substitua a parte destacada em vermelho pelo link da imagem que você quer usar como marcador.

5. Após ter feito a substituição, clique em Visualizar modelo e, se estiver tudo certo, clique em Salvar modelo. Pronto, agora é só ir em seu blog e verificar como ficou.

Alterando a imagem dos marcadores dentro dos artigos do blog

Não utilizamos os marcadores apenas na sidebar (barra lateral) do blog. Muitas vezes utilizando os marcadores dentro do conteúdo dos artigos para ementar os tópicos abordados, ou para qualquer outra finalidade. Portanto, se você quer alterar somente os marcadores que aparecem dentro dos artigos, siga os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- CSS para alterar a imagem dos marcadores ----- */
.post-body ul li {
list-style: url(link-da-imagem) inside;
}

4. Substitua a parte destacada em vermelho pelo link da imagem que você quer usar como marcador. Após ter feito a substituição, clique em Visualizar modelo e, se estiver tudo certo, clique em Salvar modelo. Pronto, agora é só ir em seu blog e verificar como ficou.

Alterando a imagem de todos os marcadores do blog

Os dois códigos que foram mostrados acima são bem específicos, ou seja, alteram a imagem dos marcadores apenas da sidebar ou dos artigos, mas há pessoas que preferem mudar todos os marcadores do blog, sem fazer distinção. Para essas pessoas, os passos a serem seguidos são os mostrados abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- CSS para alterar a imagem dos marcadores ----- */
ul li {
list-style: url(link-da-imagem) inside;
}

Alterando a imagem dos marcadores nos templates dinâmicos

Todos os códigos que foram mostrados acima funcionam perfeita nos templates comuns do Blogger, mas há os usuários que prefere utilizar os templates dinâmicos. Se você é um dos adeptos de tais templates, o processo para alterar os marcadores é diferente. Siga os passos abaixo para mudar a imagem dos marcadores nos templates dinâmicos.

Alterar os marcadores dos artigos

Siga os passos abaixo para alterar os marcadores somente dos artigos do seu blog. O código abaixo funcionará em qualquer um dos sete templates dinâmicos fornecidos pelo Blogger.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo e clique no botão Personalizar para acessar o Designer de modelo. Clique no menu Avançado e, em seguida, na opção Adicionar CSS. Cole o código abaixo dentro do campo de CSS.

/* ----- CSS para alterar a imagem dos marcadores ----- */
.entry-content ul li, .entry-summary ul li {
list-style: url(link-da-imagem) inside;
}

2. Substitua a parte destacada em vermelho pelo link da imagem que você quer. Para finalizar clique no botão Aplicar ao blog, localizado no canto superior direito do Designer de Modelo.

Alterar os marcadores dos gadgets

Engana-se quem pensa que não é possível customizar os marcadores utilizados nos gadgets compatíveis com os templates dinâmicos. Caso você use um template dinâmico e tenha instalado o gadget "Lista de links" (ou qualquer outro que utilize marcadores), você poderá customizar os marcadores também, basta seguir os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo e clique no botão Personalizar para acessar o Designer de modelo. Clique no menu Avançado e, em seguida, na opção Adicionar CSS. Cole o código abaixo dentro do campo de CSS.

/* ----- CSS para alterar a imagem dos marcadores ----- */
#gadget-dock div.gadget ul li
list-style: url(link-da-imagem) inside;
}

2. Substitua a parte destacada em vermelho pelo link da imagem que você quer. Para finalizar clique no botão Aplicar ao blog, localizado no canto superior direito do Designer de Modelo.

É possível customizar os marcadores de qualquer parte do blog, é possível inclusive adicionar um marcador diferente para cada elemento, mas não há um código específico para tudo, pois a alteração dependerá do template que está sendo utilizado no blog — cada template possui seus próprios códigos.

Aconselho que você não utilize imagens muito grandes, limite-se a utilizar imagens com tamanho de 10x10 pixels ou 12x12 pixels. Você pode encontrar imagens clicando aqui e aqui, mas pode criar suas próprias imagens também. Se gostou do artigo, ficou com dúvidas ou achou ele útil, participe postando um comentário. Sugestões também são sempre bem-vindas!

[FeedBurner] - Cancelando o recebimento de newsletters de blogs que usam o FeedBurner

2012-08-09T03:48:00.000-03:00

Quando você gosta dos artigos de um blog, é natural que você queira estar sempre ligado nas novidades, mas raramente você terá tempo para acessar o blog diariamente para ficar por dentro das novidades. Visando facilitar esse acompanhamento, alguns blogs fornecem um serviço de entrega de artigos por e-mail, chamado: newsletter. Com isso, sempre que o autor publica um novo artigo, você o recebe no conforto do seu e-mail, mas em alguns casos você pode querer não mais receber tais novidades em seu e-mail, o que fazer nesse caso?

Se o serviço que o tal blog utiliza para enviar os e-mails com os novos artigos é o FeedBurner, o cancelamento da entrega é extremamente simples. E o cancelamento pode ser feito tanto pelo leitor (que recebe a newsletter), quando pelo autor do blog (que envia a newsletter). Abaixo você confere como fazer esse cancelamento.

Cancelamento da newsletter do FeedBurner pelo próprio leitor

1. Quando você receber um e-mail do blog ao qual você assinou a newsletter, desça o e-mail até o final e você verá algumas frases em inglês, como ilustra a imagem abaixo.

Clique para ampliar

2. Para cancelar o recebimento da newsletter, clique sobre o link "unsuscribe now", e você será direcionado para uma página do FeedBurner, como ilustrado na imagem abaixo.

3. Para finalizar o cancelamento, basta clicar no botão Yes, unsubscribe me now. Pronto, a partir desse momento você não receberá mais nenhum e-mail com os artigos de tal blog. Note que quando um leitor cancela uma assinatura de newsletter do FeedBurner, o autor do blog recebe um e-mail do FeedBUrner informando o endereço de e-mail do leitor que cancelou a assinatura.

Cancelamento da newsletter pelo autor do blog

Dificilmente isso acontece, mas há a possibilidade de que alguém cadastre maliciosamente o e-mail de terceiros em sistemas de newsletter e/ou o leitor pode entrar em contato com o autor do blog solicitando o cancelamento do envio das newsletter, nesse caso o cancelamento poderá ser feito pelo autor seguindo os passos abaixo.

1. Solicite ao leitor que informe o endereço de e-mail no qual está recebendo as newsletters, e que deseja fazer o cancelamento.

2. Acesse sua conta do FeedBurner (http://feedburner.google.com/), e clique no nome do seu feed, como ilustra a imagem abaixo.

3. Clique no menu Publicar e em seguida no menu Email Subscriptions. Feito isso, role a página até o final e clique no link "Ver detalhes de cadastros". Uma lista com vários e-mails aparecerá, procure o e-mail que o leitor informou e clique sobre o ícone de X, como ilustra a imagem abaixo.

Fazendo isso, você excluirá permanentemente o cadastro desse leitor e ele não receberá mais as newsletters de seu blog.

Note que se alguém tiver cadastrado maliciosamente o e-mail desse leitor diversas vezes, e ele já entrou em contato várias vezes com você pedindo pra cancelar a assinatura pois não é ele quem está se cadastrando, você poderá clicar no botão de Stop que há perto do X.

Clicando no botão de Stop, o cadastro do leitor continuará em seu banco de dados do FeedBurner, mas será desativado e passará a não receber mais as newsletters até que você o ative novamente. Caso alguém tente cadastrar o e-mail enquanto o mesmo está desativado, verá uma mensagem de erro como ilustra a imagem abaixo.

A mensagem acima aparecerá em inglês, mas informa o seguinte: "A assinatura foi desativada para o endereço email-do-leitor@exemplo.com. Por favor, entre em contato com o autor do blog em Nome do Blog para reativar a assinatura." (tradução livre e adaptada para o português). As partes destacadas em vermelho são variáveis.

E essas são as maneiras de cancelar a assinatura de uma newsletter que é gerada pelo sistema FeedBurner. Se você é autor de algum blog e se interessou no sistema de newsletter, saiba como instalá-lo em seu blog visitando nosso artigo: FeedBurner - Criando um sistema de newsletter para o seu blog.

[Blogger] - Blogger adiciona integração direta com a rede social Google Plus

2012-08-02T03:33:00.000-03:00

Olá querido leitor, dia 31.07.2012, a equipe do Blogger anunciou em seu blog oficial (Blogger Buzz) a integração entre a plataforma Blogger e a rede social Google Plus. Há um tempo atrás o Blogger já havia disponibilizado uma integração entre os perfis de usuário destes dois serviços, mas agora a integração promete afetar os serviços em si, e não apenas os perfis dos usuários.

Ao acessar o painel de controle do seu blog, você notará que foi adicionado um novo menu chamado "Google+" (veja a imagem abaixo). Será dentro deste menu que a equipe do Blogger centralizará todos os recursos e ferramentas de integração entre sua rede social e o Blogger.

Novo menu da plataforma Blogger para integração com o Google Plus

Caso você não tenha integrado o seu perfil do Blogger ao do Google Plus quando foi liberada essa opção, você poderá fazê-lo através deste novo menu — lembrando que a integração não é obrigatória, mas trará muitas vantagens caso você a faça! Confira agora algumas informações de como fazer a integração entre o seu blog e o Google Plus, e em que isso irá lhe ajudar.

Informações sobre a integração do Blogger e Google Plus

Antes de fazer essa integração é importante que você leia algumas informações fornecidas na página de FAQ do Blogger. Mas, se você não quiser ler tais informações, o que eu recomendo que você faça, você pode clicar aqui e ir direto para os passos de como fazer a integração.

O que acontece quando mudo para um perfil do Google+?

As informações de seu blog baseadas anteriormente em seu perfil do Blogger, como nome de exibição e foto, passam a refletir as informações de seu perfil do Google+. Depois da mudança, seu nome de exibição é substituído por seu nome do perfil do Google+. Porém, seu nome de exibição do Blogger é mantido nos comentários feitos antes da mudança. Todas as ocorrências de seu nome em feeds, o gadget de seu perfil do Blogger, novos comentários e as ocorrências de seu nome de exibição do Blogger em comentários anteriores passam a criar um link para o seu Perfil do Google+.

É obrigatório associar meu blog a meu nome verdadeiro?

Não, associar publicamente seu blog a seu nome verdadeiro não é obrigatório. A opção de vincular seu blog ao seu nome verdadeiro só deve ser feita por aqueles que desejam associar publicamente uma identidade estabelecida a seus blogs.

Quando mudo para um perfil do Google+, o que acontece com meu perfil do Blogger?

Seu perfil do Blogger fica indisponível para os visitantes e as pessoas são redirecionadas para seu perfil do Google+.

Esta mudança afeta quais blogs?

A mudança de perfil afeta todos os blogs com os quais você pode contribuir, inclusive blogs com vários autores. Para ver todos os blogs afetados, consulte a lista no painel, certificando-se de clicar em "Blogs excluídos" para incluir todos os blogs que possam estar ocultos (se não visualizar essa opção, isso significa que você não excluiu blogs).

Mais informações.

Integrando sua conta do Blogger com a conta do Google Plus

1. Após acessar o novo menu "Google+", clique sobre o grande botão azul que está localizado no canto superior direito da página: Fazer upgrade para o Google+.

2. Após ter clicado no botão você será direcionado para a página de integração entre os dois serviços, como ilustra a imagem abaixo. Leia atentamente o que está escrito nessa página e, se você ainda quiser fazer a integração, marque a opção "Li o texto acima e compreendo [...] usar o perfil do Google+ no Blogger", e clique no botão Mudar agora.

Página de integração entre o Blogger e o Google Plus

3. Após clicar no botão, você verá uma página contendo uma lista com todos os blogs que você criou (veja a imagem abaixo), desde seu blog oficial até blogs de teste e blogs em que você participa como autor ou administrador. Neste momento, você deverá escolher quais destes blogs você deseja mostrar em seu perfil do Google Plus. Após escolher os blogs que deseja mostrar, clique no botão Adicionar Blogs.

4. Por fim, você será direcionado para a página principal do seu painel de controle, onde verá uma mensagem informando que a integração entre os perfis foi realizada com sucesso. E agora ao acessar o menu Google+ você deverá ver o seu perfil do Google Plus — e a página do seu blog na rede social, caso você tenha uma — , como ilustra a imagem abaixo.

Novo menu "Google+" após a integração entre o Blogger e a rede social Google Plus

Recursos e vantagens da integração de perfis

Após realizar a integração entre os perfis, você notará que abaixo da sua imagem de perfil haverá a opção: "Perguntar se deseja compartilhar após a postagem", ao marcar esta opção sempre que você publicar um novo artigo, uma janela pop-up surgirá no seu painel de controle, permitindo que você compartilhe imediatamente o link deste artigo com os círculos que você possui no Google Plus.

Note que para compartilhar o artigo na timeline do seu perfil pessoal, o mesmo deverá estar selecionado (veja a Imagem 1), e para compartilhar o artigo na timeline da página do seu blog no Google Plus, é a página que deve estar selecionada (veja a Imagem 2). Você pode alternar entre seu perfil e sua página clicando sobre a foto dos mesmos.

Imagem 1: perfil do Google Plus selecionado

Imagem 2: página no Google Plus selecionada

Além do compartilhamento imediato dos artigos, outra vantagem da integração seria facilitar que a sua foto e descrição apareçam logo abaixo dos seus artigos nos resultados de pesquisa do Google Search. Para saber mais sobre esse assunto, leia o artigo escrito pelo Adelson, dono do blog Gerenciando blog.

Foto e nome do autor nos resultados do Google - Gerenciando Blog

Desfazer a integração entre o perfil do Blogger e do Google Plus

Após ter integrado o seu perfil do Blogger ao Google Plus, você terá 30 dias para desfazer a integração e recuperar o seu perfil do Blogger, após esses 30 dias a reversão da integração ainda será possível, mas um novo perfil do Blogger será criado para você. Confira abaixo como desfazer essa integração.

1. Acesse o endereço: http://www.blogger.com/revert-profile.g, e você verá a seguinte página.

2. Clique no botão Mudar para um perfil limitado do Blogger, e uma nova página será mostrada solicitando que você forneça um nome para assinar suas postagens, ser utilizado nos comentários e no gadget de Perfil do Blogger, como mostra a imagem abaixo.

3. Após ter escolhido seu nome, clique no botão Continuar para o Blogger. Pronto, você será direcionado para a página inicial do seu painel de controle, e terá voltado a utilizar uma conta do Blogger não associada de maneira direta com o Google Plus.

Lembre-se que a mudança não é obrigatória, portanto, você pode continuar com o seu perfil padrão do Blogger. Os blogueiros que utilizam pseudônimos (nomes fictícios) para assinar suas postagens, provavelmente, não acharão interessante fazer essa integração, pois ao fazer isso as pessoas poderão saber seus nomes verdadeiros através de sua conta do Google Plus — mas a integração com certeza trará algumas vantagens para quem fazê-la.

E esse é o novo menu que o Blogger adicionou a plataforma. Num primeiro momento não há nenhuma novidade real, uma vez que a integração entre os perfis já podia ser feita há um bom tempo atrás. E a opção de compartilhamento imediato já podia ser ativada no menu Configurações. Houve apenas uma centralização das opções referentes ao Google Plus, mas a equipe do Blogger informou em seu artigo, que outras ferramentas e recursos serão adicionados a este menu em breve, para melhorar a utilização de quem possui um perfil na rede social, e mantém um blog no Blogger. E você, o que você acha da integração entre em dois serviços? Deixe sua opinião nos comentários!

Com informações: Blogger Buzz

[Blogger - Customização] - Customizar links externos com seletores CSS no Blogger

2012-07-24T04:27:00.000-03:00

Olá querido leitor, no artigo de hoje veremos como customizar os links externos utilizando seletores CSS. Como todos já devem saber, é comum que ao escrevermos algum artigo adicionemos links ao mesmo, seja para exemplificar uma ideia, citar uma fonte, fazer algum tipo de atribuição ou qualquer outro motivo, e grande parte desses links geralmente são externos (links de outros blogs/sites).

Mas explicar como funciona esse tipo de customização é complicado, o melhor mesmo é demonstrá-lo! Visite nosso blog de testes para ver esta customização na prática. Algumas pessoas diferenciam links adicionando classes CSS à eles, o que para os avanços recentes da web é algo um pouco ultrapassado e trabalhoso, uma vez que sempre que você quiser aplicar um determinado estilo a tal link você precisará adicionar a classe à ele. Para conseguir o efeito mostrado no exemplo acima utilizaremos um seletor CSS, que adicionará a imagem a qualquer link externo de maneira automática! Veja o passo a passo logo abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima dele, adicione este outro código.

/* Customização de links externos */
.post-body a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-content a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-summary a[href ^= 'http']:not([href *= 'bloggandonaweb.']) {
    background: transparent url(link-da-imagem) no-repeat right center;
    padding-right: 18px;
}
.post-body div.separator > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.post-body table.tr-caption-container td > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-content div.separator > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-content table.tr-caption-container td > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-summary div.separator > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-summary table.tr-caption-container td > a[href ^= 'http']:not([href *= 'bloggandonaweb.']) {
    background: none !important;
    padding-right: 0px !important;
}

Substitua a parte que foi destacada em vermelho pelo endereço do seu blog, mas sem o ".com", ".com.br" ou qualquer outro domínio que você possua. Altere também a parte destacada em azul pelo link da imagem que você queira utilizar para indicar que o link é externo (você pode encontrar imagens clicando aqui).

4. Para finalizar clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, a partir de agora qualquer link que você adicionar em seu blog que direcione o leitor para outro site aparecerá com a imagem que você escolheu.

NOTA: caso você tenha conhecimentos básicos sobre CSS, poderá adicionar outras propriedades para customizar ainda mais os links, tais quais: alterar as cores, fontes, tamanhos etc.

Espero que tenham gostado da dica e que façam bom uso! :)

Com informações: Vagabundia.

Atualização — 24.03.2012 às 17h00
O código do passo 3 foi atualizado para inclusão de uma "condicional", que evita que imagens que direcionam para sites externos apareçam com a imagem de link externo, o que poderia, em alguns casos, quebrar a diagramação do texto do artigo.

[Blogger - SEO] - Links permanentes para os artigos do seu blog do Blogger

2012-07-19T00:18:00.000-03:00

Uma das grandes queixas dos usuários da plataforma Blogger, sempre foi as URL's pouco amigáveis para os artigos de blogs mantidos nesta plataforma. Ter uma URL amigável para seus artigos é muito importante para questões de SEO, pois esse detalhe ajuda os blogs e sites a melhor se posicionarem nos motores de busca, uma vez que a URL reflete de maneira fiel o título dos artigos. Pois agora essa queixa é coisa do passado! Há um tempo atrás a equipe do Blogger já havia liberado no Blogger in Draft a opção de links permanentes para os artigos, mas agora esta opção está presente também para quem utiliza o painel de controle padrão da plataforma.

Diferença entre links permanentes e não-permanentes

Após o anúncio que fiz acima, você deve estar se perguntando do que se trata esse tal link permanente. Pois bem, vejamos no que isso afetará o seu blog. Ao escrever um artigo no seu blog, você indica um título para o mesmo, e assim que publica tal artigo, a plataforma do Blogger gera automaticamente um link para este artigo. Por exemplo, o link (URL) do meu artigo sobre como adicionar uma seta para o topo do blog com efeito deslizante em JQuery, é o mostrado abaixo.

http://www.hdblog.com.br/2012/06/seta-para-o-topo-do-blog-com-efeito.html

Note que o Blogger gerou automaticamente a parte que foi destacada em vermelho, mas que ele cortou o título e ficou faltando uma parte, o que pode fazer uma grande diferença nos mecanismos de busca para esse meu artigo, uma vez que se o link do artigo tivesse a palavra "jQuery", isso poderia atrair mais visitas para mim. Antigamente não podíamos controlar esse truncamento do link dos artigos, mas com a adição dos links permanentes podemos escrever o que quisermos nas URL's. Por exemplo, seria melhor que o link acima fosse como o mostrado abaixo.

http://www.hdblog.com.br/2012/06/tutorial-seta-para-o-topo-do-blog-com-efeito-jquery-para-blogs-do-blogger.html

Agora você deve estar se perguntando, qual é a diferença dessa URL para a anterior? A diferença parece pequena ou nula, mas note que a segunda URL, além de ser mais comprida, possui mais palavras-chave, como por exemplo: tutorial, jquery e blogger. Essas palavras que estão no link são palavras que geralmente as pessoas utilizam quando buscam algum tutorial para blogger, o que pode facilitar que meu artigo apareça melhor posicionado nos motores de busca. Uma mudança pequena, mas que pode fazer toda a diferença no momento de obter mais visitas para o blog!

Como utilizo os links permanentes no meu blog do Blogger?

A utilização dos links permanentes é muito simples. Após escrever seu artigo, e ter escolhido um título para ele, você poderá digitar a URL que desejar clicando na opção Links, presente na barra lateral do seu editor de artigos (como ilustra a imagem abaixo), em seguida, marcando a opção Link permanente personalizado e, por fim, digitando o que você quiser.

Opção de links permanentes no painel de controle do Blogger

INFORMAÇÃO: você pode utilizar nos seus links permanentes apenas letras de A-Z (maiúsculas e minúsculas), números de 0-9, traço-baixo (também conhecido como: underline ou sublinhado), hifens e ponto final. Caso você deixe marcada a opção "Link permanente automático", o Blogger gerará a URL do seu artigo automaticamente (como ele sempre fez).

Após você ter digitado o que quer para a sua URL, basta publicar o artigo normalmente. E é importante que você saiba que este recurso só funciona para novos artigos, e não funcionará para artigos que já tenham sido publicados, portanto, você não poderá alterar a URL dos artigos que você já publicou em seu blog. [INFORMAÇÃO ATUALIZADA]

Sem dúvidas a equipe do Blogger ganhou alguns pontos com os usuários da plataforma por terem adicionado esse recurso, e ele será um pequeno-grande diferencial para que os blogueiros conquistem mais visitas para seus blogs, e melhor se posicionem nos motores de busca, então não deixe de usá-lo a partir de agora! E você, o que acha dessa novidade, e o que acha que falta para a plataforma Blogger melhorar? Deixe sua opinião nos comentários. Até a próxima!

Atualização — 23.07.2012 às 15h45
Eu havia informado que não era possível alterar a URL de artigos que já tivessem sido publicados no blog, porém, o autor Adelson, dono blog Gerenciando Blog, informou em seu artigo sobre este novo recurso que é possível SIM alterar a URL de posts antigos. Confira como fazer essa alteração e outras dicas bem bacanas no artigo que ele escreveu: URLs personalizadas nas postagens do Blogger.