s

Hacker Explica como Voar de Graça pelo Mundo

Hacker Explica como Voar de Graça pelo Mundo
Andando pelo aeroporto toda suada, cansada, dolorida e preocupada com a dívida acumulada a fim de viajar para outro maldito casamento no exterior, você, às vezes, topa com um cara como Brian Kelly. Ex-funcionário de Wall Street, ele é uma dessas pessoas descoladas que parecem nunca se preocupar com jet lag, atraso ou qualquer outro percalço inevitável das viagens aéreas. E ele tem razão para estar tão sossegado: sua última viagem – com paradas em Gana, Ruanda e África do Sul – custou apenas US$ 5,60.

Na internet, Kelly é conhecido como Points Guy, o dono de um blog que ensina como manipular pontos de cartões de crédito e milhas de voo para conseguir viagens gratuitas ou quase gratuitas. Ele é um pioneiro de uma comunidade maior de "hackers de viagem" que manipulam o sistema como aquelas pessoas que contam cartas nos cassinos. Entretanto, Kelly usa apenas o bom senso e métodos legais, coisas que você não precisa ser o Rain Man para entender. (Ele ganha a vida com os anúncios de cartão de crédito em seu site, mas diz que não aceita brindes dos anunciantes.) Sendo assim, ele é tratado como uma celebridade na blogosfera de viagens e consumo. Seu buldogue francês, Miles, tem até seu próprio Instagram.
Tudo isso me deixa de queixo caído, porque, afundada em empréstimos estudantis como estou atualmente, fica difícil bancar passeios para fora do país. O conceito de ganhar algo de graça é quase intoxicante para mim, assim como a ideia de tirar vantagem de uma interação com uma empresa de cartão de crédito. Então, acompanhei Kelly do aeroporto JFK até seu apartamento em Midtown Manhattan para descobrir como funciona o cérebro dele; na conversa, ele me disse que eu posso conseguir uma passagem de graça para a Europa em questão de meses.
VICE: Quando você começou a aprender sobre pontos?Brian Kelly: Nos anos 90, eu tinha uns 13 anos e sempre fui bom com computadores. Meu pai era consultor, ele estava sempre viajando e não tinha a menor ideia de como usar um computador. Assim, eu o ajudava e comprei todos os voos no Velocity no ano em que o site abriu. Começamos a ganhar um monte de pontos, e ele não sabia como usá-los. Aí eu comprei uma viagem para as Ilhas Cayman quando tinha 13 anos, [o voo] saiu de graça e a gente ficou tipo "Caralho!". Era chato que meu pai estivesse sempre viajando, mas éramos uma família de classe média de seis pessoas da Filadélfia; e, do nada, estávamos viajando até o Caribe pelo preço de ir para Jersey Shore.
Aí fui para a Universidade de Pittsburgh e estudei no exterior. Fui a algumas conferências e viajei para o exterior duas vezes. E, de repente, eu era status ouro. Aí pensei: "Caralho, sou um universitário com renda negativa e subo de nível em cada voo que faço. Tem alguma coisa realmente interessante acontecendo aqui".
E quando você entrou na comunidade das pessoas que fazem isso?Descobri essa subcultura por volta de 2005. Essa era a comunidade de hackers de viagem antes mesmo que eles fossem chamados de "hacker de viagem". Éramos apenas entusiastas das milhas de viagem. Comecei meu blog em 2010, e já havia alguns blogs sobre isso na época, porém fui o primeiro de Nova York. Eu trabalhava em Wall Street na época fazendo recrutamento em universidades... eu viajava pelos EUA tentando convencer [estudantes de tecnologia] a trabalhar para Wall Street em vez de para a Apple, o Google ou o Facebook.

