Ativando os avatares no seu blog

O recurso que muitos usuários da plataforma blogger esperavam era o de inserir Fotos/avatares nos seu sistema de comentários. Até então isso era luxo somente do Wordpress e Campânia.

Creio que nossos problemas acabaram pois com a comemoração de 10 anos, o blogger inseriu e ativou esse recurso na plataforma. Mas por enquanto ele não está disponível nos templates customizados, ou seja, ele só está funcionando corretamente nos templates do próprio sistema.

Mas como um bom samaritano que sou, vim ensinar-lhes a colocar o código diretamente no seu HTML.

Segue o Tutorial:

Entre em "Layout" -> "Editar HTML" -> marque a opção "Expandir modelos de widgets" e encontre o trecho: <dl id='comments-block'>

Depois subistitua por:

<dl
expr:class='data:post.avatarIndentClass' id='comments-block'>

Depois encontre o trecho:

<b:if
cond='data:comment.authorUrl'>           
<a expr:href='data:comment.authorUrl'
rel='nofollow'><data:comment.author/></a>

E cole ANTES dele o código:

<b:if
cond='data:blog.enabledCommentProfileImages'>           
<data:comment.authorAvatarImage/>        
</b:if>

Tudo deve ficar mais ou menos assim:

<dl
expr:class='data:post.avatarIndentClass' id='comments-block'>      
<b:loop values='data:post.comments' var='comment'>        
<dt expr:class='&quot;comment-author &quot; +
data:comment.authorClass' expr:id='data:comment.anchorName'>          
<b:if cond='data:comment.favicon'>            
<img expr:src='data:comment.favicon' height='16px'
style='margin-bottom:-2px;' width='16px'/>          
</b:if>          
<a expr:name='data:comment.anchorName'/>          
<b:if
cond='data:blog.enabledCommentProfileImages'>            
<data:comment.authorAvatarImage/>          
</b:if>          
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'
rel='nofollow'><data:comment.author/></a>

Agora as fotos dos comentaristas irão aparecer corretamente no seu blog. Claro se eles comentarem usando a "Conta do Google"

Compartilhando seus artigos

Social Bookmarks é um método muito bom para compartilhar seus artigos, com ele os usuários podem enviar os posts para as mais famosas redes, como o Digg, del.icio.us, technorati, Ueba entre outros.

Vou ensina-los a inserir uma barra como a minha, totalmente personalizada, dica que eu aprendi com a Juliana.

Entre no modo de edição HTML e marque o campo "Expandir Modelos de Widgets".

Dentro do CSS adicione o seguinte código:

/* ----- Bookmarking ----- */
.book {
margin-top:5px;
background:#fdfdfd;
padding:2px 2px 2px 2px;
border:1px solid #f0f0f0;
}
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Depois procure por <p class='post-footer-line post-footer-line-3'/> e em baixo cole:

<div align='left'><div class='book'>
<div class='rsociales'>
<span class='blogk'>
<ul>
<li><a expr:href='data:post.emailPostUrl'
target='_blank' title='Enviar por Email'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://del.icio.us/post?url=&quot; +
data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Incluir no
del.icio.us'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot;
+ data:post.url' target='_blank' title='Incluir no
Digg'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
diHITT'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://www.linkk.com.br/submit.php?url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Incluir no
LinkK'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://rec6.via6.com/link.php?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Rec6'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://ueba.com.br/NovoLink?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Uêba'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
href='http://feeds.feedburner.com/mundodosblogues/'><img
alt='Assinar feed' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://www.technorati.com/faves?add=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Technorati' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Google' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Yahoo!' class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Blogmarks' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
</ul>
</span>
</div>
</div>
</div>

Cique aqui e baixe gratuitamente o pacote de ícones

Nota# "Você deve hospedar todos os ícones em algum servidor, como o skydrive e depois alterar o campo "http://IMAGEM" pelo link da imagem referente".

Nota## "Não se esqueça de colocar o endereço do seu feed onde está escrito "<ahref='http://feeds.feedburner.com/mundodosblogues/'><img".

Seu post com Drop Caps

Drop caps é onde um artigo começa com uma letra enorme, destacando-se de todas as outras letras restantes do post. Geralmente esse modelo de layout é utilizado em jornais e templates no estilo.

