sexta-feira, 31 de dezembro de 2010

Trackbacks no Blogger

O Blogger é sem dúvida a melhor plataforma para blogueiros iniciantes, sendo muito fácil blogar com ele, sem precisar de conhecimentos avançados de nada, basta escrever e publicar! Mas fica para trás com relação a outros aspectos se comparado com plataformas como WordPress e Movable Type. Como por exemplo o quesito Trackbacks.

Para saber mais sobre a importância e como usar Trackbacks e Pingbacks eu recomendo que você leia meu artigo Como usar Trackbacks e Pingbacks, e depois retorne para esta página para aprender a usar este recurso no Blogger!

Agora que você já sabe o quanto este recurso pode ser útil e como utilizar ele, fica a questão, mas isso não é nativo no Blogger. Ok, realmente não é, mas com um pouco de empenho e persistência, sempre encontramos soluções para esses detalhes. E agora vou mostrar como implementar este recurso em seu editor do Blogger!

Como fazer?

A primeira coisa que você vai precisar ter em mãos é o navegador Mozilla Firefox [que particularmente recomendo não apenas por este recurso, mas por muitos outros recursos para webmasters]

Tendo o Mozilla Firefox, basta que você instale nele o plugin Greasemonkey. Que faz uma série de coisas, entre elas te proporcionar o envio de Trackbacks com o Blogger! Se tudo correr bem durante a instalação, aparecerá a imagem de um macaquinho no canto direito inferior de seu navegador.

Com isso feito, agora você precisa do script que fará a “mágica” acontecer, baixe aqui o script e vá para seu blog e faça login, pois lá há uma última alteração a ser feita para você conseguir enviar seus trackbacks.

Estando em seu blog, faça login e vá em configurações e altere em configurações globais seu editor para o editor antigo, pois isso não funciona no editor novo =/

Feito isso, quando você for publicar algum artigo em seu blog, você vai reparar que há um novo campo a ser preenchido, como mostra a imagem abaixo:

Você acha importante utilizar Trackbacks?

Leia Mais ►

Template e Profissionalismo



Você que tem um blog ou site e pretende o fazer de forma profissional, tanto para ganhar dinheiro diretamente com ele, através de programas de afiliados, ou mesmo para através dele divulgar seu produto ou serviço, certamente vai precisar de um template profissional.
Pois muitos são os fatores que irão influenciar os leitores, claro que a qualidade do conteúdo é fundamental, mas um template bem elaborado, com bons recursos podem ajudar bastante na fidelização de seus leitores.

Seu template, assim como seu logo, são sua identidade visual na internet. Você tendo um template  superior a de seus concorrentes estará um passo a frente. Mesmo que não tenha um template superior, que ao menos seja do mesmo nível, e basta olhar, o dos seus concorrentes deve ser um template profissional!

 E é para te ajudar a solucionar este problema que hoje fiz este artigo, para apresentar a Elegant Themes, que é uma empresa que fornece templates profissionais para wordpress por apenas $ 39 por ano, te dando total acesso a todos os templates do banco de dados! E olha que são vários templaes de ótima qualidade!

Com um template profissional, além de você aproveitar ao máximo as possibilidades de seu blog, você ainda estará aumentando seu brand perante seus clientes, passando a eles uma imagem de mais profissionalismo e compromisso com eles e seu trabalho.

Existem diversos casos de blogueiros que ao alterar seus templates para um template profissional além de aumentarem o tempo de permanência de seus leitores em seu blog, ainda aumentaram a quantidade de cliques em suas propagandas e/ou venda de produtos ou serviços por eles prestados.

Porque isso acontece?

É como eu disse no início, com um template profissional você eleva seu brand, assim se mostrando mais profissional e confiável, o que leva seus leitores a se sentirem mais confortáveis e seguros em seu blog!

Troque seu template e confira como realmente seu blog pode ficar muito melhor!!!
Leia Mais ►

quarta-feira, 29 de dezembro de 2010

Plugin para Artigos Relacionados em Blogger


A pouco tempo eu escrevi um artigo aqui mesmo no Dinheiro Web, Como colocar artigos relacionados no Blogger,  onde eu apresento um código para mostrar posts relacionados no rodapé da página, hoje vou apresentar aqui uma outra alternativa, LinkWithin!

