Permalink - Endereço de Suas Postagens

Esse assunto não é muito debatido pois é algo exclusivo de usuários do Blogger e vai aumentar consideravelmente suas visitas vindas de buscadores, principalmente Google e Yahoo.

Permalink, em inglês, é a contração de "Permanent Link", é o link de cada postagem. No Blogger as URLs do post são montadas sempre com base no título do post. Como regra geral é exatamente o título do post, mas com hifens no lugar dos espaços. No entanto, o nome da página é truncada de forma a ter mais ou menos 40 caracteres. Isso fará com que apenas as primeiras palavras de um título grande apareçam. Para completar, o Blogger não conhece acentos, então o título "Atenção - homens trabalhando" se tornará "ateno-homens-trabalhando.html".

Sabendo disso tudo, é só na hora de publicar o post colocar o título como você quer que fique a URL, publicar e depois editar o post para colocar o título correto.

Vejamos um exemplo: Digamos que sua notícia é: "Permalink - Endereço Correto de Suas Postagens" Provavelmente seu link ficará mais ou menos assim: http://seublog.blogspot.com/2009/06/permalink-endereço-correto-de-suas, para não ficar muito grande o link, o sistema quebra a sequência de palavras para ficar mais enxuta. Os sites de busca podem deixar de relacionar o assunto pesquisado ao seu post devido a isso. Toda vez que você for escrever um artigo novo, escreva, e quando for por o título, coloque algo curto e direto, depois de publicado, edite a postagem e coloque o título que quiser, pois o permalink já terá sido gerado e não mudará após a edição. Evite usar acentuação antes de criar o permalink, coloque acentuação só na hora de editar sua postagem depois de publicada.

Cartão de Visitas de Seu Site / Blog

Aqui no Botoja Dicas já vimos a Importância da Otimização do Site/Blog para melhor colocação nos sites de pesquisas. A Otimização é um processo contínuo, sempre temos alguma coisa a melhorar. Hoje veremos como criar um cartão de visitas contendo informações relevantes de nosso site/blog para os sites de busca e até mesmo para o Adsense.

Continue Lendo...

As Meta Tags são uma ótima forma para ajudar o seu blog a ser considerado relevante. Meta Tag é um conjunto de parâmetros que permitem definir diversos aspectos acerca de uma página web. De entre os mais conhecidos encontram-se a descrição do conteúdo website ou as palavras chave relacionadas com o mesmo. Mesmo não sendo extremamente relevantes para os canais de busca, as Meta tags, quando bem-empregadas podem ser úteis para revelar rapidamente o real conteúdo de seu blog.

Vá em layout, editar HTML e procure pelo seguinte código:

<b:include data='blog' name='all-head-content'/>

Abaixo dela, basta copiar e colar o trecho de código que segue, fazendo as devidas adaptações:

<b:if cond='data:blog.pageType == "index"'>
<meta content='DESCRIÇÃO DO BLOG' name='description'/>
<meta content='PALAVRAS-CHAVE, SEPARADAS POR VÍRGULA' name='keywords'/>
<meta content='SEU NOME AUTOR DO BLOG' name='author'/>
</b:if>

Feito isso basta salvar, que seu site/blog já terá um cartão de visitas de respeito. Só um lembrete, nas palavras-chaves, podem ser consideradas pequenas frases com duas ou três palavras e não use mais do que 250 caracteres.

Tudo Sobre SEO

O significado de SEO é Search Engine Optimization. Conhecemos ele também como Otimização de Sites e Otimização para Buscas. O SEO nada mais é do que a otimização de uma página (ou até do site inteiro) para ser melhor compreendido pelas ferramentas de busca. Fazendo isso da forma correta, conseguimos um melhor posicionamento em uma página de resultados de uma busca. Com boas técnicas de SEO você conseguirá colocar seu site/Blog na primeira página do resultado de uma pesquisa no Google, por exemplo, sobre um assunto que você publicou.

Continue Lendo...

Esta otimização torna-se cada vez mais necessária, pois pesquisas vêm mostrando que cerca de 90% dos internautas visitam somente as primeiras três páginas do Google por exemplo e a grande maioria destes ficam apenas na primeira página.

Não há nenhuma garantia de que o trabalho do profissional de SEO possa obter o resultado desejado porque o Google, por exemplo, possui mais de 1.500 critérios de pontuação que utiliza para classificação dos sites. Mas quanto maior for o planejamento e o emprego correto e sistemático de algumas técnicas podem quase sempre levar o trabalho de SEO a um resultado satisfatório. Aqui no Botoja Dicas você verá várias dicas de como otimizar seu site/blog, veja algumas dicas:

• Escolha das palavras-chave relacionadas com o conteúdo principal de cada página do site. Estas palavras devem ser distribuídas ao longo do conteúdo do site com uma palavra-chave para cada página. Em breve teremos uma postagem só sobre esse assunto.
  
  
• Utilização de linguagem simples para permitir que os robôs dos buscadores possam encontrar as palavras-chave nas suas páginas, como HTML, CSS, evitando o uso exagerado de Flash, por exemplo.
  
  
• O conteúdo deve ser de qualidade e com grande quantidade de palavras-chave distribuídas ao longo do texto, o uso de links no meio do texto, apontando para páginas internas do site. O texto pode ser dividido em tópicos para facilitar a sua leitura pelo usuário.
  
  
• O uso de palavras-chave no título do site, na URL, sempre que possível e nas meta-tags é muito importante.
  
  
• Os links externos são muito importantes. Contam mais pontos quando vindos de sites mais respeitados pela comunidade de internautas. Estes links podem aumentar o PageRank e através dele, o tráfego pode aumentar significativamente.
  
  
• Acompanhamento dos resultados. O tráfego do site precisa sempre ser acompanhado de perto para que o profissional de SEO possa saber a origem dos usuários do site, quais as páginas e links são mais acessados, para onde vão os usuários após visitarem o site e até mesmo quanto tempo permanecem e qual palavra-chave utilizaram para entrar nele. Assim podemos trabalhar na otimização e corrigir possíveis desvios do resultado desejado.

Alguns destes resultados podem ser medidos em sites gratuitos de análise de trafego como o Google Analytics e Ferramentas para Webmasters do Google , MSN Webmaster Tools da Microsoft e o Yahoo Site Explorer, entre outros.

Feed e RSS. Acompanhe o Botoja Dicas

A maioria das pessoas já viram algo a respeito de feed e RSS ou pelo menos já viu em muitos sites o símbolo do mesmo. Mas caso você ainda tenha dúvidas ou queira uma explicação simples e prática sobre o assunto, poderá tê-la agora.

Antes da parte prática e simples, vamos a uma explicação didática e chata a respeito. Se você, assim como eu, não tem muita paciência para isso, pule para o vídeo a baixo.

Continue Lendo...

RSS é um subconjunto de "dialetos" XML que servem para agregar conteúdo ou "Web syndication", podendo ser acessado mediante programas ou sites agregadores. É usado principalmente em sites de notícias e blogs.

A tecnologia do RSS permite aos usuários da internet se inscreverem em sites que fornecem "feeds" RSS. Estes são tipicamente sites que mudam ou atualizam o seu conteúdo regularmente. Para isso, são utilizados Feeds RSS que recebem estas atualizações, desta maneira o utilizador pode permanecer informado de diversas atualizações em diversos sites sem precisar visitá-los um a um.

Os feeds RSS oferecem conteúdo Web ou resumos de conteúdo juntamente com os links para as versões completas deste conteúdo e outros metadados. Esta informação é entregue como um arquivo XML chamado "RSS feed", "webfeed", "Atom" ou ainda canal RSS.

A principio e até hoje em alguns sites o ícone adotado para o formato RSS é juntamente do indicativo de XML . Mas o ícone mais famoso que representa o RSS foi adotado numa parceria entre a Mozilla Foundation (criadora do Firefox, que já usava o ícone) com a Microsoft para a mais recente versão de seu navegador, o Internet Explorer 7. Posteriormente o Flock, navegador baseado no Firefox ainda em desenvolvimento, também adotou o ícone. Ajudando a promover o RSS para os utilizadores o site Feed Icons distribui gratuitamente o ícone em diversos formatos para inserção em websites.

Fonte: Wikipédia

Continua sem entender? Então veja o vídeo e tire todas as suas dúvidas:

No Botoja Web, eu fiz um Ótimo Tópico Sobre RSS e Feeds. Aconselho a todos a lerem.

A baixo de cada postagem e a direita aqui do Botoja Dicas existe o nosso símbolo de Feed, clique nele para poder acompanhar todas as novidades de nosso site. em breve traremos mais informações e dicas de como usar melhor essa ferramenta de notícias.

Retirando os Números dos Marcadores

Tem coisa mais chata que os números log após os marcadores? Pessoalmente eu detesto, só ocupam espaços desnecessários no layout do blog. Vejam que aqui no Botoja Dicas os nossos Marcadores não possuem números indicadores de quantidade. Gostaria de aprender como fazer isso em seu blog? É bem simples, prático e fácil. Veja como Proceder:

Continue Lendo...

Você terá apenas que apagar uma linha de seu Código Fonte. Vá em Editar HTML, Expandir modelos de widgets e procure o código a baixo e apague a linha em Vermelho:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/&gt;
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/&gt;
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span&gt;
</li>
</b:loop>

Salve e veja o resultado!

Adicione aos Favoritos – Códigos para o Blogger

Aprenda agora como colocar Um gadget para facilitar que o leitor coloque seu blog nos favoritos dele. O detalhe é que com isso o leitor poderá escolher colocar seu blog nos favoritos de acordo com o programa que ele usa para acessar a internet, Firefox ou Internet Explorer. Muito simples, fácil e prático. Veja a baixo como proceder:

Continue Lendo...

Adicione um novo Gadget de HTML/Javascript em seu blog com o seguinte código:

 