Eu acho muito legal, dá um diferencial e não é muito difícil de aplicar no seu blog ele é bem parecido com o hack de Leia mais.

Para adicionar esse recurso no seu blog entre no Editor HTML do blogger, procure pelo código  ]]></b:skin>e antes dele cole:

/* ---( drop caps )--- */ .dropcaps { float:left; color: #000000; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

Nota: caso não funcione, cole o código acima em alguma outra parte do CSS, pode ser antes de MAIN ou POST.

Em seguida vá até "Configurações" -> "Formatação", desça até "Modelo de postagem" e cole:

<span class="dropcaps">Primeira letra do post aqui</span>restante do post aqui

Quando você quiser que a letra grande apareça no artigo é só cola-la no local indicado acima, antes de < /span> e o restante do post logo após essa tag.

Escolhendo os marcadores do blog

**Note que os marcadores destacados em vermelho não aparecem na categoria 2

Esse hack faz com que seja exibidos apenas os marcadores que você escolher, desse modo você pode adicionar mais de uma lista de categorias sem repeti-las. É uma dica muito boa para quem gosta de organização e quer dividir os marcadores por categoria.

O processo é bem simples, basta você entrar na página de edição HTML do blogger e procurar pelo código que se refere a sidebar e os gadgets.

Exemplo:

Se seu blog tem um gadget com o título "Arquivo", você deve procurar pelo trecho:

<b:widget id='HTML' locked='false' title='Arquivo' type='HTML'/>

Altere o campo em negrito de acordo com o título que seu marcador tiver.

Logo abaixo cole o seguinte código modificado:

<b:widget id='Label5' locked='false' title='Categoria2' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul> <!-- Inicio da lista de categorias -->
<b:loop values='data:labels' var='label'>

<!-- Apresenta qualquer categoria exceto as listadas abaixo -->
<b:if cond='data:label.name != &quot;Arquivos&quot;'>
<b:if cond='data:label.name != &quot;Novidades&quot;'>
<b:if cond='data:label.name != &quot;Comentarios&quot;'>
<b:if cond='data:label.name !=&quot;Blogspot&quot;'>

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

<!-- Tags de fechamento -->
</b:if></b:if></b:if></b:if>

</b:loop>
</ul>

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

Atenção!

** Altere os campos em negrito com os marcadores que você NÃO quer que apareça no blog;

** Se for adicionar mais marcadores para a excessão, adicione mais tags de fechamento(</b:if>) onde está em vermelho (Tags de fechamento)

Depois visualize e salve!

Otimizando o título das páginas do seu blog

O blogger possui grandes qualidades, mas tem uma ferramenta muito importante que no momento ainda não foi dada atenção. Estou falando do Título das páginas do seu blog.

Quando você busca por algum artigo em seu blog, é exibido da seguinte maneira: "Título do blog: Título do artigo", e de certa forma isso prejudica muito a indexação das páginas e até mesmo seu pagerank. Pois quanto maior for o título do artigo, mais difícil será ele ser encontrado pelos motores de busca (google, yahoo, etc..).

Então fiz uma busca na web e encontrei o site bloggertricks, que publicou um artigo bem interessante, onde qualquer usuários do blogger pode melhorar o título das suas páginas.

Basta seguir os seguintes passos:

Entre na guia "Layout" -> "Editar Html" e procure por:

<title><data:blog.title/></title>

(esse código fica bem no começo do html, após <head> )

Em seguida substitua tudo por:

<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> |<data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

Visualize, se estiver tudo certo, salve!

Caixinha de "Link-me"

Muitos usuários iniciantes ou não, buscam em sites de pesquisas sobre como criar uma caixinha de "link-me", que serve geralmente para mostrar e indicar aos leitores um banner do blog. Por esse motivo vou ensinar a criar essa ferramenta.

Primeiro, crie uma imagem bem bonitona para seu banner;

Em seguida, hospede-a em algum servidor gratuito, como o imageshack, google pages ou até mesmo o blogger.

Bom, o código báse é esse:

<p align="center"><span class="font2"><b></b></span></p> <p align="center"><img src="URL DA IMAGEM" hspace="2" vspace="5" />

<textarea onfocus="this.select()" onmouseover="this.focus()" rows="3" cols="10" name="textarea" style="border: 1px solid rgb(0, 0, 0); font-family: verdana; font-size: 8pt; background-color: rgb(255, 255, 255);"><br /><a href="URL DE SEU BLOG" target="_blank"><img src="URL DA IMAGEM" border="0" /></a><br /></textarea> </p>

Altere os campos em negrito de acordo com suas necessidades, inserindo o endereço da imagem hospedada, o endereço do seu blog e novamente o link da imagem anterior.

Se você prefirir, temos alguns sites que fazem todo o trabalho pesado por você, acesse:

Top Gifs Br;

Ajuda Blog;

Graphics Guru - Botton;

Windows Live Writer

 

O windows live writer é um programa da miraculosa e vasta microsoft, por sua vez ele tem a função de um editor de texto, só que para blogueiros. As suas ferramentas são bem completas, todos os botões estão de fácil acesso e bem visíveis. Você pode adicionar fotos, vídeos, mapas, eventos e marcas, deixando seu post muito mais atraente e profissional.

Ele é compatível com a maioria das plataformas, como o Blogger, Windows Live, Wordpress, SharePoint, Community Server e muitos outros.

Eu particularmente achei ele fantástico, indispensável para qualquer blogueiro, a não ser que você usa outro sistema operacional sem ser o windows, pois ele não é compatível com os outros (linux, mac...)

Recentemente a Juliana do dicas blogger publicou um tutorial em vídeo, ensinando a utilizar o live writer, eu recomendo que todos assistam o vídeo.

 

Ele possui uma grande ferramenta, a possibilidade de o usuário ver como a postagem ficará no blog, sem precisar publicar antes. Para isso é só entrar em "Exibir" -> "Visualização da web". A imagem acima reflete esse post que estou escrevendo, tirei o print antes de enviar o artigo.

A interface do programa é bem ligth e bonita, não deixa a desejar em nada nesse aspecto.

Clique aqui e acesse o site oficial para baixar o Live Writer gratuito.

Cadastrando se blog

O primeiro passo para a utilização do programa é cadastrar seu blog, para que ele reconheça e envie as postagens para lá. (Clique nas imagens para aumentar o tamanho)

Clique em "Blog" -> "Adicionar conta de blog"

(Essa opção fica lá na barra de cima, no topo do programa)

 

Em seguida escolha a opção "Outros serviços de blog" se você usa o blogger ou wordpress. Entre com seus dados (endereço do blog, nome de usuário e senha que você usa para entrar no blogger) e clique em próximo.

 

Em seguida ele identificará seu novo blog, após isso, é só fazer suas postagens e clicar em publicar.

 

 

Você pode adicionar quantos blogs quizer, basta repetir o tutorial anterior.

Resumo dos posts, "Leia Mais" expansivel.

Esse hack é muito interessante, ele exibe um resumo das postagens na página inicial do blog, facilitando muito a usabilidade do leitor.

Esse hack possui uma grande diferença dos outros "Leia Mais", ele faz com que o leitor não precise sair da home para terminar de ler o artigo. Quando ele clica sobre o texto em questão, o restante do post é exibido, sem atualizar a página.

Entre em "Layout" -> "Editar HTML" e localize o trecho ]]></b:skin> e </head>