Este é um fantástico plugin para mostrar posts relacionados que funciona em várias plataformas de blogs, entre ela temos Wordpress e Blogger!

Colocar artigos relacionados em seu Blog ajuda seus leitores a encontrarem mais artigos que seja de interesse para eles, assim aumentando seu tempo de permanência no blog, o que acaba por ter dois efeitos:

1 – Diminuir a taxa de rejeição no Google Analytics;

2 – Aumentar a chance de seu leitor se interessar por alguma das propagandas de programas de afiliados exibidas em seu blog, como Google Adsense.
Para instalar este plugin é bastante simples, basta acessar o site LinkWithin e preencher os campos de uma área igual a esta que está na imagem abaixo:

Após isso basta seguir os passos da instalação que leva apenas alguns instantes para acontecer, e o resultado é muito bom, como você pode observar aqui mesmo no Dinheiro Web, ao final de cada artigo há os artigos sugeridos com imagens, o que realmente aumenta a visibilidade!

Ele funciona muito bem mesmo em blogs com fundo preto! Repare que você tem como escolher isso logo no início, como mostra a imagem, também podendo escolher quantos artigos serão mostrados, 3, 4 ou 5!

E o melhor é que é um serviço gratuito!

Você conhece algum outro plugin para artigos Relecionados?
Leia Mais ►

terça-feira, 28 de dezembro de 2010

Trabalhando sombras no Photoshop 1


Sabemos que o Photoshop possui muitas funcionalidades, e costumamos trabalhar bastante para aprender a utilizar recursos mais avançados, para assim poder produzir imagens mais profissionais, com uma qualidade visual mais impactante.

Mas há recursos que são extremamente simples e que podem ser bem aproveitados para os mais variados fins no tratamento de imagens, hoje vou falar um pouco sobre as sombras.

Existem duas sombras no Photoshop Inner Shadow e Drop Shadow. As configurações para ambas são feitas da mesma maneira, o que as difere é que cada uma projeta a sombra para um “lado”, onde Drop Shadow projeta a sombra abaixo do objeto, e Inner Shadow projeta a sombra à frente do objeto, causando a impressão de que o objeto “afundou”.

Veja abaixo alguma das alternativas que temos apenas com Drop Shadow.



1 – Uma sombra menor, bem delineada e próxima ao objeto.

2 – Uma sombra já um pouco maior, e um pouco mais distante do objeto.

3 – Uma sombra ainda próxima ao objeto mas bastante difusa.

4 – Uma sombra próxima ao objeto e robusta.

5 – Uma sombra delineada como a N° 2, porém bem distante do objeto.

Algumas utilidades práticas para sombras.

Vamos colocar uma questão para trabalharmos encima. Supondo que você queira por algum motivo trabalhar com letras amarelas em um fundo branco, ou pior ainda, letras amarelas em um fundo amarelo, exatamente da mesma com.

Veja ao lado como ficariam suas letras amarelas em um fundo brando.

Utilizei as iniciais do site Dinheiro Web para exemplificar. Note como força a vista para visualizar adequadamente as letras.

Fica realmente ridículo antiestético, desta maneira, e não passa nem um pouco de profissionalismo. Pois além de não ter nenhum “adicional” nestas letras, ainda estão com cores muito pouco contrastantes.

 
Aqui eu já utilizei o recurso Drop Shadow, com uma configuração bastante simples, sem me preocupar muito com a distância ou delineamento da sombra.

Mas mesmo assim, já podemos ver uma enorme diferença. As letras já se destacam e não precisamos forçar tanto a vista, conseguimos facilmente distinguir as letras do plano de fundo. O que já trás um diferencial importante para nosso trabalho.

Neste exemplo eu utilizei o recurso Inner Shadow, e podemos notar que destacou bastante a imagem, ficando apenas algumas pequenas áreas da imagem ainda um pouco mau delineadas.

Mas este recurso trás um efeito interessante que é causar a impressão de que as letras estão “entalhadas” em uma superfície. Este efeito em imagens mais trabalhadas trás resultados fantásticos.