Nessa época eu estava nadando em milhas todo ano, porque eu estava pagando por sessões de informação; logo, mesmo sendo durante a recessão, eu viajava como um milionário. Essa foi a gênese do site. Meus amigos diziam: "Você só pode ser secretamente rico para ir às Seychelles. Você trabalha com RH e ganha uns US$ 65 mil por ano". Só que o valor das milhas que acumulei era maior que meu salário anual. Eu era pobre em dinheiro e rico em milhas.
Larguei meu trabalho um ano depois e fiz minha primeira postagem no blog. Viajei para o Japão e disse "Vamos nessa".
"Vamos nessa" é como eu me sinto agora, pois estou a duas semanas de pagar minha dívida com o cartão de crédito e consertar minhas finanças. Quanto tempo você tem de esperar para começar depois de ter acertado isso?Você vai ficar surpresa como, no minuto em que você pagar, é quase um pulo imediato. Utilização é o fator número um dos seus pontos de crédito. Desde que pague suas contas em dia, você vai ficar bem. Você está no limite. Qual sua pontuação?
Bem ruim. Cerca de 580.Você está bem. Isso deve ser porque você tem uma história relativamente curta de crédito; ou seja, você é alto risco. No entanto, quando você pagar... não estou brincando: em um mês, você pode ganhar 50, 100 pontos.
OK. Assim que meu crédito estiver em dia, qual o primeiro passo?Vou começar com o tipo de cartão de crédito que você devia ter. São três tipos principais. O melhor tipo são os cartões de pontos transferíveis. São os cartões em que você acumula pontos num lugar só e pode transferi-los para parceiros diferentes. Você tem um milhão de opções de como resgatá-los. Com cartões de crédito de companhias aéreas, você ganha milhas. E eu sempre alerto as pessoas: Você colocaria todas as suas economias em ações da Apple? Elas subiram no ano passado, embora possam cair este ano, e você vai se foder.
É a mesma coisa com companhias aéreas. Algumas são incríveis, mas [os pontos] podem perder valor da noite para o dia. A Delta pode falar de um dia para o outro "OK, agora você precisa do dobro de milhas para viajar até a Ásia". E as pessoas dizem "Caralho, eu estava economizando há quatro anos!". As companhias aéreas sempre fazem isso. Entretanto, se você está num programa AmEx – a AmEx tem uns 20 parceiros –, você pode dizer "Não preciso usar a Delta: vou usar meus pontos em outro parceiro para ir à Ásia". É uma questão de diversificar.
Então não vou querer um cartão de uma companhia aérea específica. Que cartão escolho então?O cartão número um que a maioria das pessoas nesse espaço tem, especialmente os nova-iorquinos, é o Chase Sapphire Preferred. Ele tem um bom rendimento. Você ganha dois pontos por dólar gasto em todas as viagens e refeições. Com a maioria dos cartões de companhias aéreas ou hotéis, cada hotel, aluguel de carro, metrô, estacionamento, camping, parques de diversão – tudo isso cai numa grande categoria. Logo, as refeições incluem de serviço de entrega até restaurantes.
Isso é tudo em que gasto, fora o aluguel.Certo. É isso que digo para os nova-iorquinos: muito do seu dinheiro vai para coisas como a entrega de comida – e eles são parceiros dos cartões. Ou seja, você precisa alinhar seu estilo de vida com o cartão certo. E mais: esse cartão te dá 40 mil pontos assim que você o assina, porém você tem de gastar US$ 3 mil em três meses. E a anuidade de US$ 95 é dispensada no primeiro ano. Então, não tem o que pensar. Esses 40 mil pontos, na minha opinião, valem uns US$ 800. É quase uma passagem para a Europa só por fazer o cartão.
Nunca achei que eu ganhava o suficiente para ter um cartão com anuidade. Estou errando aqui?Isso é importante. Muitas pessoas na sua posição vão dizer "Foda-se. Sem anuidade. Isso é o mais importante". Só que o barato sai caro. Esses cartões sem anuidade geralmente são uma bosta. No caso do Sapphire, você ganha 40 mil pontos. Mesmo se você só resgatá-los para voos, isso vale US$ 500. E a anuidade é dispensada. Assim, você tem mais de cinco anos de anuidade paga só no bônus de assinatura, e você tem muitas vantagens. Dito isso, há cartões por aí com anuidade de US$ 450, como o AmEx Platinum e o Citi Prestige, embora esses cartões também possam ser bons. Você só precisa saber como maximizar os benefícios.
O que mais devo procurar num cartão?Pontos e vantagens. Se você viaja, as vantagens podem ser gigantescas. Mesmo com um cartão de companhia aérea. Digamos que você voa com a Delta o tempo todo; se você viaja duas vezes por ano, isso paga sua anuidade. Então, se você viaja muito, é uma boa. E você não precisa gastar nada no cartão. Eu tenho um monte de cartões juntando poeira porque eles têm vantagens. O cartão de crédito do Hyatt, por exemplo, te dá uma diária grátis todo ano, e é US$ 75. Ou seja, tenho uma diária de US$ 250 por US$ 75 de anuidade. Eu faço isso sempre.
Acho que nunca vou ter mais de vinte cartões de crédito como você, mas, se eu quisesse ter dois, qual deveria ser o segundo?O segundo melhor cartão, eu diria, é o Starwood Preferred Guest. Na verdade, é um programa de hotel, porém eles têm um AmEx em que você ganha um ponto por tudo. Seu programa de hotel permite que você transfira os pontos para 34 companhias aéreas. A coisa mais louca com o Starwood Points: para cada 20 mil pontos que você transfere para uma companhia aérea, ele te dá 25 mil milhas aéreas. Pensa nisso: você está acumulando 1,25 milhas aéreas por dólar gasto, que é 25% melhor que os próprios cartões de companhia aérea.
E você pode resgatar os pontos para hotéis, e agora eles têm uma coisa incrível chamada SPG Moments. Para caras que viajam muito a trabalho, quando usam seus pontos, eles não querem usar isso para fazer outra viagem. Então, o Starwood fez esse programa ótimo que dá cadeiras VIPs no US Open, no MSG, etc. Logo, para cada 30 mil pontos, você ganha assentos VIP para um jogo do Knicks. Basicamente, viagens e refeições, eu coloco no Sapphire porque ganho o dobro; no entanto, para o resto (roupas e compras em que não ganho bônus), eu coloco no Starwood. Na internet, pontos do Starwood são mais valiosos.
Algumas pessoas são muito boas nisso, e agora existem vários blogs como o seu. As empresas de cartão de crédito vão começar a contratar caras como você para dificultar a vida de quem quer se dar bem com esses programas? Você vê esses buracos – na falta de uma palavra melhor – se fechando logo?Pontos e milhas são indústrias multibilionárias. As empresas de cartão de crédito usam milhas e pontos para fazer as pessoas terem os cartões delas, o que é muito difícil de fazer. A maioria das pessoas não quer ter cartão de crédito; assim, você precisa incentivá-las, e as empresas não podem dar dinheiro, porque aí você tem de pagar impostos. Milhas de viagem são um jeito de agradar os melhores clientes e evitar impostos. As empresas compram bilhões de dólares de milhas das companhias aéreas. Na verdade, a AmEx tirou a Delta da falência comprando as milhas dela.
É como uma moeda internacional não regulamentada?Sim. Entretanto, quando as pessoas perguntam "Isso vai acabar logo?", eu digo não. Porque todo mundo (as empresas de cartão, as companhias aéreas) estão lucrando.
Read More