Copie código <script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> e cole entre as tags anteriores. Ficando assim:

]]></b:skin> <script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> </head>

Ou se você preferir, baixe esse arquivo, hospede em qualquer servidor gratuito como o google pages e em seguida cole o link entre as tags ]]></b:skin> e </head>

Agora salve seu template.

Marque a caixa "Expandir modelos de widgets"

Procure por:

<b:includable id='post' var='post'>

Selecione tudo entre o codigo acima até <div style='clear: both;'/> <!-- clear for photos floats --> e substitua tudo por esse código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

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

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>Leia Mais...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>Resumo...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Pronto, agora salve seu template novamente.

(você pode alterar os textos, "Leia Mais" e "Resumo" como quiser.)

Agora para finalizar, abra no painel "Configurações" -> "Formatação" encontre a caixa de texto "Modelo de Postagem" e cole o seguinte código:

Digite seu resumo aqui
<span id="fullpost">
Digite o resto do post aqui
</span>

Agora você pode escolher quais os posts serão resumidos, basta usar o código acima, adicionando o resumo e o restante do post no local indicado.

OBS: Os artigos anteriores não serão alterados, apenas os novos apartir da instalação do hack.

Clique aqui e baixe o template mínima do blogger já com o hack instalado

Navegação de paginas no topo do blog