<script language="JavaScript">
function addFav(){
var url="ENDEREÇO DO SEU BLOG";
var title="NOME DO SEU BLOG";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()"><img border="0" alt="Adicione aos Favoritos"
src="http://img5.imageshack.us/img5/7898/animation1kmt.gif"/></a>
<a href="ENDEREÇO DO SEU BLOG" onclick="window.external.AddFavorite('ENDEREÇO DO SEU BLOG','NOME DO SEU BLOG');">
<img alt="Adicione aos Favoritos" src="http://img22.imageshack.us/img22/687/animation3qqe.gif"
border="0"/> </a>

 

Em vermelho estão as partes a serem editadas, modifique de acordo com seu blog. Os dois endereços que estão no código poderão ser editados caso realmente ache necessário, são os endereços das imagens que ficarão em exibição em seu blog, então se quiser alterar a imagem é só substituir os endereços pelos de sua preferência.

Posts Relacionados no Blogger

Para colocar no rodapé da postagem os Artigos Relacionados,  é muito fácil e também muito útil, pois direciona o leitor para outros textos com a mesma tag.

Para evitar o aumento do número de rejeição de seu blog, o ideal é prender o leitor pela curiosidade. A melhor forma, é vincular sua postagem à outras postagens suas que falam de assuntos parecidos, ou seja, que pertencem as mesmas categorias ou marcadores que seu post original.

Continue Lendo...

1- Coloque o script abaixo depois de ]]></b:skin>:

<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- Salve a modificação. Clique em Expandir Modelo de Widget e procure por este trecho e acrescente o que está em vermelho:

<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;'/>

<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>

3- Agora procure por:
<div class='post-footer-line post-footer-line-3'>
e cole logo abaixo:

<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>

Salve as modificações. Para dar estilo ao título e à lista, acrescente no 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;}

Obs: os links dos artigos relacionados aparecem apenas nas páginas internas.

Fontes:
UsuarioCompulsivo
Vagabundia
Templates Novo Blogger

Comentários do Autor Destacados

Encontrei esses dias no Usuário Compulsivo, uma dica maravilhosa. Para Blogs com vários comentários, será ótimo! Pois agora você poderá distinguir seus comentários dos demais, dando destaque para eles. Para isso há a necessidade de se realizar algumas alterações no HTML de seu blog. Veja a baixo como proceder:

Continue Lendo...

Entre na edição HTML do template, marque Expandir modelos de widgets e procure pelo trecho de código abaixo e inclua os trechos destacados em vermelho:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>

<data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Agora, nas definições CSS do template, normalmente entre as Tags <head></head>, procure pelo trecho que determina o estilo de formatação dos comentários e logo após cole as seguintes linhas:

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Nos campos destacados em vermelho definem-se as cores da borda e do fundo do destaque respectivamente, adapte conforme o caso.
OBS: O destaque será aplicado inclusive nos comentários já publicados. Obviamente só naqueles que foram feitos usando uma Google Account. Comentários assinados via OpenID não serão destacados.
Se você quiser também pode alterar o destino do link que aparece sob o nome do autor, que por padrão aponta para a página do perfil do Blogger. Dê uma olhada no tutorial que o Usuário Compulsivo fez.

Resumo de Postagem - Leia Mais

Passando no Templates Novo Blog a procura de um novo Layout, esse que temos agora, achei um hack para o blogger que me chamou atenção. É o famoso Resumo de Postagem. Onde você "esconde" o restante da postagem para que possam ser exibidos só se clicarem em Leia Mais. Com isso você deixa a sua página mais limpa, leve e organizada. Muito usado por quem costuma ou precisa colocar muita coisa em seu post.

A maioria dos hacks de Resumo de postagem fazem com que, ao clicar para continuar vendo a postagem, abra uma página apenas com o conteúdo de seu post. Muitos acreditam que isso é melhor principalmente devido aos anúncios do Adsense que em uma nova página se renovam e podem interessar o leitor a clicar. Mas esse que vos apresento hoje é diferente, ele abre na própria janela aberta apenas esticando o post ao exibir o restante do conteúdo. Faça você mesmo o teste aqui e ao clicar em Continue Lendo... poderá pegar o código desse hack.

Continue Lendo...

Para habilitar o hack no seu blog, vá em Configurações >> Formatação e desça toda a página. Em Modelo de Postagem, cole o seguinte código:

<p>Resumo do post</p><a href='javascript:void(0);' onclick='return verocultar(this);'>Leia Mais...</a><div style='display: none;'><p>Resto do Post</p></div>

Salve a modificação. Toda vez que você iniciar uma nova postagem, o código aparecerá (no modo HTML) e basta que você coloque o resumo e o restante do post onde está indicado em Azul. Cuidado para não apagar nenhum <p> .Você pode, inclusive, modificar o link (Leia Mais...) ao seu gosto, com outras palavras e até imagens.

Agora vá em Editar HTML e antes de </head> cole o seguinte código:

    <script type='text/JavaScript'>
    function verocultar(cual) {
    var c=cual.nextSibling;
    if(c.style.display==&#39;none&#39;) {
    c.style.display=&#39;block&#39;;
    } else {
    c.style.display=&#39;none&#39;;
    }
    return false;
    }
    </script>

Salve a modificação.

Obs: é possível que apareça um espaço grande entre o resumo e o restante do post. Para evitá-lo, tente deixar o texto unido ao código, sem pular linhas.

PageRank - Saiba tudo - Parte1

Parte 1 - O que é o PageRank?

Com essa explicação do próprio google fica mais fácil de conceituar o PageRank. Mas aqui iremos nos aprofundar um pouco mais. Veremos pra quê serve esse PageRank, como fazer para aumentar o nosso PageRank, o que não fazer para não diminuir, por quê tão poucos sites brasileiros tem o PageRank superiores a 5. Isso será mostrado no decorrer dessa série sobre o PageRank, não deixe de acompanhar.

