Backlinks

Backlinks são uma espécie de comentário ou de citação feitos em outro site, sobre seu blog, estes podem ser feitos indiretamente como citar uma postagem de outro blog. Estes são exibidos pelo blogger abaixo da postagem mas são muito raros pois eles só aparecem se forem citações feitas por outro blog do Blogger ou um que possua backlinks. Veja como mostrar estes links recebidos facilmente.

Inserindo no Blog

1)Acesse o painel do Blogger
2)Vá em Layout-> Elementos da página-> Adicionar um Gadget-> Feed
3) E em "URL do Feed" insira o seguinte:http://blogsearch.google.com.br/blogsearch_feeds?q=link:www.noticiaeblog.com&ie=utf-8&num=10&output=rssObs: Substitua o trecho em vermelho pela url do seu blog.
4) Clique em "Sequinte" configure de sua maneira e salve.
Atenção pode ocorre de não ser exibido nenhum link mas paciência um dia você terá.

Imagem: wb4b

Clique e amplie!

O Twitter é sem dúvida o maior, serviço de microblogging, do mundo, mas o ruim dele é não possuir vários idiomas por enquanto. E como não tem o português do Brasil tive de modificar seu principal Widget disponível no twitter.com para que ele possa ser exibido em nosso idioma, para instala-lo é bem simples basta seguir os passos abaixo:
1) Acesse o painel do Blogger
2) Vá em Layout-> Elementos da página-> Adicionar um Gadget-> HTML/JavaScript
3) Insira o seguinte código, alterando os itens :
<div id="twitter_div">
<ul id="twitter_update_list"></ul><span style="font-weight:bold"><a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/noticiaeblog">Siga o Notícia e blog</a></span></div>
<script type="text/javascript" src="http://www.yourjavascript.com/2120803517/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/noticiaeblog.json?callback=twitterCallback2&amp;count=4" type="text/javascript"></script>
4) Altere os itens em vermelho pelo seu nome de usuário do Twitter, e em verde pelo seu nome ou do seu blog.
5) Salve e visualize.

Disponibilize um links e códigos de embutir no final de seus artigos para facilitar seu leitor a divulgar seus conteúdos e postagens em outros sites ajudando assim seu blog ser mais conhecido, pois se seus visitantes gostarem eles vão querer mostrar para outras pessoas e assim difundir seu conteúdo de forma simples e rápida. Basta fazer essas pequenas alterações abaixo em seu HTML.

Inserindo o Códigos

1)Acesse o painel do Blogger(blogger.com)
2)Vá em Layout->Editar HTML->Marque Expandir Modelos de Widgets. Procure pelo seguinte código, utilizando as teclas CTRL e F:<div class='post-footer-line post-footer-line-3'>Abaixo do código anterior insira o seguinte:<div id='linksparaartigo'>
<p><b>Links para Compartilhar ou Embutir</b></p>
<p class='noborder'>
<label for='aa-url'>URL:</label>&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;
</p>
<p>
<label for='aa-forum'>Link em HTML:</label>&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;
</p>
<p>
<label for='aa-forum'>Link para Fórum:</label>&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;
</p>
</div>

Inserindo Estilo ao Código

Vamos agora formatar o código procure por ]]></b:skin> e antes dele insira o seguinte:#linksparaartigo {
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
input{
background-color:#ffffff;
}Salve as alterações e visualize. Abaixo veja na imagem como fica:
Imagem de: Et Dúvida

O Twitter assim como FeedBurner não possui um formato de contador que possa ser personalizado totalmente por isso mais uma vez teve de ser feito uma adaptação para que ele possa trazer o número de seguidores em formato de texto e com isso podemos personaliza-lo, a melhor forma de fazer isso é utilizando um JavaScript que além de não precisar de um servidor especial é muito simples de se instalar veja:

Completando o Código com Seus Dados