Esse hack irá alterar a navegação entre os posts do seu blog (postagem recente, postagem anterior), geralmente eles ficam no final do template. Se você gosta de personalizar seu blog vai adorar a dica, pois ele deixa seu layout mais original, removendo aquele aspecto padrão.

Garanto que não tem mistério, qualquer iniciante poderá realizar o processo, a não ser que seu template não tenha os códigos de referência... mas isso fica para os comentários.

Então vamos passar a navegação para o topo do site.

Entre em "Layout" -> "Editar HTML" -> marque a opção "Expândir modelos de widgets" e procure por:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

Essa é a linha que indica a navegação, então recorte-a e cole logo após:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

Pronto, viu como foi fácil? agora você pode visualizar, se estiver tudo certo salve!

Feed por categoria

(Foto por amadeo.blog.com)

Recentemente estava testando uma maneira de mostrar na sidebar os posts mais recentes de acordo com marcadores do blog. Estava pensando que seria legal adicionar no template um recurso desses, ou até mesmo facilitar a vida dos leitores, dando a opção de receber via feed as novidades das categorias preferidas dele.

Depois de algumas pesquisas e poucas tentativas consegui formar uma linha para tal feito. Então vamos conhecer as linhas básicas para a configuração:

Comentários recentes

http://SEU_BLOGUE.blogspot.com/feeds/comments/default

Postagens recentes

http://SEU_BLOGUE.blogspot.com/feeds/posts/default

Agora vamos ao que interessa, disponibilizar o feed por categorias:

Para um blog com tags simples via url do blogger use:

http://SEU_BLOGUE.blogspot.com/feeds/posts/default/-/NOME_DO_MARCADOR

Se seu marcador possui espaços, como em "Dicas para blogger", use:

http://SEU_BLOGUE.blogspot.com/search/label/Dicas%20para%20blogger

Caso você tenha configurado um domínio próprio (.com) essa dica fica um pouco diferente, pois não sei se você percebeu, mas a url das páginas mudam.

http://www2.blogger.com/feeds/SEU_BLOGID/posts/default/-/NOME_DO_MARCADOR

(para encontrar esse "BLOGID" clique em "Nova Postagem", e sem seguida observe na barra de endereço algo parecido com "blogID=5363934725589179358", copie os números finais)

***Não se esqueça de alterar os campos:

"SEU_BLOGUE"

"NOME_DO_MARCADOR"

"SEU_BLOGID"

Para inserir tudo isso no seu blog basta entrar em "layout"-> "Adicionar um gadget" -> "Feed".

Códigos no rodapé da postagem

Recebi alguns e-mails de leitores perguntando como adicionar uma linha de código no final da postagem (rodapé), essa linha pode ser um anúncio, uma imagem, um texto ou qualquer outro elemento que você quiser.

Não tem mistério, basta você entrar em "Layout" -> "Editar HTML" -> marque a opção "Expandir elementos de Widgets".

Em seguida procure por: (Ctrl + F)

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

E logo depois adicione o anúncio ou outro código, ficando assim:

<p class='post-footer-line post-footer-line-3'/>
(Anúncio ou código)

Você pode inserir um anúncio do adsense por exemplo, coloque entre as tags <center>, </center> . Assim o código ficará bem no centro, organizando e bonito.

Gadget invisível

(Foto por cassetteject )

A Rô do blog a la carte publicou recentemente um artigo bem interessante, um hack que exibe certo gadget somente para o autor do blog. Eu achei muito legal, pois tinha coisas que eu queria colocar somente para mim, sem que outras pessoas vejam. Como por exemplo uma "meta", onde são exibidos links fáceis e diretos para meu painel de controle, criar e editar uma postagem, layout entre outras coisas.