Os melhores plugins e botões sociais para Blogger

Os melhores plugins e botões sociais para Blogger



Sempre digo que o compartilhamento de um blog é muito importante. Neste artigo estarei listando alguns dos melhores plugins sociais de compartilhamento usados no blogger, e como configura-los de maneira correta, para que sejam totalmente funcionais.

FACEBOOK LIKE BUTTON

Usado para recomendação de páginas e artigos, é muito útil em seu blog.  Além de tornar simples a interação entre seu blog e a maior rede social do mundo.

O botão pode ser gerado através desta página. Veja abaixo a maneira correta de preencher cada campo:

URL to Like: Aqui deverá ser inserido o url do seu blog, caso queira tornar o botão fixo ao blog. Se desejar tornar o botão flexível a postagens e páginas, basta deixar esta área em branco, e possibilitará a publicação de todo o conteúdo do seu blog.
Layout: Será o modelo usado no botão. É possível configurar alguns modelos, no entanto acho mais interessante usar o layout "button_count". Lembrando que a escolha do layout não irá interferir na funcionalidade do botão.
Width: É aonde você configurará a largura do botão. Se deixar em branco, o conteúdo será configurado automaticamente (o mais recomendado).
Action Type: E por fim o campo onde você configurará a ação a ser executa: curtir ou recomendar. Existe pouca diferença entre as ações. O botão recomendar, geralmente é usado em blogs de notícias.
Após configurar o botão, clique em "Get Code". O código gerado poderá ser inserido através de um gadget HTML/JavaScript em seu blog. Lembrando que, para que o gadget funcione é necessário que insira o código JavaScript junto ao conteúdo do gadget. Ou seja, será necessário copiar os dois códigos que são gerados, e colar no conteúdo do gadget. O conteúdo do gadget ficará semelhante a este:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=492814520829136";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
 O código destacado de vermelho é o código JavaScript. Já o código com listagem normal, em preto é o código de incorporação do gadget, em HTML.