Repare que neste caso a imagem é bastante parecida com a anterior, com a diferença sutil de que ela está muito mais fácil de ser visualizada e não cansa a vista.

Para produzir este efeito eu utilizei o mesmo efeito Inner Shadow da imagem anterior, mas acrescentei um efeito com um Drop Shadow bem sutil, que me permitiu delinear os contornos das letras sem perder em nada sua estética. Muito pelo contrário, ficaram mais chamativas do que na imagem anterior, e com apenas um efeito quase imperceptível!

 
Repare o quanto esses efeitos simples do Photoshop são poderosos, agora eu utilizei exatamente os mesmo efeitos da imagem anterior, e consegui escrever com letras amarelas em um fundo amarelo!

Veja que não força a vista e são perfeitamente legíveis, isso sem falar que da realmente um toque de profissionalismo a seu trabalho. Mostrando para seus clientes que você possui experiência e capacidade para atender às expectativas que ele possa ter, tanto para fazer um site, logo, banner, imagens para newsletter, etc.

Esta imagem eu coloquei apenas para ilustrar o que estou falando, que é perfeitamente possível trabalhar com cores diversas.

Aqui eu trabalhei com letras brancas em um fundo amarelo, o que na verdade não muda em nada, o fundo poderia ser de qualquer outra cor, pois as letras estão perfeitamente delineadas, o que facilita muito sua leitura.

Este artigo foi feito para apresentar estes recursos, dentro de poucos dias estarei disponibilizando o segundo artigo, onde mostrarei como usar essas sombras e como configurá-las adequadamente!

Você da importância a esses recursos simples do Photoshop?
Leia Mais ►

Tutorial Photoshop — como fazer tatuagem.


Neste tutorial vou mostrar como fazer uma montagem no Photoshop de maneira que o resultado final seja uma tatuagem o mais realista possível!

Para iniciar precisamos de duas imagens: pessoa a ser “tatuada” e do desenho da tatuagem.

Para este tutorial vamos usar as imagens abaixo.

 Tendo as duas imagens em mãos, primeiro vamos preparar a imagem do dragão, que para parecer uma tatuagem não poderá ter o fundo branco para ser transferida.

Para retirar este fundo branco, você pode proceder de várias maneiras, a que eu utilizo é utilizando a Magic Eraser Tool, assim você remove de uma vez grandes áreas de branco, e depois vá trabalhando até remover todo o branco. A imagem deve ficar assim:





Quando o dragão estiver assim, é hora de abrir a outra imagem. 

Na outra imagem, você deve antes de qualquer coisa, criar uma layer (camada) cópia, para fazer isso vá até onde ficam as camadas, do lado direito, embaixo. Clique na imagem com o botão direito do mouse e escolha duplicate layer.

Para começa a trabalhar confortavelmente com estas camadas, aconselho a desmarcar o campo de visibilidade, que fica onde mostra a imagem com a seta número 1.

Agora, repare que nosso dragão está em uma posição  que não ficaria bom, então vamos alterar a posição dele para ficar mais adequado a nossa imagem.

Então vamos em Edit >> transform >> flip horizontal. Isso fará com que nosso dragão fique com a cabeça virada para o outro lado, que é justamente o lado onde temos uma maior área de pele.

Feito isso, basta arrastarmos a layer do dragão para a outra imagem, tomando o cuidado para que ela fique entre as duas imagens (original e cópia).

Com o dragão lá, vamos trabalhar mais um pouco nele. Repare que ele passa por cima de áreas como roupa e cabelo, apague todas essas áreas, assim dando a impressão de que o desenho passa por baixo desses elementos.

Agora marque novamente o campo de visibilidade do item 1. O dragão deverá desaparecer, não se espante, isso é normal. Então selecione a camada layer1 copy, e vá diminuindo a opacidade, item 2, até que fique de seu agrado, com um aspecto bastante realista.

Para dar um toque ainda mais realista!

Nas partes onde o dragão faz fronteira com a pele, passe a ferramenta “blur”, isso vai diminuir possiveis marcas de recorte na imagem.

 Use a ferramenta Warp, que fica em Edit >> Transform >> Warp.