O primeiro passo é inserir seu nome de usuário do twitter, ou seja o nome que fica depois de twitter.com/ exemplo twitter.com/noticiaeblog o nome de usuário seria o que está em negrito, abaixo você verá o código JavaScript e como adapta-lo:<script type="text/javascript">
function sntwit(json){
//Iniciando váriveis
var numero = parseInt(json.followers_count);
var texto = ''+numero+'';
document.write(texto);
}
var geranumero = '<s'+'cript src="http://twitter.com/users/show/noticiaeblog.json?callback=sntwit" type="text/javascript"></s'+'cript>';
document.write(geranumero);
</script>Altere o trecho em vermelho pelo seu nome de usuário.

Criando um Gadget ou Inserindo na Página

Se você for usuário do Blogger pode simplesmente inserir em "Layout->Elementos da página->HTML/JavaScript" o código e depois colocar um texto veja o exemplo:Tenho <a href="http://twitter.com/noticiaeblog" style="text-decoration:none;"><span style="color: red;"><script type="text/javascript">
function sntwit(json){
//Iniciando váriveis
var numero = parseInt(json.followers_count);
var texto = ''+numero+'';
document.write(texto);
}
var geranumero = '<s'+'cript src="http://twitter.com/users/show/noticiaeblog.json?callback=sntwit" type="text/javascript"></s'+'cript>';
document.write(geranumero);
</script></span></a> Seguidores no TwitterMude os trechos em vermelho pelo seu nome do twitter, para inserir em uma página HTML insira entre <body> e </body>.Veja como ficará:
Tenho Seguidores no Twitter

O Feed Burner não possui ainda uma forma de exibir a quantidade de leitores de feed, em um formato que possa ser personalizado. Ele apenas disponibiliza uma simples imagem que pode ser personalizada, mas para muitos só ela é pouco pois ela as vezes não combina com o layout do blog, o que impede seu uso. Mas como o FeedBurner possui uma API livre foi possível criar está solução em PHP para exibir em formato de texto podendo ser utilizado em qualquer coisa, veja abaixo:

Função Para Gerar o Número

Está função gera o número baseado na URi do seu feed, URi é a parte destacada no exemplo:
(http://feeds.feedburner.com/noticiaeblog), basta substituir a parte referente a URi no código seguinte:
<?php
$fburl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=noticiaeblog";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $fburl);
$stored = curl_exec($ch);
curl_close($ch);
$grid = new SimpleXMLElement($stored);
$rsscount = $grid->feed->entry['circulation'];
?>
Substitua o trecho em laranja pelo URi. Pronto agora para exibir o número de leitores de feed na página basta inserir o seguinte:
<?php echo $rsscount;?>

Exemplo de Como se Usar

Veja como poderia ficar o código fonte da página ou se preferir veja este demo:

<?php
$fburl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=noticiaeblog";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $fburl);
$stored = curl_exec($ch);
curl_close($ch);
$grid = new SimpleXMLElement($stored);
$rsscount = $grid->feed->entry['circulation'];
?>
<html>
<head>
<title>Teste de como usar</title>
</head>
<body>
Nós temos <span style="color: red;"><b><?php echo $rsscount;?></b></span> leitores de Feed!
</body>
</html>

Lembre de que seu servidor deve suportar PHP!
via: MuiMuio.net

Melhore seu blog ;-)

Ao passar do tempo seu blog vai ficando com altos e baixos nas visitas, e também pode ocorrer de não receber nenhuma ai você pode pensar que pode ser seu conteúdo. Mas muitos vezes são outros fatores que também influenciam isto, hoje vamos ver alguns destes e como resolve-los de forma a se tornar mais visitado:

Layout

Gadgets

Links

Postagens

Atenção seu navegador deve possuir JavaScript
Imagem por W3up

Assim que ficará a sua

O Blogger ainda não tem todas as ferramentas de seu concorrente por isso as vezes temos que criar ferramentas e adapta-las ao ele, um exemplo simples é que o Wordpress possui uma caixa de login, e como o Blogger não possui encontrei uma maneira de inseri-la para que funcione como o Gadget "Meta", veja no tutorial abaixo:

Inserindo

1)Faça login no Blogger
2)Vá em "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript", insira como conteúdo o seguinte código:<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden" />
<br />
<div>
<label for="Email"> Conta:
<br /><input id="Email" tabindex="1" name="Email" size="20" type="text" />
</label>
</div>
<br />
<div>
<label for="Passwd"> Senha: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Esqueceu a senha">?</a>)
<br />
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password" />
</div>
<br />
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit" />
</form></div>3)Salve e visualize