BOTÃO +1 DO GOOGLE+

Outro recurso muito interessante. O botão +1 possibilita que recomente conteúdo do seu blog diretamente no Google+. O botão +1 poder ser gerado nesta página. Entenda o que preencher:
Tamanho: São as dimensões do botão. Os tamanhos podem variar conforme seu interesse ou layout do blog.
Nota: Se você deseja ver seu botão em forma de balão ou em linha.
Idioma: Bem simples, qual o idioma deseja ver o botão.

Um exemplo de como seria o código:
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
A instalação pode ser feita com o mesmo processo do botão anterior. Através de um gadget HTML/JavaScript. Ou se desejar, é possível usar o gadget que o blogger disponibiliza, que gera o código do botão e o insere automaticamente em seu blog com um gadget próprio.

TWEET BUTTON DO TWITTER

Este outro botão é gerado através desta página. Ele tem como função o compartilhamento do conteúdo do seu blog na página do twitter de quem realizar o compartilhamento. O botão é semelhante aos anteriores, tanto na função, quando no procedimento de configuração. Entenda um pouco mais sobre cada campo de preenchimento:

Share URL: Este campo é o que definirá qual url compartilhar ao twitter. Por padrão, é sugerível que mantenha a opção "Use the page URL" habilitada, para que todas as páginas de seu blog, tanto de postagens, como páginas estáticas possam ser compartilhadas.
Tweet text: Campo correspondente ao título a ser inserido no Tweet que será criado. Sugerível também que mantenha a opção "Use the title of the page" habilitada.
Show count: Esta opção deve ser habilitada caso deseje que o botão tenha um contador de Tweets. Eu particularmente gosto de manter um contador de compartilhamento, para ter uma noção do alcance do conteúdo do blog.
Via, Recomend, Hashtag: Configurações opcionais, que não afetaram no funcionamento do botão.
Large button: Habilite esta opção se desejar que o botão seja relativamente grande, comparada ao seu modelo padrão.
Opt-out of tailoring Twitter: Opção relacionada a Sugestões personalizadas do Twitter.
Language: Define o idioma do botão.

O código gerado seria semelhante a este:
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="pt">Tweetar</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
O processo de instalação é o mesmo usado nos outros dois botões anteriores, do Facebook e G+, com o gadget HTML/JavaScript.