E através de uma grade você pode fazer distorções na imagem dodragão, fazendo com que ele acompanhe as curvas do corpo.

Com esta ferramenta você terá como adequar com perfeição qualquer desenho em qualquer área do corpo humano, basta trabalhar com calma que certamente encontrará a melhor posição.

Veja o resultado final de nossa tatuagem no Photoshop!!!




Então, o que você achou?

Leia Mais ►

domingo, 26 de dezembro de 2010

Como colocar um Botão do Twitter no Blog?


Sabemos a importância do twitter na divulgação de seu blog, onde a simples criação de um artigo que seja altamente viral (marketing viral) se espalha rapidamente pelo twitter através  dos retwits.
Com isso em mente, a idéia de colocar um botão já programado para que seus leitores divulguem seu artigo de qualidade com facilidade se torna uma idéia bastante atraente, tanto para o blogueiro que terá seu blog divulgado como para o leitor, que poderá compartilhar artigos de qualidade com seus contatos com facilidade.
 
Você terá duas alternativas de botões para inserir em seu blog, o que lhe permite avaliar qual dos dois se aplica melhor ao design do seu blog.

Então vamos para o código e como implementar estes botões em seus posts.

1 – Vá em Design >> Editar HTML, mande “expandir modelos de widgets”.


Para Botão do Lado Direito do Título do Post

Procure por:

<div class='post-header-line-1'/>
ou
<div class='post-header-line-1'>
ou
<div id='post-header-line-1'/>
ou
<div id='post-header-line-1/>

Agora cole o código do botão escolhido acima da tag encontrada.

Botão Completo

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Botão Compacto

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Botão no Rodapé do Post

Procure por:

<div class='post-footer'>
ou
<div id='post-footer'>

Cole o código do botão escolhido depois da tag encontrada.

Então salve seu HTML e vá conferir como ficou! Vale lembrar que sempre que vamos fazer alguma alteração no HTML, é bom fazer um backup do template por segurança, assim se algo der errado podemos facilmente restaurar o blog como era antes do incidente.
Leia Mais ►

sábado, 25 de dezembro de 2010

Como colocar Artigos Relacionados no Blogger


Todo blogueiro que seus  leitores encontrem com facilidade os conteúdos dentro de seu blog, para isso existem várias formas de melhorar a navegação, são técnicas que vão desde fazer um menu de navegação com links para as principais categorias, até links inseridos no corpo de texto de forma contextualizada. Mas sem sombra de dúvidas um ótimo meio de fornecer acesso simples é uma lista de postagens relacionadas ao término do post.

Também é de grande ajuda para seu leitor localizar mais facilmente os conteúdos do seu blog, você instalar um sistema de resumos automáticos. Assim você terá uma página inicial eficiente oferecendo vários artigos sem tomar muito espaço, e cada post também otimizado oferecendo artigos relacionados!

Para fazer isso é simples, em apenas alguns passos seu blog estará com esta funcionalidade habilitada e em perfeitas condições. Bom, agora que você já sabe o quanto isso pode elevar a qualidade do seu blog, vamos aos passos para a implementação do código.

Vá em Design >> Editar HTML

1 – Procure pelo seguinte código (ctrl + F) “]]></b:skin>”, então cole logo após ele o código abaixo:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

2 - Agora, visualize para se certificar de que não há nenhum erro, não havendo nada errado, salve e mande expandir modelos de widgets. Feito isso, encontre o seguinte código:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>

Após ele, cole o código em negrito abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>

</b:loop>
</b:if>
</span>

Repare que o código fica antes de </b:loop> que já faz parte do código nativo de seu blog, eu o citei aqui apenas para você saber exatamente onde deve acrescentar o código em negrito.

3 – Feito isso, procure pelo seguinte trecho: <div class='post-footer-line post-footer-line-3'>

E logo após ele, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Pronto, basta salvar e conferir o código em funcionamento!

Mas talvez você queira dar estilo para seus Arquivos Relacionados. Então, terá que acrescentar CSS.

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: coloque aqui o tamanho da fonte;
color: #...coloque aqui o valor da cor para o título;
}

Para dar estilo à lista:


.related-post ul{

margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}

.related-posts li{

margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: tamanho da fonte;}