Estilizando com CSS (opcional)

Se desejar dar um estilo a caixa de login, veja:
1)Acesse "Layout"-> "Editar HTML", procure por "]]></b:skin>", e antes insira o seguinte:#Email, #Passwd{
border: 1px solid #659529;
}

#signin-btn-ns {
color: #FFF;
background: #659529;
border: 1px solid #659529;
}2) Salve e visualize.

Fonte: Chica Blogger

Uma forma simples de mostrar códigos.

Uma caixa de códigos é um espaço onde é exibido trechos de HTML para ser copiado como aqui no Notícia e blog, isto é importante pois ajuda o leitor a diferenciar o que é texto do que é código, além de deixar a postagem mais limpa e mais formatada. Para fazer está caixa nós usaremos CSS, então veja abaixo:

Aplicando CSS para definir o modelo da caixa

A primeira coisa a se fazer é inserir o CSS para definir a aparência da caixa e deixa-la bem legal:
1)Acesse o painel do Blogger(blogger.com)
2)Vá em Layout->Editar HTML, procure pelo seguinte trecho no seu blog, lembre de usar Ctrl e F(para procura rápida):
]]></b:skin>
Agora adicione antes, do trecho anterior o seguinte:
code{
-webkit-background-clip:initial;
-webkit-background-origin:initial;
background-attachment:initial;
background-color:#FFF;
background-image:url(http://arquivos.noticiaeblog.com/code.jpg);
background-position:0 0;
background-repeat:no-repeat;
color:#666;
display:block;
font-size:13px;
font:normal normal normal 1em/normal 'Courier New', Fixed, monospace;
line-height:17px;
overflow-x:auto;
overflow-y:auto;
text-align:left;
border-color:#9c6;
border-style:solid;
border-width:1px;
margin:1em 0;
padding:0 20px 0 30px;
}
3)Salve as alterações

Inserindo um código em uma postagem

Veja nas imagens como fazer:

Clique para ampliar

Clique para ampliar

Só pra lembrar as tags que aparecem nas imagens são <code> para iniciar e </code> para fechar.
Pronto você já pode inserir vários código para o seu leitor, simples assim. Ah e se você tem alguma sugestão de postagem fale conosco.

Novas funcionalidades facilitam nossa vida, hoje não vivemos sem photoshop!

Mais uma vez o blogger nos presenteia com uma nova funcionalidade, que o Designer de Modelos. Ele nada mais é do que um painel super avançado de edição de template permitindo alterar fonte, tamanhos, cores, fundo, menu e etc. Lá você vai ver alguns temas que são padrão e poderá personaliza-lo da forma que quiser, mais uma pergunta não foi respondida ainda que é como fica o nosso HTML?! A resposta é simples cheio de variáveis novas e de novas tags xml que foram feitas para que nós possamos editar nosso template sem mecher no famoso Editar HTML. Veja algumas tags que encontrei no novo xml ou seja após personalizar o template pelo painel:
Agora temos mais uma tag de CSS, para definir alguns partes do blog, a tag é está  "]]></b:template-skin>", um pouco maior que a conhecida "]]></b:skin>", as variáveis agora são definidas por grupo exemplo post,"<Group description="Post" selector=".post">", todas as variáveis referentes a postagem devem iniciar com este separador e terminar com </Group>, a também uma meta tag para fazer uma emulação no Internet Explorer 7, que é "<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>", além de ter colocado um script para fazer as páginas estáticas funcionarem bem neste navegador.

Veja também o vídeo feito pela equipe do Blogger para explicar como funciona o novo serviço:
Como você pode ter visto no vídeo o serviço é muito pratico e simples de usar, se ficou com vontade de testar este serviço acesse o blogger in draft ou blogger em teste, ai é só ir em Layout-> Designer de Modelo.

Imagem por: Finissimo