INSTALANDO OS BOTÕES NO RODAPÉ DE SUAS POSTAGENS

Embora eu ensinar a como inserir o botão individualmente através do gadget HTML/JavaScript, creio que é algo muito útil o uso de uma barra de compartilhamento abaixo de cada post. Conforme já ensinei neste artigo, é possível cria-la de uma maneira prática, sem a necessidade de criar botão por botão e configura-los. No entanto, como já estamos com os botões criados, não custa nada configurarmos estes botões abaixo das postagens. O procedimento necessita de uma boa atenção, para que tudo ocorra de forma correta.

A primeira coisa que precisamos fazer é o alinhamento e junção dos 3 botões em uma única linha. Poderíamos usar CSS, mas para poupar tempo e explicação, criaremos uma tabela simples com HTML (3x1), e iremos inserir os botões em cada célula da tabela:
<table>
  <tr>
    <td><div id="fb-root"></div><script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=492814520829136";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" expr:href='data:post.url' data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div></td>
    <td><div class="g-plusone"></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-lang="pt">Tweetar</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</td>
  </tr>
</table>
Eis o código pronto, bastando inserir no blog. Vamos em "Modelo" › "Editar HTML". Cliquem na caixa de código, e pressione as teclas "Ctrl + F". Procure por:
<div class='post-footer'>
Você encontrará dois códigos. Cole o código abaixo do segundo código que você encontrar. Ou do trecho que estiver na parte mais inferior do código do blog. Salve as edições.

Você receberá esta mensagem de erro: "Erro ao analisar XML, linha 1434, coluna 62: The reference to entity "appId" must end with the ';' delimiter.", este erro ocorreu comigo em todas as vezes que fiz o procedimento de inserir este código JavaScript do Facebook diretamente no HTML do blog. Para resolve-lo bastará alterar esta linha de código: js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=492814520829136;";

Alterando appId, por amp;appId. Ficará assim:   js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=492814520829136;";

Agora, salve novamente as alterações, e verá que o erro desapareceu, e a barra de compartilhamento está aparecendo normalmente abaixo de todas as postagens do seu blog.



A imagem acima ilustra a barra de compartilhamento que criamos em funcionamento.

Um ponto muito interessante a ressaltar é a questão de problemas provenientes ao compartilhamento com o facebook. Já fiz um tutorial sobre isso, e reforçando que para melhor interação entre o facebook e seu blog, é necessário que crie postagens fáceis de serem identificadas pelo sistema de compartilhamento do site. Criando imagens quadradas (com a mesma dimensão de altura e largura), e criando breves descrições no início das postagens. E é isso, espero que gostem!
Read More

Como não rastrear suas visualizações de página

Como não rastrear suas visualizações de página


As estatísticas e visualizações são muito importantes para a analise do seu blog, e de como anda se tráfego. Neste contexto, é importante que suas próprias visualizações não sejam contabilizadas junto a de outros visitantes. O blogger possui um recurso muito simples e útil para este caso. Siga o passo-a-passo abaixo:

Habilitando a opção: "Não rastrear minhas visualizações de página"

  1. Faça login no blogger, e acesse seu painel;
  2. Selecione o blog desejado e clique no menu "Estatísticas";
  3. Procure pela opção "Não rastrear suas visualizações de página", e clique sobre ela;

  4. Nas duas opções que forem encontradas, marque a segunda: "Não rastrear suas visualizações de página", se salve as alterações.


    Por fim será possível verificar que suas visualizações de páginas não estarão mais contando nas estatísticas, permanecendo somente as visualizações reais do seu blog.
Read More

Como trocar o background (Plano de fundo) do seu blog

Como trocar o background (Plano de fundo) do seu blog