.related-posts li a{
color: #....}
.related-posts li a:hover{color: #.....; text-decoration:none;}
Repare que as partes CSS que estão em negrito devem ser devidamente alteradas, assim dando o estilo que você que para seu site!

Leia também:  
Resumos Automáticos
Plugin Para Artigos Relacionados no Blogger 
Leia Mais ►

quarta-feira, 15 de dezembro de 2010

JavaScript Para Rotacionar Banners

Este código é capaz de rotacionar qualquer quantidade de banners, e o que é melhor ainda, em qualquer tamanho!

Esta é uma ótima alternativa para que seus banners sempre chamem a atenção de seus leitores assim que entrarem em  seu site, afinal, algo estará diferente!


Pode parecer que não muda muita coisa, mas para seu leitor muda, afinal ele não passa horas olhando para o material do seu blog, ele apenas acostuma com o padrão, e quebrar este padrão sem perder sua marca, sua identidade visual é importante!

<script language="JavaScript">
var how_many_ads = 2;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
txt="";
url="http://www.sitedobanner.com";
alt="texto alternativo";
banner="url completa do banner";
width="largura do banner em px";
height="altura do banner em px";
}
if (ad==2) {
txt="";
url=" http://www.sitedobanner.com ";
alt=" texto alternativo ";
banner=" url completa do banner ";
width=" largura do banner em px ";
height=" altura do banner em px ";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_blank\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
// End -->
</script>

Para que seu código funcione adequadamente, basta que você substitua os campos em vermelho pelos dados referentes aos banners. Vale lembrar que em:

url= refere-se a onde o leitor será levado clicando no banner;
alt= é o texto alternativo que aparece quando se passa o mouse sobre uma imagem do banner;

Para adicionar mais banners:

Cole este código após a chave”}” ao término do banner final

if (ad==2) {
txt="";
url=" http://www.sitedobanner.com ";
alt=" texto alternativo ";
banner=" url completa do banner ";
width=" largura do banner em px ";
height=" altura do banner em px ";
}

Outra alteração que deve ser feita ao adicionar banners é o seguinte. No início do código repare que há esta linha:

var how_many_ads = 2;

O “2” em vermelho indica a quantidade de banners existentes no código, portanto se adicionar o retirar algum banner, lembre de alterar estenúmero.

E o código de cada banner se inicia com

if (ad==2) {

Onde “2” é o número individual do banner, ou seja, teremos números diferentes para cada banner, o primeiro é(add==1)o segundo (ad==2) o terceiro (ad==3) e assim sucessivamente.

Uma última dica que deixo aqui é para que você tome o cuidado de colocar banners do mesmo tamanho, pois banners de tamanhos diferentes vão deixar uma imagem ridícula inadequada em seu site. 

Leia Mais ►

Plugins SEO para WordPress.org

Você está montando seu site em em uma plataforma wordpress.org, o que já considero um bom começo, afinal é uma plataforma com realmente muitos recursos e simples de ser usada. Está colocando bastante conteúdo de qualidade que seja relevante para seu nicho isso também já é uma ótima coisa.

Já está tudo indo bem, mas você quer melhorar seu posicionamento nos resultados dos buscadores. Para isso existem plugins específicos, que poderão te ajudar bastante na otimização, assim alavancando seu site para novos níveis de atuação na web.


Este plugin irá criar um xml sitemap especial para ajudar os motores de busca (Google, Yahoo, Bing, Ask) a indexarem seu site e páginas internas. O plugin suporta todos os tipos de wordpress e páginas geradas e url’s personalizadas.


Este plugin garante que você não terá “? Ek=q”, ou outras variáveis estranhas em suas URLs. Isso também oajudará bastante.


Este já é um plugin mais completo, trás várias alternativas de otimização SEO, eu realmente o recomendo.


Faz com que as informações da página apareçam antes que seu nome no título do blog, o que ajuda bastante na hora de aparecer nos resultados com conteúdo relevante para a busca que foi feita.


Tags dos títulos são indiscutivelmente muito importantes na otimização SEO, e poder incluir sinônimos para ganhar uma maior visibilidade com seu título é muito bom.
Leia Mais ►