Hoje vou ensinar a criar um contador em PHP, um contador próprio é bom pois estes que vemos por aí volta e meia saem do ar sem se quer falar com a gente, por isso é que ter um em nosso servidor compensa, além do mais este só usa PHP e não PHP+Mysql, não que eu esteja excluindo os que tem "bd", mais estes que não tem são mais práticos e fáceis de se instalar veja abaixo os arquivos necessários e como se instala.

Arquivos Necessários

Os arquivos necessários estão disponíveis para download neste link, baixe e extraia. Abaixo vamos ver para que serve cada um do arquivos:
contador.php -> Este é o que vais gerar e salvar os dados de visitas.
contador.txt -> Este armazena os dados obtidos pelo contador. Mas lembre-se dar permissão 777 para o arquivo.
numeros -> Está pasta é onde ficam as imagens que vão formar o contador.

Montando o Contador

Primeiro envie para seu servidor o arquivo contador.txt, e dê permissão total para ele o equivalente a 777. Envie também a pasta numeros, para o servidor. Agora abra o arquivo contador.php com o Bloco de notas. E altere o seguinte trecho:
$IMG_DIR = "http://www.noticiaeblog.com/numeros/";
Altere a parte em vermelho para o destino da pasta numero em seu servidor, lembre se de começar com "http://" e termina com "/" como o que está no trecho acima. Após alterar envie para o seu servidor.

Instalar

Para instalar é simples escolha o local seja em um HTML entre <body> e </body> ou em um Gadget HTML/JavaScript, aí é só inserir o código da seguinte forma:
<script type="text/javascript" src="http://www.noticiaeblog.com/contador.php"></script>
Lembre-se de substituir o trecho em laranja pelo destino do seu arquivo contador.php, salve e veja como ficou e se não gostou dos números que são exibidos pelo contador solicite outros no fórum.

Imagem por: Campal

Este é um Widget simples que exibe o dia da semana e a data, no seguinte formato:
Sexta-Feira, 05/03/2010, muito bom quando queremos exibir a data na sidebar ou até mesmo no título do blog. Além de deixar seu leitor informado, se você por exemplo tiver um blog do tipo jornal será muito util.

1)Para instalar acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Adicionar um Gadget"->Selecione "HTML/JavaScript"
3)Como conteúdo insira o seguinte:
<script type="text/javascript" src="http://noticiaeblog.googlecode.com/files/data.js"></script>
4)Salve e veja.

Até a próxima postagem...

Pesquise usando imagens ;-)

Agora temos mais uma ferramenta de busca na internet que utiliza o sistema de comparação de imagem para pesquisa. Isso facilita e muito a nossa vida pois as vezes temos uma imagem e queremos saber informações sobre ela mais não há como colocar no mestre Google, ai que entra o TinEye que é um site que busca a partir de imagens do seu computador.

É muito fácil entre no site do TinEye e clique em procurar imagem ai vai abrir uma janela para que você selecione onde está a imagem que você quer buscar. Após isso clique em "Search" e pronto ele encontrará todas as imagens semelhantes e com links.

Assim que ficará o seu!

Hoje venho apresentar a vocês mais uma ferramenta para o Google Buzz que é o botão re-buzz que vem do termo re-tweet, o serviço é oferecido pelo site Buzrr. Ele é um botão no mesmo style do Twitter muito prático e fácil de se instalar, permite que o usuário envie suas postagens facilmente para o buzz. E é compatível com as duas plataformas mais utilizadas. Se você usa o Wordpress pode instalar o plugin neste link e se utiliza o Blogger veja o tutorial abaixo:

Instalando no Blogger

1)Acesse o painel do Blogger(blogger.com)
2)Vá em "Layout"->"Editar HTML"-> Marque a caixa "Expandir modelos de widgets"
3)Procure pelo seguinte trecho utilizando as teclas "CTRL" e "F":<data:post.body/>Acima do trecho anterior adicione o seguinte:<div style='float:right;padding:4px;'>
<script type='text/javascript'>
var __external_use_page_url = &quot;<data:post.url/>&quot;;
/*Esta variável pega a URL da página */
var __external_use_page_summary = &quot;<data:post.title/>&quot;;
/*Esta variável pega o título da página */
</script>
<script src='http://www.buzrr.com/button.js' type='text/javascript'/>
</div>4)Salve as alterações visualize.