Essa primeira parte trata-se apenas do conceito de Pagerank.

Muita gente fala de PageRank, muitos até confundem o PageRank de uma página com a classificação dela nos resultados dos mecanismos de busca. Mas afinal, o que é PageRank?

O PageRank (o nome é uma referência a Larry Page, um de seus criadores e fundador do Google) é o método matemático que o Google emprega para atribuir o grau de relevância relativa de cada uma das páginas incluídas em seu índice. Ele é determinado pela quantidade de links na Web que apontam para uma página. O Google diz que, quando uma página linka outra, ela está dando um voto de importância à essa página. Falando genericamente, quanto mais links apontam para uma página, mais importante ela se torna para o Google, podendo aparecer então nos primeiros resultados da busca e aumentando seu PageRank.

Exibido aos usuários na forma de um número natural entre 0 e 10, o PageRank é calculado por uma série de fatores, do qual o mais essencial é o conjunto de outros links na web que apontam para a página sendo avaliada - o PageRank considera que cada link que uma dada página recebe é equivalente a um “voto” na sua popularidade, mas neste caso nem todos os votos contam da mesma forma: links recebidos de um site com PageRank alto recebem peso maior do que os recebidos de sites com PageRank baixo. O Artigo da Wikipedia sintetiza boa parte do que se sabe de concreto a respeito.

Quer sabe então qual o PageRank de seu site/Blog?

Nesse site a cima poderá visualizar e se quiser até levar uma amostra de seu PageRank para seu Site/Blog. O Botoja Dicas ainda tá fraquinho, veja nosso PageRank:

Pagerank 2

Aguardem a parte 2 desta série!

Anúncios do Adsense Após o Título ou no Final da Postagem

Vamos começar a falar um pouco sobre como monetizar o blog do Blogger. Trataremos principalmente do meio mais conhecido que é o Google Adsense. Os anúncios do google Adsense divulgados em seu blog devem ser atraentes o suficiente para que um leitor venha a clicar nele. A maioria dos blogueiros não se preocupam com a aparência que seu blog tem após colocar de qualquer forma os anúncios do Adsense, mas esse é um grave erro, pois o leitor evita desorganização, pode até se assustar com muitas propagandas em seu blog e até nunca mais te visitar.

A melhor maneira de manter seu blog organizado e com altas possibilidades de clicks nos anúncios do Adsense é colocando-os logo após o título da postagem ou no meio dela.

É claro e óbvio que somente colocar os anúncios do Adsense entre o título e o post ou no meio da matéria não irá lhe render um bom número de cliques, pois se você não tiver um número alto de visitas diárias, então ninguém vai clicar. Os cliques dependem muito da quantia de visitantes que você recebe diariamente e isso não vai mudar nunca, não importa onde estejam os anúncios.

Continue Lendo...

Bom, no Blogger para que você possa colocar os blocos de anúncios do Google Adsense entre o título e o post ou no meio da matéria, é necessário você realizar algumas modificações no próprio código Adsense, ou seja, você entra na sua conta do Google Adsense, cria um bloco de anúncio que mais se adapte ao Layout e Template do seu blog, escolhendo as melhores cores e estilos, e realiza duas únicas modificações no código.

Após criar o bloco de anúncio na sua conta do Google Adsense, você terá um código parecido com o mostrado abaixo, onde as únicas coisas diferentes são as tags "<" e ">" que foram substituídas por "(" e ")" - parênteses - para que pudessem ser interpretadas pelo nosso blog como texto e não como código, somente para a visualização em forma de exemplo aqui:

(script type=”text/javascript”)<!–
google_ad_client = “pub-xxxxxxxxxxxxxxxx”;
/* Botoja Dicas */
google_ad_slot = “xxxxxxxxxx”;
google_ad_width = xxx;
google_ad_height = xxx;
//–>
(/script)
(script type=”text/javascript”src=”http://pagead2.googlesyndication.com/
pagead/show_ads.js“)
(/script)

Repare que o código exemplo acima é muito semelhante com o código criado por você na sua conta Adsense. Alguns caracteres do código estão na cor vermelha. Eu coloquei esta cor para que você possa identificar qual é a parte que terá de ser alterada no seu código.

Os caracteres que estão em vermelho são “<” e “>” (sem as aspas). Estes caracteres são os que você terá de mudar no seu código do Adsense antes de colocá-lo no seu blog.

Bom, agora que você já sabe quais são os caracteres que serão alterados eu vou mostrar aqui para quais caracteres eles devem ser mudados. Veja bem, o primeiro caractere em vermelho deverá ser alterado para “” (sem as aspas) e o segundo caractere em vermelho deverá ser alterado para “” (sem as aspas).

Preste muita atenção na mudança dos códigos, pois se você fizer alguma modificação errada e for identificado pela equipe do Google Adsense o erro, você poderá ser expulso do programa de rentabilidade, pois não permitem alterar o código a não ser estas pequenas modificações que eu estou ensinando aqui. Estas modificações podem ser encontradas no próprio fórum do Adsense.

Se você tiver feito tudo certo, é para o seu código ficar como o mostrado abaixo, onde os caracteres vermelhos estão no formato de imagem, pois se eu colocasse na forma de escrita o Blogger interpretaria como um outro símbolo:

(script type=”text/javascript”)!–
google_ad_client = “pub-xxxxxxxxxxxxxxxx”;
/* nome do bloco de anúncio escolhido por você */
google_ad_slot = “xxxxxxxxxx”;
google_ad_width = xxx;
google_ad_height = xxx;
//–
(/script)
(script type=”text/javascript”src=”http://pagead2.googlesyndication.com/pagead/show_ads.js“)
(/script)

Pois bem, agora que você já realizou a mudança no código Adsense você deverá colocá-lo no seu blog no local correto onde você deseja que eles sejam exibidos.

No Blogger vá em "Layout" e clique em “Editar HTML”. Aconselho q fazer um backup de seu layout por precaução, para isso clique em “Baixar modelo completo”. Agora marque a caixa “Expandir modelos de widgets” e siga os passos abaixo:

• Para exibir as caixas de anúncios de publicidades do Google Adsense entre o título do post e o conteúdo, você deverá inserir o seu código ANTES da tag div class='post-body'.

• Para exibir as caixas de anúncios de publicidades do Google Adsense entre o conteúdo do post e os créditos, ou seja, no rodapé ou final de cada post, você deverá inserir o seu código ANTES da tag div class='post-footer'.

• Para exibir os anúncios depois dos créditos, entre um post e o outro, ou seja, no meio dos posts e entre eles, você deverá inserir o seu código DEPOIS da linha de código p class='post-footer-line post-footer-line-3'

Feito isso, agora é só salvar. O Google Adsense permite que você exiba até 3 blocos de anúncios por página, ou seja, apenas as 3 primeiras postagens suas é que ficarão com o anúncio em exibição, caso seu blog esteja configurado para aparecer mais de 3 postagens por página, as outras postagens ficaram com um espaço em branco onde deveria ter o anuncio do Adsense, apenas os 3 primeiros aparecerão. Dependendo do modelo do bloco de anuncio que você escolheu para divulgar, esse espaço em branco nas outras postagens pode ser prejudicial ao visual de seu blog. Para corrigir isso você pode configurar para que seu blog exiba apenas 3 postagens por página, assim não terá esse espaço vazio.

Teste Seu Blog em Diferentes Navegadores

O Browsershots é um serviço que tira screenshots do Layout do seu Blog ou Site em diferentes navegadores, ele é muito útil para nós blogueiros pois podemos saber se o Layout do nosso Blog está tendo algum erro com determinado navegador, o que ocorre com frequência entre os navegadores Firefox e o Internet Explorer.

Os testes podem ser feitos em navegadores de sistemas Linux, Windows e Mac, além disso podem ser definidos atributos como: Tamanho da tela, qualidade da cor, Javascript, Java e Flash, resumindo é um teste bem completo.

O único inconveniente do serviço é o tempo de espera do teste que dependendo da configuração escolhida ou do horário pode ser de minutos ou horas, mas o próprio site lhe informa o tempo de espera estimado e lhe dá a opção para salvar a página nos seus favoritos e ver o teste depois já completamente terminado.

O serviço realmente é uma excelente opção para ver como o seu Blog ou Site é exibido em diferentes navegadores de diferentes sistemas operacionais.

Clique na imagem a cima para ir até o site.

Dica encontrada no Broblogando

Rodapé do Blogger Com 4 colunas

Quando se trata de Layout, estamos sempre procurando uma forma de aperfeiçoar, nunca estamos satisfeitos, é tanto que a maioria dos sites/blogs trocam todo seu layout pelo menos uma vez por ano, quando não fazem isso, estão acrescentando algumas inovações como Hacks com funcionalidades específicas. Eu não sou diferente, aqui mesmo já divulguei várias dicas que encontrei na internet para melhorar ou acrescentar uma funcionalidade no Blog. Ontem divulguei aqui como devolver a imagem do lápis de edição rápida. Hj estou trazendo aqui uma forma de acrescentar colunas na parte de baixo de seu layout caso já não o tenha. No nosso site específico de matérias de informática, o Botoja Web, possui um ótimo layout cedido pela Ariane do Templates Novo Blogger, porém ele originalmente não possui colunas de rodapé. (Dependendo de quando você está lendo esta postagem o layout em questão já terá sido alterado).

Mas vamos ao que interessa. Essa dica eu encontrei no ótimo blog Como Fazer Web do Bianco Garniz e da FRX. Poderá encontrar Aqui todas as dicas.

Vamos então ver como proceder:

Primeiro vá até a edição de HTML em seu blog. Feito isso, procure por:

Continue Lendo...

/* Footer

Achando esta sessão no css, substitua inteira por esta abaixo, mas se não houver Sessão footer no seu template, adicione o código abaixo antes deste trecho ]]></b:skin>

/* Footer

----------------------------------------------- */
#footer-wrapper{background:#151515;clear:both;margin:0 auto;padding:15px 0 5px 0;overflow:hidden;}
#foot-wrap{margin:0 auto;width:980px;}
.foot{width:25%;float:left;margin:0;padding:0;color:#999;}
.foot a:hover{color:#ccc;}
.ft{padding:0 10px;}
.ft .widget{margin-bottom:15px;}
.ft ul{margin:0;padding:0;list-style:none;}
.ft li{margin:0;padding:0 0 .25em;}
.foot h2 {
font-size:16px;
font-weight:700;
font-family:Arial,Verdana,Sans-serif;
color:#ccc;
border-bottom:dotted 1px ;
margin:0 0 5px;
padding:0 0 2px;
}
#credits{font-size:11px;}
.trb2,.trb3,.trb4{background:#fff;border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;}
.trboxcontent{background:#fff;border:0 solid #d8d8d8;display:block;border-width:0 1px;padding:2px 10px;}
.trb1{background:#d8d8d8;margin:0 5px;}
.trb1,.trb2,.trb3,.trb4{display:block;overflow:hidden;}
.trsnazzy{background:transparent;margin:0 0 10px;}
.trtop,.trbottom{background:transparent;display:block;font-size:1px;}
.trb2{border-width:0 2px;margin:0 3px;}
.trb1,.trb2,.trb3{height:1px;}
.trb3{margin:0 2px;}
.trb4{height:2px;margin:0 1px;}
/* wireframe layout tweaks */
body#layout *{margin:0;padding:0;}
body#layout,
body#layout #foot-wrap,body#layout #navbwrap,
body#layout #outer-wrapper,
body#layout #content-wrapper {width:750px;min-width:750px;}
body#layout #navb{padding-bottom:15px;}
body#layout #main-wrapper{width:40%}
body#layout #header-wrapper{height:60px;}
body#layout .foot{width:187px;}
body#layout #srchbxwrap,body#layout #credits{display:none;}

Feito isto encontre esta parte abaixo

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Substitua inteira por este trecho abaixo, mas se não houver esta tag acima, procure por esta <!-- end content-wrapper --> e coloque o código abaixo logo após a mesma

<div id='footer-wrapper'>
<div id='foot-wrap'>
<div class='foot'>
<b:section class='ft' id='f1'/>
</div>
<div class='foot'>
<b:section class='ft' id='f2'/>
</div>
<div class='foot'>
<b:section class='ft' id='f3'/>
</div>
<div class='foot'>
<div class='ft'>
<b:section id='f4'/>

<!-- Coloque os créditos do seu template na área abaixo da div class widget-content(manter o FOOTER BY COMO FAZER WEB é opcional) -->
<div id='credits'>
<h2 class='title'>Créditos</h2>
<div class='widget-content'>
Footer by <a href='http://www.comofazerweb.com' target='_blank'>Como Fazer Web</a>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> Powered By <a href='http://www.blogger.com'>Blogger</a>
</div></div>

<!-- creditos -->
<div class='clear'/>
</div></div></div></div>

Clique em visualizar, e se tudo estiver correto, salve!Depois é só ir em "Elementos da página" e acrescentar o que quiser no rodapé.

Edição Rápida no Blogger

Sabe aquele lápis que nos modelos de layout normais aparecem quando você está logado e visualizando seu blog? Esse Aqui:

Na maioria dos modelos de layout novos eles são retirados, fica apenas o link no lugar da imagem. Pessoalmente não vejo vantagem em retirá-los, pois os únicos que o veem são os donos do blog.

Pois bem, encontrei uma forma de devolver a imagem do Lápis ao Layout. Encontrei o Ótimo Blog: Dicas Blogger e nele existe uma matéria sobre isso, veja aqui.
Continue Lendo...

Para adicionar o lápis de edição rápida, entre no html do seu template, marque expandir modelos de widgets e procure pelo seguinte trecho (Crtl+F):

<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'>&#160;</span>
</a>
</span>
</b:if>

Substitua a linha vermelha por:

<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>

Devendo ficar assim:

<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
</a>
</span>
</b:if>

Agora, vá até os elementos de página e em postagens no blog, clique em editar. Abrirá uma nova janela de configuração das postagens. Marque a caixa mostrar edição rápida.

Corrigindo a Exibição do Favicon

Vocês viram Aqui uma explicação de como colocar o favicon em blogs do Blogger, porém esse recurso foi extinto a alguns meses, então vamos ver agora como corrigir esse probleminha:

Hospede duas imagens com tamanho de 16x16 pixels, uma no formato PNG e outra convertida para o formato ICO, no local de sua preferência e anote as URLs dos arquivos hospedados.

Visite Esse Site para converter a imagem em ICO.

Localize a linha ]]></b:skin> dentro do código html do seu template e logo abaixo cole o seguinte trecho, adaptando o endereço dos arquivos que você acabou de hospedar:

<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>

Vizualize para ter certeza que não há erros, em seguida salve e está pronto.

OBS: Esta dica funciona tanto no Internet Explorer como no Mozilla Firefox!

Como Exibir Posts Relacionados no Blogger

O Blogger ainda não tem a opção de exibir os posts relacionados ao final do texto, para facilitar a vida do leitor e aumentar o tempo de permanência dele no blog.

Mas existe uma forma de se conseguir isso. Achei no blog Htmhelen e agora trago para vocês:

Este script é um tanto quanto complicado, por isso peço que use um blog de teste para não fazer besteira. Para visualizar o resultado crie neste blog de testes pelo menos cinco posts fictícios usando a mesma tag/marcador/label.

Continue Lendo...

1. Clique em Layout, Editar HTML. Cole o seguinte código antes da tag </head>: Onde está escrito 5 você pode substituir pelo número de posts relacionados que você deseja mostrar.

   <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 < 5) {
   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. Salve. Clique em Expandir modelos de widgets. Procure o seguinte código:

   <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 != "true"'>,</b:if>
   </b:loop>
   </b:if>

3. Substitua pelo código abaixo: A parte em destaque é o que será realmente acrescentado.

   <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 != "true"'>,</b:if>
   <b:if cond='data:blog.pageType == "item"'>
   <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
   </b:if>
   </b:loop>
   </b:if>

   
   
4. Salve. Procure (ainda em modo expandido) o código que pode ser:

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

   
   ou
   

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

5. Substitua por:

   <div class='post-footer-line post-footer-line-3'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.url != data:blog.homepageUrl'><h4>Leia também:</h4></b:if> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </b:if>
   </div>

   
   

   Se você não encontrar nenhum p ou div que use class='post-footer-line post-footer-line-3', crie-a logo abaixo da tag que fecha class='post-footer-line post-footer-line-2'. Onde está escrito Leia também você pode escrever o texto de sua preferência.

Menu Expandível

Realizamos uma mudança interessante ultimamente aqui no Dicas e Tutoriais - Botoja, como podem notar lá em baixo temos os marcadores com um link onde você pode expandir ou recolher os itens dos marcadores. (Não tenho mais usado o Menu expandível aqui desde que mudei de Layout e optei por não usar mesmo) Economizando assim espaço no layout. Essa dica eu vi no Templates Para Novo Blogger da Ariane, achei sensacional e agora repasso aqui.

Este efeito se consegue usando o scriptanimatedcollpase. Faça o download e hospede em algum servidor (sugiro o SkyDrive, já que o Google Pages já era). Após hospedar o script, copie o link fornecido e use-o neste código, que deve ser colado antes da tag </head>

Continue Lendo...

<script type="text/javascript" src="URL_animatedcollapse.js"></script>

Salve. Depois clique em Expandir Modelo de Widget e procure por este trecho do código (óbviamente você já deverá ter em seu blog uma lista de links, ok?)

<b:widget id='LinkList1' locked='false' title='Titulo da lista' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<div style='text-align:center;'>
<a href='javascript:lasEtiquetas.slideit()'>EXPANDIR/CONTRAER</a>
</div>
<div id='EtiquetasLista'>


<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>


</div>
<script type='text/javascript'>var lasEtiquetas=new animatedcollapse("EtiquetasLista", 500, false)</script>


<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Acrescente os códigos em vermelho e salve. Você pode usar o efeito em quantas listas desejar, bastando repetir o código. Para usar o efeito em uma lista de Marcadores:

<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<div style='text-align:center;'>
<a href='javascript:lasEtiquetas.slideit()'>EXPANDIR/CONTRAER</a>
</div>

<div id='EtiquetasLista'>

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

</div>
<script type='text/javascript'>var lasEtiquetas=new animatedcollapse("EtiquetasLista", 500, false)</script>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Como hospedar JS no SkyDrive

Para hospedar no SkyDrive basta ter uma conta do no WindowsLive (Hotmail, Space, MSN). Na sua página do SkyDrive, clique na pasta Público e depois em Adicionar Arquivos:

Depois de subir o .js, clique com o botão direito sobre a pastinha com o arquivo e vá em Propriedades.

Copiei todo o primeiro link (endereço) que aparece, como mostra a imagem abaixo:

Faremos a seguinte alteração no endereço: retiraremos o final ?download dele. Só então ele será válido para colocarmos no código do template, da maneira que expliquei acima:

<script type="text/javascript" src="URL_animatedcollapse.js"></script>

No caso, o meu ficou assim:

<script type="text/javascript" src="http://pksnhw.bay.livefilestore.com/y1p8NsS9Oihdasa7auBF9q0SskdGsd9ldx-4hUjNejSjLpp2Mwv0qG_b5PFeQPJc8d4f-4jdYXeSgeVnvjSFIQ69g/animatedcollapse(2).js"></script>

O link é assim mesmo, enorme.

Email Abaixo das Postagens

Facilite a comunicação com seus leitores colocando uma imagem com link referindo-se ao seu E-mail logo abaixo das postagens. Para fazer isto você deverá:

Criar ou obter alguma imagem, Nos links abaixo você poderá criar imagens de E-mail;

1 - http://email.about.com/od/stationeryandmorefun/gr/e_mail_icon_gen.htm

2 - http://services.nexodyne.com/email


O meu ficou assim:

Hospede a imagem em sites de hospedagem, guarde a url da mesma.

Abra o painel de administração de seu Blog, abra a aba de HTML, marque a opção de expandir widgets.

Encontre esta linha: <p class=’post-footer-line post-footer-line-1’> e abaixo dela coloque esta:

<a href="mailto:botojaweb@gmail.com?subject=Hello%20again"><img src="URL DA IMAGEM" alt="my email" /></a>

Não esqueça de colocar o seu e-mail em mailto

Depois é só salvar as configurações.

Dica retirada do Katempla

Desligar mais Rápido

Aumentar a velocidade de encerramento do Windows XP reduzindo o tempo de espera.

O Windows XP recorre a determinados valores do seu registo que determinam o tempo que este deverá esperar antes de ordenar o encerramento (killing).

Editando essas duas linhas responsáveis, colocando valores mais baixos, conseguimos diminuir consideravelmente o tempo que o Windows necessita para se desligar com sucesso.

Antes de executar qualquer alteração no seu registo, não se esqueça de fazer o respectivo backup!

A primeira parte deste guia, lida com alterações das configurações que determinam a quantidade de tempo que o Windows necessita para fechar as aplicações ativas.

1ª etapa
Abra o REGEDIT e navegue até ‘HKEY_CURRENT_USER\Control Panel\Desktop\’
Selecione a linha de valor ‘WaitToKillAppTimeout’.
Coloque no valor ‘1000′ (por predefinição deverá estar 20000).
Agora selecione o valor ‘HungAppTimeout’
Altere também para ‘1000′.

Nesta segunda parte iremos alterar os valores de espera para desligar as aplicações ativas em todos os utilizadores do sistema.

2ª etapa
Abra o REGEDIT e navegue até ‘HKEY_USERS\.DEFAULT\Control Panel\Desktop’
Selecioneo valor ‘WaitToKillAppTimeout’.
Altera para ‘1000′ (por predefinição o valor deve estar 20000).
Agora selecione o valor ‘HungAppTimeout’.
Altere para ‘1000′ também.

Agora na terceira parte, iremos alterar uma configuração secundária do registro para diminuir o tempo que o Windows XP terá de esperar antes de encerrar os serviços ativos depois de receber a ordem de encerramento que demos anteriormente.

3ª etapa
Abra o REGEDIT, navegue até ‘HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\’
Selecione o valor ‘WaitToKillServiceTimeout’
Altere o valor para ‘1000.’
Esta alteração deverá ajudar consideravelmente à velocidade de encerramento do Windows.

4ª etapa (utilizadores com placas de vídeo Vvidia)
Este serviço, incluído recentemente pelo "NVIDIA Detonator driver", tem uma função indeterminada. Não encontrei nada sobre este assunto, e a única coisa que encontrei de forma unânime foram os utilizadores a queixarem-se da lentidão que provoca. Então o melhor será, para quem tem uma placa gráfica da Nvidia, considerar a desativação do serviço. E veremos as diferenças no encerramento.

Para desativar o Nvidia Driver Helper service:
Botão direito do mouse sobre ‘O Meu Computador’ (my computer) selecione ‘Gerir’ (manage).
Expanda os ‘Serviços e aplicações’ ’services and applications’ depois ‘Serviços’ (services) para abrir a janela dos serviços.
Localize e selecione ‘Nvidia Display Driver service’. Botão direito do mouse e selecione propriedades (properties).
No ‘Tipo de arranque’ (startup type), marque na caixa dropdown, Desactivado (disabled). Click ‘ok.’

5ª etapa
Por defeito o Windows XP avisa o utilizador sobre uma ou mais aplicações que não estão respondendo quando recebem a ordem para encerrar, isto para o encerramento até que o utilizador aprove o encerramento das aplicações que não estão respondendo.

Alterando ligeiramente o registo, potenciamos o Windows com a funcionalidade de encerrar automaticamente as aplicações que não estejam respondendo.
Embora não seja uma técnica para acelerar o processo de encerramento do Windows, de modo direto, atua para isso mesmo de forma indireta, pois assegura que o utilizador não tenha de dar mais um clique e mais e mais outro sempre que se processe um encerramento rápido, que deixará algumas aplicações penduradas à espera da tal aprovação para desligar, por sua vez deixa o Windows também pendurado.

Para permitir que o Windows XP automaticamente encerre as aplicações em conflito altere o seguinte:
Abra o REGEDIT, navegue até ‘HKEY_CURRENT_USER\Control Panel\Desktop’
selecioneo valor ‘AutoEndTasks.’
Altere o valor para ‘1′

O XP será capaz, agora, de encerrar as aplicações que falharam durante o shutdown.

Caso conheça alguma forma diferente, partilhe essa informação!

Ctrl+C: PeopleWare

Como criar um botão de comentar no blogger

Vamos a um tutorial de como colocar um botão bem visível para inserir comentários.

Achei muito fraco o simples link que veio no meu template atual! por isso, eu vou ensinar VOCÊ a criar seu próprio botão bem lindo para os visitantes do seu blog comentarem, comentarem muito, sem limites! hahaha

ok, chega de enrolação!

Primeiramente, crie a imagem que ficará no botão. ( não copie a minha, faça a sua, nem que seja no paintbrush )


O tamanho da imagem será decidido por você.
Depois de criada hospedea em algum serviço de hospedagem de imagens online, como o

imageshack.us

Pegue o link da imagem do botão que você acabou de hospedar e guarde.

Agora vem a parte mais legal do tutorial...

Vá em Layout / Editar HTML
Marque a caixa de seleção "Expandir modelos de widgets"

Localize o seguinte trecho:

<data:post.body>


Cole o código do botão logo após.


<div style="'margin:"><br /><a href="'data:post.addCommentUrl'" onclick="'data:post.addCommentOnclick'"><img border="'0'" src="'http://AQUI-FICARA-O-ENDEREÇO-DA-SUA-" /></a><br /></div>

Clique agora em salvar modelo e visualize seu blog para ver como ficou.
Não se esqueça de trocar o endereço da imagem pelo correto

Prontinho. você agora tem um lindo botão de "comentar no seu blog".

Nota: Você poderá colocar o botão onde quiser, basta escolher o local e colar o código.


Ctrl+C: Blog Dedo de Ouro