ASSOCIAÇÃO BRASILEIRA DE BLOGS: 2015

Como gerar facilmente um QR Code com a API do Google

Os QR Codes vêm sendo bastante utilizados atualmente, em várias áreas, para as mais diversas finalidades. Um QR Code (Quick Response Code, ou Código de Resposta Rápida) é um código de barras bidimensional. Trata-se de um tipo de código de barras desenvolvido pela empresa Denso-Wave (parte do grupo Toyota) no Japão, em 1994, inicialmente para utilização na indústria automobilística.

Ele foi criado para permitir o rastreamento de veículos durante o processo de fabricação, permitindo a verificação de diversos componentes em alta velocidade. Ao dizermos que o código é bidimensional (2D), queremos dizer que ele funciona tanto na horizontal quanto na vertical. Trocando em miúdos, isto significa que as informações podem ser armazenadas na horizontal e na vertical.

Capazes de armazenar uma quantidade bem maior de informações que os códigos de barras tradicionais (que trabalham apenas com uma dimensão), os QR Codes são passíveis de leitura por câmeras de smartphones e tablets (ao contrário dos códigos tradicionais, que requerem um leitor especial), desde que um aplicativo específico seja utilizado em conjunto, para a compreensão e extração dos dados contidos.

Hoje temos QR Codes em revistas, websites, cartões de visita, anúncios, embalagens de produtos os mais diversos, e até mesmo em jogos eletrônicos (fornecendo mais informações a respeito do título e/ou do enredo, por exemplo, como no caso de Alan Wake, da Remedy Entertainment).

Alguns pontos de ônibus no país também contam com os códigos de barras bidimensionais, e assim os usuários podem obter informações sobre a previsão de chegada de várias linhas e também sobre itinerários (após escanearem os códigos, é claro).

Criando QR Codes com a Google API

Vamos agora ensinar a você, leitor do Código Fonte, a gerar QR Codes rápida e facilmente, sem que seja preciso instalar ou utilizar nenhum software, online ou offline. Dentro de alguns dias publicaremos um outro artigo a respeito deste mesmo assunto, aí sim falando a respeito de ferramentas e opções extras. Mas por agora, vamos te ensinar a gerar um QR code com a API do Google. Um processo extremamente simples.

O Google possui uma API chamada “Google Chart API”, a qual permite a criação de gráficos e a posterior inclusão (embed) dos mesmos em um website ou blog. Ocorre que a “Google Chart API” possui um parâmetro específico para a criação de “charts” do tipo “QR Code”. Trata-se do “cht”.

Na verdade, criar um QR Code utilizando esta API requer apenas a montagem de uma URL específica, incluindo na mesma os dados necessários. Por exemplo, para criar um QR Code do Código Fonte, basta fazer o seguinte:


https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://codigofonte.uol.com.br

No exemplo acima, “chamamos” a Google API e definimos que desejamos criar um gráfico do tipo QR Code, através do “cht=qr”. Já as dimensões do QR code são fornecidas através do “chs=150×150″, e após “chl=”, devemos informar o texto, ou, no caso, a URL.

Vamos deixar mais claro, utilizando o exemplo acima. Vamos destrinchá-lo, para que você entenda melhor. Desconsidere as aspas abaixo:

“https://chart.googleapis.com/chart?” : parte fixa. Chama a API;

“chs=150×150″ : aqui, indicamos as dimensões, em pixels, do código a ser gerado. Poderia ser também 200×200, 250×250, e assim por diante;

“&cht=qr” : aqui indicamos que o tipo de gráfico será “QR”;

“&chl=http://codigofonte.uol.com.br” : finalmente indicamos o texto ou a URL. Altere “codigofonte.uol.com.br” para o texto ou URL de sua preferência;

Perceba os parâmetros utilizados: “chs” (dimensões), “cht” (tipo de gráfico) e “chl” (texto).

Se você utilizar o link que montamos acima, para o QR Code do Código Fonte, você será redirecionado para uma página contendo o mesmo. Confira abaixo:

https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=http://codigofonte.uol.com.br

Você pode utilizar o código QR gerado de duas maneiras: salvando-o como uma imagem em seu computador e então o inserindo no local desejado, em seu site, ou então utilizando html, da maneira abaixo:

<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://codigofonte.uol.com.br">

E o resultado do código acima você vê abaixo, já “embedado”. Escaneie o código abaixo com algum aplicativo leitor de QR Codes:

Caixa curtir página do Facebook no blog

Há muitas maneiras de conseguir “Curtis” em uma página no Facebook do seu blog. Uma dessas maneiras bem interessante é colocando uma caixa (box) centralizado na página do seu blog, onde de tempo em tempo quando o visitante acessar o seu blog, essa caixa será aberta com a opção de curtir a página do Facebook. Veja o exemplo abaixo:

O melhor dessa ferramenta é que o usuário não é obrigado a curtir a página, e além do mais, o código é implementado com um cache, configurado para que a janela não seja aberta todas as vezes que o visitante acessar o seu blog e sim de tempo em tempo.

Veja como colocar em seu blog:

Blogger

1) Faça login no Blogger, acesse a página “Layout”, clique em “Adicionar um Gadget”, escolha a opção “HTML/JavaScript”;

2) Cole o seguinte código no campo em branco:

<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-E9dVofW8BBY/T42WBJ5M22I/AAAAAAAAD_w/w7AL0l9gVKk/s40/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-ibVOtcbbUyU/T42WNcii6_I/AAAAAAAAEAE/Mrplo9QsPks/s32/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://yourjavascript.com/1029251148/jquery.min.js'></script>
<script src="http://yourjavascript.com/1141272178/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expiress = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expiress=" + expiress.toUTCString();
$.colorbox({width:"350px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMUDA ESSE NOME&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:250px;" allowtransparency="true"></iframe>
</center>
</div>
</div>

3) Faça a seguinte alteração no código:

NOME_DA_PAGINA – Substitua pelo nome da sua página que consta no link do Facebook. Exemplo: http://facebook.com/codigosblog (Colocando apenas: codigosblog)

4) Salve e pronto!

COMO ENCONTRAR ANUNCIANTES PARA SEU BLOG OU SITE

A monetização de blogs, ou seja, a obtenção de ganhos financeiros por meio deste veículo de comunicação eletrônica está cada vez maior e com isso surgem diversas alternativas. Mas como encontrar anunciantes para seu site?

A mais badalada forma de ganhar dinheiro ainda usada são os chamados programas de afiliados que tem seus resultados positivos, mas a alternativa para ganhar dinheiro com um blog por meio dos anunciantes diretos, os quais pagam para terem um espaço de propaganda em seu blog, é uma boa opção.

Neste assunto, a primeira questão ser considerada é referente ao seu blog em si que deve ser atraente e interessante para os eventuais interessados em anunciar nele.

Para isso, é essencial que o seu blog possua conteúdo de qualidade, com atualizações constantes, com um tempo considerável de existência de pelo menos um ano. Além disso, o layout das páginas de seu blog deve ser exclusivo e com espaços de alta qualidade gráfica e visual para inserir os anúncios de seus possíveis interessados e a plataforma mais recomendada é o WordPress que oferecem maiores análises dos resultados obtidos por cada anunciante.

Aprenda a encontrar anunciantes diretos para seu site e ganhe muito mais.

Outro ponto importante para encontrar anunciantes interessados em seu site ou blog é o chamado Mídia Kit, que consiste em um arquivo de PDF ou mesmo uma página em seu blog que informe estar disponível para fazer negociações com possíveis assinantes e interessados.

Uma boa estratégia também é mostrar aos seus possíveis anunciantes uma lista com a classificação no Google de seu site ou blog para as palavras-chave de cada um sendo, assim, uma boa opção para vendas.

Mais um grande atraente de anunciantes de seu site ou blog é possuir um bom tráfego de visitantes e usuários que serve como uma garantia de um retorno mais rápido dos investimentos a serem realizados.

Porém, uma questão que deve ser considerada é o fato de que a venda direta de publicidade em um blog vai atrair de maneira inicial os pequenos anunciantes relacionados ao ramo e que a partir da sua influência e do aumento no tráfego irá atrair então grandes anunciantes sendo preciso, portanto, paciência nesta ação.

Além disso, é interessante colocar em seu site ou blog uma página “Anuncie Aqui” com informações sobre o site, o tráfego ou fatores que podem determinar o interesse de seus futuros anunciantes. E você, o que utiliza para encontrar anunciantes para seu site?

Fast News é um estilo box-premium Ultra Blogger Template por André Santos. Rápido 2.0 é mais rápido, melhor e mais elegante, em seguida, seu antecessor. Suas características são de cair o queixo layout bonito com a indústria líder de widgets de sites personalizados sociais e diante.Este modelo irá melhorar o seu e os seus visitantes experiência Blogger. É cheio ágil e funcional, não importa o tamanho da tela seus visitantes estão vindo. Também é perfeito para monetização e seu corpo compacto o torna um forte Adsense template blogger pronto.

Gonzo: modelo blogger estilo revista

DEMOSTRAÇÃO

Gonzo é um modelo blogger estilo revista responsivo feito especialmente para notícias, tecnologia, blogs, multimídia e tipo de nicho de blogs. Gonzo é template blogger carregamento rápido codificado com as mais recentes técnicas de HTML5 e CSS3. Gonzo é um modelo blogger com um design funcional impressionante que não só parece ótimo, mas também apresenta um desempenho excepcional também. É um design responsivo; o que significa que podem se encaixar perfeitamente em qualquer tamanho de tela sem empurrões visuais. Ele utiliza as melhores práticas de SEO limpas, e em cima disso, é rápido, simples e fácil de usar.