Embora ser algo simples, muitos ainda possuem essa dúvida: como alterar o background do meu blog? A resposta pode ser dada através de depois procedimentos, variando conforme seu template. Caso esteja usando um modelo padrão do Blogger, será possível que altere tanto pelo código CSS, quanto pelo Designer do modelo.


Em templates personalizados, será possível apenas que faça o procedimento utilizando a edição do código CSS do blog, pois nestes modelos a edição via Designer do modelo é inaplicável. Vamos ao que interessa:

ALTERANDO O BACKGROUND VIA DESIGNER DO MODELO (PARA TEMPLATES/MODELOS PADRÕES DO BLOGGER)


No painel do blogger, clique em "Modelo", e em seguida, em "Personalizar". Você será redirecionado a tela de personalização do Designer do Modelo.


No canto superior esquerdo da tela, clique em "Plano de fundo". Bastará agora alterar e configurar seu novo Background, podendo escolher em fazer upload de uma nova imagem de fundo, ou utilizar da galeria disponibilizada pelo Blogger.

ALTERANDO O BACKGROUND VIA CSS (PARA TEMPLATES/MODELOS PERSONALIZADOS)


No painel do blogger, clique em "Modelo", e em seguida, em "Editar HTML". Será aberta a caixa com todos os códigos do seu Blog.