O processo é fácil, você só terá que adicionar um widget, mas ele será colocado diretamente dentro do editor html. Então entre em "Layout" -> "Editar HTML", marque a opção "Expandir modelos de widgets" e procure por algum widget que você adicionou; (dica: procure por title='TÍTULO DO WIDGET'

Logo em seguida de </b:widget> cole este código:

<b:widget id='Text1' locked='false' title='TÍTULO DO WIDGET' type='Text'>
<b:includable id='main'><span class='item-control blog-admin'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Pronto, agora você pode entrar em "Elementos de páginas" e colocar o gadget onde quiser, lembrando que ele irá aparecer somente para o autor do blog enquanto ele tiver logado com a conta usada para entrar no blogger.

Olha como ficou meu gadget:

Eu testei o hack e deu tudo certo, espero que com vocês aconteça o mesmo.

Menu Expansivel

Menu expansivel é aquele hack que ao clicar em determinado texto ou imagem, surgem outros elementos logo abaixo, sem carregar a pagina toda.

Se você quer adicionar alguma informação extra no template eu recomendo, assim não poluirá seu conteúdo, deixando seu template sempre estiloso.

Para configurar seu menu expansivel você não precisará de muito suor, é só entrar em "Layout" -> "Editar HTML";

Logo abaixo de <head> cole o seguinte código:

<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>

Agora é só clicar em "Adicionar um gadget" -> "HTML/Javascript" e colar esse código:

<a href="javascript:void(0);" onclick="expandcollapse('Menu')">TEXTO</a><br/>
<ul id="Menu" class="texthidden">
<li>CONTEUDO</li>
</ul>

Agora é só você alterar o campo "TEXTO" e "CONTEUDO", colocando o que você quiser.

Personalizando os comentários do seu blog

Se você é um blogueiro assíduo e vive entrando em sites e fóruns de ajuda deve saber que o blogger é totalmente customizavel, ou seja, você pode mexer em tudo que é código, modificar e adicionar elementos sem problema algum, no entanto você tem que conhecer bem no que você irá mexer para não causar danos ao seu template e acabar perdendo todo seu trabalho.

Por isso vim mostrar a vocês como personalizar o campo de comentários, destacando o comentário do autor do blog e adicionando cores diferentes. Essa dica eu ví lá no blog a la carte, achei muito interessante e resolvi implementar mais um pouco, adicionei uma imagem para o autor e uma fixa para os demais usuários.

*Esse código será aplicado baseado no template mínima do blogger.

Vamos aplicar o código, mas primeiro veja como funciona as tags do código mínima:

• "comment-author" - O autor do comentário
• "comment-body" - Corpo do comentário
• "comment-timestamp" - Horário da postagem
• "comment-footer" - Rodapé dos comentários

Agora que você já está a par do código vamos aplicar no template:

Entre em "Layout" -> "Editar HTML" -> marque a opção "Expandir modelos de widgets" e encontre esse trecho do código:

/* Comments
----------------------------------------------- */

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Substitua tudo pelo seguinte CSS personalizado:

/* Comments
----------------------------------------------- */
#comments {margin:1em 10px 1.5em;line-height:1.6em;}
#comments .comment-author {margin:.5em 0;}
#comments .comment-body {margin:.25em 0 0;}

#comments .comment-body p {margin:0 0 .75em;}
#comments p a {text-decoration: none;}
#comments p {margin-left: 10px;line-height: 1.1em;}
.deleted-comment {font-style:italic;color:gray;}

.commentlist ul {margin: 0;padding: 0;}
.commentlist li {list-style-type:none;padding:5px;margin-top: 0;}

.commentlist-author {color: #000000;background: #f6f6f6;
border-bottom: 1px solid #0000FF;border-right: 3px solid #0000FF;}

.commentlist-general {background: #ffffff;
border-bottom: 1px solid #0000FF;border-right: 3px solid #0000FF;}

.commentlink-date {float: right;font-size: 80%;text-decoration: none;padding: 2px;}

.commentlink-author {color: #0000FF;text-transform: lowercase;float: left;}

Os termos em azul é o que você poderá modificar para deixar as cores da tabela adequada ao seu blog.

Depois que você aplicou o css deve colocar o código que aparecerá no template, para isso encontre o trecho abaixo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Depois substitua tudo por esse:

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<img align='left' src='http://LINK_DA_IMAGEM_DO_AUTOR_DO_BLOG.png'/> <li class='commentlist-author' style='margin: 10px; padding: 5px;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<span class='commentlink-author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>
</cite>
<span class='commentlink-date'><a class='commentlink' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p style='margin-left: 0;'><data:comment.body/></p>

<div class='clear'/>

</li>
<b:else/>

<img align='left' src='http://LINK_DA_IMAGEM_DOS_LEITORES.jpg'/> <li class='commentlist-general' style='margin: 10px; padding: 5px;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<span class='commentlink-author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>

</cite>
<span class='commentlink-date'><a class='commentlink' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p style='margin-left: 0;'><data:comment.body/></p>

<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

Lembrando que esses códigos foram aplicados no template mínima do blogger, caso seu blog tenha um modelo diferente, procure detalhadamente pelo código de comentários para não causar danos ao template. Visualize e depois salve para garantir.

Baixe aqui o template mínima já com o código aplicado

Aterando o texto "Postar um comentário"

Eu estava pasmo de não encontrar o código relativo ao texto "postar um comentário", que se encontra bem abaixo do post, na área de comentários. Eu sei, não tem muita diferença alterar ou remover esse pequeno detalhe, mas eu queria encontrar para colocar um texto personalizado, e encontrei.

O Help blogger foi minha salvação, e eu não sabia que era tão fácil, bastou encontrar uma tag específica para a mágica acontecer.

Olha como é simples:

Entre em "Layout" -> "Editar HTML" -> "Expandir modelos de widgets";

Em seguida localize e apague o código <data:postCommentMsg/>

Pronto, escreva o que quiser no lugar, você pode mudar a fonte, a cor ou inserir uma imagem pequena, use sua criatividade.

Nota: Se você usa o Template padrão do blogger o código fica um pouco diferente.

Encontre a linha <$BlogItemNumber$>

Remova toda essa tag e em seguida coloque esse trecho:

<a href="http://www.blogger.com/comment.g? blogID=XXXX&postID=<$BlogItemNumber$>">TEXTO PARA COMENTÁRIOS</a>

Altere XXXX pelo seu ID;
(Para descobrir seu ID, crie uma nova postagem, e o número aparecerá na barra de endereço assim, blogID=XXXXXX.)

Altere também "TEXTO PARA COMENTÁRIOS" para o texto que desejar.

Escolha a opção desejada e siga esse tutorial, mas lembre-se de visualizar o template antes de salvar.

Primeiros passos com HTML

Para quem está iniciando colocar uma imagem, mudar a cor ou até mesmo inserir um link pode ser complicado, no começo quando mechemos com HTML isso é comum, pois não temos nenhuma habilidade com códigos.

Se você não tem idéia de como usar as tags básicas eu vou dar uma ajudinha, mostrando como inseri-las no seu HTML ou até mesmo no post.

Inserindo um link em uma palavra

<a href="http://LINKDAPAGINA.com">TESTE</a>

No blog só a palavra “TESTE” que aparece, mas quando o usuário clica nela, é redirecionado para a pagina do link, que no caso é “LINKDAPAGINA”.

Para abrir a pagina em outra janela usamos a variante target=”_blank” no final do link, ficando assim:

<a href="http://LINKDAPAGINA.com" target=”_blank”>TESTE</a>

Inserindo uma imagem

<img src=”LINKDAIMAGEM” />

Esse é o código, com base nisso temos várias modificações, como tamanho, largura, com link e etc.

Para inserir um link em uma imagem temos:

<a href="http://LINKDAPAGINA.com"><img src=”LINKDAIMAGEM” /></a>

Inserindo uma cor diferente no texto

<font color="#FFFF66" face="verdana" size="3">EXEMPLO</font>

1. Font e /font: Usado para abrir e fechar as tags de formatação;
2. Color: Temos a cor da fonte;
3. Face: Temos o tipo de fonte;
4. Size: O tamanho da fonte.

Isso gera muitas dúvidas, mas é fácil, basta saber os comandos iniciais e o código das cores. Neste site temos vários códigos com cores.

Linkando um e-mail

<a href="mailto:SEUE-MAIL@PROVEDOR.COM">E-MAIL</a>

Onde está escrito “seue-mail@provedor.com” você colocará o e-mail desejado.

Se você usa o blogger como plataforma não precisará usar essas linhas na hora de criar a postagem, pois ele possui umas ferramentas de fácil acesso, onde você clica sobre o ícone desejado e ele inseri o código para você, facilitando sua vida.

Agora, se você for mexer no seu template e entrar na guia “Editar HTML” terá que usar muitas vezes os códigos citado acima, disso pode ter certeza.

Seguidores, ou Followers

(Print de Usuário Compulsivo)

O blogger lançou mais um recurso para seus usuários, o followers, ou seguidores.
Ele funciona como uma rede, que permite os usuários seguirem outros blogs legais.

Sua aparência é como o widget do blogblogs, onde são exibidos os avatares dos seguidores, juntamente com o direcionamento para seus perfis.

Como o recurso ainda está em fase de teste, apenas blogs na língua Inglesa podem usufruir da novidade. Mas como tudo tem seu jeito, vou ensinar você a ativar e implementar ele no seu lindo blog.

Acesse seu painel de controle, entre em “Configurações” -> “Formatação”
Encontre “Idioma” e altere para Inglês.

OBS: Seu painel de controle ficará todo em Inglês depois da mudança.

Agora é só entrar em “Layout” -> “Elementos de página” -> “Adicionar um gadget” -> ”Seguidores”.

Pronto, escolha o melhor local e viva feliz!

Não se assuste se alguém estiver te perseguindo, garanto que não será nenhum assassino em serie, mas sim um leitor que gostou do seu blog e quer te seguir por todos os lados.

Domínio próprio no blogger

Muita gente não gosta do blogspot na url do blog, eu não vejo problema, claro que seria bem mais fácil um “seublogue.com”, pois o nome seria curto para memorizar, trazendo mais visitantes para seu blog.

Eu não pretendo adquirir um domínio tão cedo para o Mundo dos Blogues, no momento acho irrelevante, pois de um jeito ou outro estou com o blog ativo e rodando na web.

Se você não pensa como eu, aconselho a comprar um “.com” ou “.net”, assim saberá das vantagens de seu blog possuir um nome bem pequeno.

Escolhendo o melhor servidor.

Muitas empresas vendem domínios personalizados na internet, se você deseja um “seublog.com.br” sugiro que dê uma olhada em:

Registro.br;

LocaWeb.

Para registros .com, .net, . info ou .org:



• Godaddy;
• Nomer;
• RedeHost;
• Ig Empresas.


Configurando e apontando para o blogger

Está na hora de configurar tudo para ser apontado no blogger, para isso entre no painel de controle de onde você comprou o domínio.

Vou usar como exemplo o Godaddy;

My Account -> Manage Domains;
Total DNS Control And MX Records;

Em “Name”, insira somente o Subdominio que você quer usar. Ou seja, se você quer usar www.meudominio.com, insira somente www. Se você quer usar subdominio.meudominio.com, insira “subdomínio”;

Em “Host Name” vamos indicar o redirecionamento, então cole isto no campo ao lado – “ghs.google.com”, que serve de contato entre o blogger e o novo endereço.

Clique em Continue, e em seguida em Add.

Comprei e configurei o domínio, agora quero adicionar no blogger.

Depois que você comprou seu domínio e ele já estiver liberado é hora de adiciona-lo ao blogger.

Faça o login no blogger.com, depois entre em:


• “Configurações”;
• “Publicação”;
• “Alternar para: • Domínio personalizado”;
• "Já tem um domínio? Ir para configurações avançadas";

Agora é só você colar o endereço novo no campo “seu domínio”, depois é só repetir as palavras para mostrar ao blogger que você é alguém, em seguida clique em “salvar configurações”.

OBS: Mesmo que alguém digite sua antiga url será direcionado para a nova sem problemas, ou seja, você não perderá seus visitantes, nem pagerank.

Nota: Seu blog será redirecionado para o novo domínio dentro de 72 horas.

Tudo sobre feed/RSS

O que é Feed/RSS?

É um sistema que permite os usuários receberem em seu leitor as notícias as ultimas postagens de uma página, esse recurso é utilizado basicamente em blogs que atualizam seu conteúdo freqüentemente. Desta maneira o usuário fica informado sobre todas as novidades de seus sites/blogs preferidos, sem a necessidade de abrir um a um.

Como funciona

Os feeds oferecem conteúdos resumidos ou não, juntamente com os links para o post original, em alguns casos com a quantidade de comentários que a postagem recebeu.

Alguns blogs disponibilizam uma “newsletter”, onde o leitor pode cadastrar seu e-mail gratuitamente para receber as novidades na própria caixa de entrada. Isso ajuda muito quem não gosta de instalar programas extras no computador.

Quando você recebe uma atualização as seguintes informações são incluídas: título, a página de onde está a notícia, a descrição da alteração, data e o autor da postagem.

Softwares e sites agregadores

O primeiro passo para assinar o conteúdo de algum blog é possuir algum leitor de Feed/RSS. Existem na internet alguns programas que fazem tal serviço, como o:

• NFReader 1.3.4.0
• Magnesium: RSS Ticker 6.0
• Webu 1.09

Se você não quer baixar nenhum software, existem vários sites que fazem o mesmo processo.

Abaixo seguem uma lista de sites agregadores de feed

• Google Reader
• Akregator
• FeedReader
• RSS Bandit
• ThinFeeder

Lembrando que os navegadores Firefox, Internet Explorer 7, safári e opera disponibilizam o recebimento de feeds sem precisar de complementos ou programas. Isso é a revolução dos feeds na internet.

Sempre que o ícone estiver na barra de endereços, ou em algum lugar da página significa que você poderá assinar o conteúdo e receber as novidades.

Assinando um feed

Clique no ícone depois em “Inscrever”.
Em alguns casos, se estiver usando um programa você deverá copiar o endereço XML e inserir no campo disponível, ou até mesmo digitar o endereço completo do blog que ele busca o feed.

OBS: Você poderá cancelar a qualquer momento o recebimento das informações, basta acessar o seu leitor e clicar em “unsubscribe”.

De blogueiro para blogueiro

Se você tem um blog o feedburner é uma boa pedida, ele possui estatísticas e outras ferramentas ideais para você. O cadastro é totalmente gratuito, e se você tem mais de um blog, poderá incluir todos eles no sistema.

Ele tem um contador próprio de quantos leitores assinaram seu blog, as estatísticas são boas e mostra já na home, ao lado do nome do seu blog a quantidade de pessoas que assinam seu feed.

Possui também um recurso chamado “Headline Animator”, que mostra o título dos seus últimos posts.

Enfim, são inúmeras ferramentas ao seu alcance, basta se cadastrar.
Eu uso e recomendo.

Clique aqui para se cadastrar no feedburner!

Agora que você está com um bom conhecimento do assunto, assine nosso feed, assim poderá fazer um teste e ao mesmo tempo saber das nossas novidades.

Clique aqui e assine nosso feed.

Ative a leitura de feed por e-mail no feedburner

Feed é um elemento essencial, todo blog que se preze possui o recurso para facilitar a vida dos leitores e para ganhar alguns leitores fiéis também, pois quando eles assinam seu feed, estão dispostos a acessar novamente seu blog a cada nova postagem que você fizer.

O feedburner possui algumas ferramentas legais para você inserir em sua página, e uma delas é a opção de “feed por e-mail”, que permite seus leitores receber em sua caixa de entrada as novidades mais quentes do blog.

Para começar, você deverá possuir uma conta no feedburner.
O segundo passo é acessar as opções dentro dele, sem precisar mecher no html do seu blog, isso é o mais importante, pois muita gente tem medo de entrar na guia “Editar HTML”.


Vamos lá;

Entre com seu login e senha no feedburner;
Se você tiver mais de um blog cadastrado, escolha qual vamos mecher e clique sobre ele;

• Agora entre em “Publicize” –> “Email Subscriptions”;
• Você verá algumas opções, desça a página e clique em Ativar;
• Em seguida escolha o idioma (no caso o português).

Clique em “Use as a widget in”, escolha a plataforma “blogger” e depois clique em “Go”;
Entre com sua conta do blogger;
Escolha o blog para inserir o código e clique em “Adicionar Widget”.


Se quiser inserir manualmente é só copiar o código do campo e colar em algum elemento de página no seu blog.