Clique sobre a caixa de códigos, pressione "Ctrl + F" e procure por:
body {
Logo abaixo dessa linha, cole este código:
background: url(url-da-imagem); 
 O trecho "url-da-imagem", deve ser substituído pela url da imagem que será o novo plano de fundo. Para entender e conhecer mais tags a serem aplicadas do Background do seu blog, sugiro que sigam este tutorial: Tutorial CSS - A propriedade CSS background.



É interessante ressaltar que, se o template personalizado já possuir uma imagem de fundo, é necessário procure por: background: url( ao invés do body {, pois a caixa de busca te levará direto ao conteúdo da imagem do background, bastando alterar a url da imagem.
Read More

Bloco de anúncios do AdSense abaixo do título das postagens

Bloco de anúncios do AdSense abaixo do título das postagens

Uma fonte de renda extra nunca é demais. Se você tem um blog com uma quantidade de visitas diárias razoáveis, está na hora de começar a usar o Google AdSense, e fazer proveito de todo o seu trabalho em seu blog. Com o AdSense é possível gerar receita através dos cliques em seus anúncios. Se você ainda não é registrado no Google AdSense, registre-se seguindo este artigo.


1. CRIANDO O BLOCO DE ANÚNCIOS

O primeiro passo é criar um bloco de anúncios com o tamanho desejado para aparecer abaixo do título das postagens. Eu particularmente, sugiro que criei um blog que anúncios personalizado, com a altura máxima de 100px e a largura de 600px. Mas isso irá variar muito conforme as resoluções do seu blog. Para criar um bloco de anúncios, faça o seguinte:

1. Faça login em sua conta do AdSense. Use este link para acessa-la.
2. Já logado em sua conta, clique em "Meus anúncios", na parte superior da tela.
3. Configure seu bloco de anúncios da forma que desejar, seguindo as orientações sobre a configuração de seu tamanho que citei acima.
4. Clique em "Salvar e obter código".



Copie todo o código que for exibido, e salve em algum arquivo de texto como Bloco de notas ou Word, ou então mantenha a janela do navegador onde o código está aberta, pois precisaremos do código a seguir.

2. INSTALANDO O CÓDIGO EM SEU BLOG

A instalação será feita através do código HTML do seu blog, portanto antes de prosseguir, faça backup do seu modelo.

1. No painel de controle co blogger, clique em "Modelo", e em "Editar HTML".
2. Clique na caixa de códigos, e pressione "Ctrl + F".
3. Procure por esta linha de código:
<div class='post-header-line-1'/> 
Provavelmente encontrará mais de um código igual. Opte pelo segundo, ou o que estiver mais abaixo no código do blog.

4. Acima dela, cole este código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='ads' style='border-bottom:1px solid; padding-bottom:10px; padding-top:15px;'>
Código do seu bloco de Anúncios</div>
</b:if>
Ficará algo semelhante a isso:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='ads' style='border-bottom:1px solid #ccc; padding-bottom:10px; padding-top:15px;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Test -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="YYYYYY"
data-ad-slot="XXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</b:if>
Salve o Modelo. Você receberá esta mensagem de erro:  "Erro ao analisar XML, linha X, coluna Y: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. Ocultar notificação".

Para resolver o erro, bastará alterar o início do código JavaScript, onde inserindo o trecho: async='async' ou invés de apenas async, como está no código. No código, ficará assim:
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Salve novamente o modelo, e desta vez verá que o erro não aparecerá.

3. ENTENDO O CÓDIGO QUE FOI INSERIDO

Além do código do anuncio, inserimos uma Div e uma tag Condicional (<b:if cond='data:blog...). A div tem a função de ajudar na organização do código, facilitando localiza-lo através de seu Id, que seria o "ads". Além é claro, do estilo CSS que foi aplicado a ela, que possibilita o anúncio não se misturar com o conteúdo da postagem, devido o uso de uma borda.

A segunda parte do código, a tag condicional, tem uma função muito importante: ocultar os anúncios na página inicial. Portanto, se você usar um resumo automático de postagens, não será necessário se preocupar com a desfiguração do conteúdo, pois a tag condicional não permitirá que os anúncios apareçam na página inicial.

4. OBSERVAÇÕES IMPORTANTES

Com esta diferente forma de exibição dos anúncios em seu blog, é possível obter maior proveitos dos anúncios, e dos cliques dos leitores, pelo fato do conteúdo estar aproximado ao conteúdo das postagens, com uma visualização mais clara e fácil. Algo muito importante que devo sempre lembrar é que o AdSense permite apenas 3 anúncios por página, com isso, certifique-se de que ao abrir uma postagem, a página não exceda esse valor, devido aos anúncios laterais, etc.
Read More

Como reverter aos modelos padrões do Blogger

Como reverter aos modelos padrões do Blogger


Quando alguém tem um problema com template, códigos, e erros em geral referentes a templates e html, eu sempre sugiro que ela reverta o modelo do seu blog, ao padrão do Blogger. Isto é, alterar seu template por um template simples disponibilizado pelo Blogger.

Antes de tudo: faça backup do seu blog!

PORQUE REVERTER AOS MODELOS PADRÃO?

É simples, ao reverter os modelos ao padrão, todas as alterações, códigos, hacks, que foram inseridos no template são removidos automaticamente, dando espaço a um código novo, e sem erros. O mesmo não se aplica aos widgets, pois eles permanecem no blog, independente de reverter ou não o modelo.

Este processo é útil quando se usa um template personalizado, que está com erros de alinhamento ou redirecionamentos de página. Geralmente estes redirecionamentos são causados por códigos JavaScript, com funções camufladas por Contadores de visitas, calendários, e até mesmo relógios.

COMO REVERTER AOS MODELOS PADRÕES DO BLOGGER?

Um procedimento muito simples, creio eu que todos já tenha feito (intencionalmente ou não). No seu painel do Blogger, clique em Modelo. Será aberta uma tela com dezenas de modelos diferentes, bastará apenas selecionar um que mais lhe agradar. Bastará apenas clicar sobe o modelo e ir em Aplicar ou Personalizar (para fazer alterações no modelo selecionado para o template).



O Blogger disponibiliza os seguintes modelos: Simples, Visualizações dinâmicas, Janela de imagem, Espetacular Ltda., Marca d'água, Celestial e Viagem.

EXTRA: O QUE É UM MODELO CLÁSSICO?

Se você rolar até o fim da página, verá que existe uma opção bem diferente: Reverter para o modelos clássicos. Estes modelos, foram os primeiros adotados pelo Blogger, e sua única diferença dos modelos atuais (além da estética e códigos desatualizados), é que não possuem a opção Layout, quando selecionados a um blog, e por isso, os deixam com uma funcionalidade bem baixa.



Algo interessante a se exaltar nestes modelos, é a possibilidade do uso de HTML livre. Sem necessariamente ser obrigado a seguir um padrão de modelo, como ocorre ao usar modelos padrões do Blogger, e esta função se torna bem útil  a blogueiros que desejem criar um blog com apenas uma página, como um blog pessoal de apresentação, ou empresarial.
Read More

Menu que se fixa no topo ao rolar a página no Blogger

Menu que se fixa no topo ao rolar a página no Blogger

Este estilo de menu é o que estou usando em meu blog. Um menu que se fixa ao ao topo do blog, ao rolar a barra de rolagem da página até determinado ponto. É algo bem interessante e ao mesmo tempo diferente, deixando seu blog com uma cara moderna e atualizada. Irei dividir o tutorial em duas partes, a primeira que é a parte referente ao código do menu, e a segunda a instalação no blog, inserindo no html, e tudo mais.


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

Confira um Exemplo - o código usado neste exemplo é o mesmo deixado abaixo.

CÓDIGO DO MENU

1. Código HTML
<div class="conteudo-menu">
<div class="menu">
<ul>
<li><a href="http://seu-link">Início</a></li>
<li><a href="http://seu-link">Sobre</a></li>
<li><a href="http://seu-link">Contato</a></li>
<li><a href="http://seu-link">Anuncie</a></li>
<li><a href="http://seu-link">Parceria</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
Nesse código, os trechos que devem ser alterados estão em negrito. Que é o link da página do blog (ou outra página, postagem ou marcador), e também o nome que será apresentado. Lembre-se que inserir os links entre aspas, pois ao contrário, o código não funcionará.

Caso queira adicionar novos links, bastará duplicar linhas de código que estão entre <li></li>, não se limitando apenas a quantidade de páginas do modelo.

2. Código CSS
.conteudo-menu { background: #ededed; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-bottom: 2px solid #ccc;}
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 880px; height: 37px;}
.menu { height: 37px;}
.menu ul { list-style: none; margin:0; }
.menu ul li {float: left; margin-top: 6px; padding: 6px; border-right: 1px dotted #ccc;}
.menu ul li:first-child { padding-left: 0;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}
A personalização do menu fiz por minha conta. Usei um fundo cinza bem claro, e cor de font também cinza. Deixo os trechos destacados caso queira alterar os valores:

#ededed - Substitua pela cor de fundo do menu.
880px - Substitua pela largura do seu blog. Você poderá ter acesso a essa informação em Modelo › Personalizar › Largura do blog.
#666 - Cor do texto do link.
#777 - Cor do texto do link ao passar o mouse sobre ele.

Se você possuir conhecimentos básicos (no mínimo) com relação ao CSS, saberá alterar outros campos do código, aptando-o ao seu blog.

3. Código JavaScript
<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("document").ready(function($){
var nav = $('.conteudo-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 168) {
nav.addClass("menu-fixo");
} else {
nav.removeClass("menu-fixo");
}
});
});
</script>
Este é o código JavaScript jQuery, que da a função de fixar o menu ao topo da página. Sem ele, seria apenas um menu normal, sem nenhum efeito diferenciado. Neste código, o único trecho a ser alterado será o de vermelho, 168, que refere-se ao valor da altera entre o topo da página e o local onde se encontra o menu.

A função deste trecho é indicar ao código, quantos pixels deveram ser rolados da barra de rolagem até que o menu fique fixo. Você deverá usar uma forma de medição, ou ir inserindo um valor e testando... até que chegue a um valor aproximado ao ideal para o menu.

INSTALANDO EM SEU BLOG

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

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


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


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


6. Salve o Modelo e visualize seu blog.

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

Read More